/* Koshey Drive: a service-first interface. Loaded after the legacy styles. */
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  color: #19243a;
  background: #f4f6fa;
  --accent: #3764ed;
  --blue: #315dde;
  --ink: #19243a;
  --text: #19243a;
  --muted: #657188;
  --line: #e0e6ef;
  --panel: #fff;
  --page: #f4f6fa;
  --teal: #148b86;
  --appeal: #3764ed;
}
html, body { min-height: 100%; background: var(--page); color: var(--ink); }
body { margin: 0; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); }
h1, h2, h3 { color: var(--ink); }
h1 { margin-bottom: 14px; font-size: clamp(30px, 3vw, 40px); line-height: 1.17; font-weight: 750; letter-spacing: -1.35px; }
h2 { font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing: -.65px; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 680; letter-spacing: -.35px; }
p { overflow-wrap: break-word; }
strong, b { font-weight: 650; }
.muted, small { color: var(--muted); }
small { font-size: 12px; line-height: 1.5; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #93affb; outline-offset: 3px; }
button:disabled, .button:disabled { opacity: .55; cursor: not-allowed; }
.shell { max-width: 1440px; min-height: 100vh; margin: 0 auto; background: transparent; box-shadow: none; }
.topbar { position: sticky; top: 0; height: 84px; z-index: 35; padding: 0 38px; border-bottom: 1px solid var(--line); background: #ffffffed; backdrop-filter: blur(18px); gap: 18px; }
.brand { padding: 0; gap: 12px; color: #19243a; letter-spacing: 0; }
.brand-mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: linear-gradient(145deg, #5279fb, #3152cc); color: white; font-size: 15px; font-weight: 800; letter-spacing: -.75px; box-shadow: 0 5px 12px #3b5eda26; }
.brand-mark { overflow: hidden; padding: 0; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.brand-name, .brand-copy { display: block; color: #19243a; font-size: 25px; line-height: 1.1; font-weight: 750; letter-spacing: -1px; }
.brand-name { font-size: 27px; font-weight: 800; letter-spacing: -1.15px; }
.brand-drive { display: inline; color: #6b7891; font-size: 22px; line-height: inherit; font-weight: 450; letter-spacing: -.8px; margin-left: 5px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.test-label { border: 1px solid #e0e6f2; border-radius: 7px; background: #f6f8fc; color: #78849b; padding: 5px 8px; font-size: 9px; font-weight: 650; letter-spacing: .6px; }
.access-badge, .help-compact { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-left: auto; border: 1px solid #dce4f2; border-radius: 12px; min-height: 42px; padding: 10px 15px; background: #f7f9fe; color: #43516d; font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.access-badge:hover { border-color: #a4b7f5; background: #eef3ff; color: var(--blue); }
.access-badge svg { width: 17px; height: 17px; }
.access-badge::before { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #c4cee0; }
.access-badge.is-active::before { background: #1d9e87; }
.workspace { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - 84px); }
.sidebar { display: flex; position: sticky; top: 84px; align-self: start; min-height: calc(100vh - 84px); padding: 34px 18px 28px; border-right: 1px solid var(--line); background: #f8f9fc; }
.side-caption { margin: 0 14px 16px; font-size: 10px; color: #8b95a7; font-weight: 650; letter-spacing: 1.4px; }
.nav-button { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 5px; min-height: 48px; border-radius: 12px; color: #66738b; font-size: 14px; font-weight: 570; transition: background .15s, color .15s; }
.nav-button > span { width: 23px; text-align: center; font-size: 20px; line-height: 1; color: #8390a5; }
.nav-button svg { width: 20px; height: 20px; }
.nav-button:hover { background: #eef2f9; color: #263654; }
.nav-button.active { background: #e8eeff; color: #3156d2; font-weight: 650; }
.nav-button.active > span { color: #3156d2; }
.side-bottom { margin-top: auto; padding: 42px 14px 0; gap: 8px; font-size: 11px; color: #8793a6; line-height: 1.55; }
.side-bottom > span:first-child { font-size: 9px; letter-spacing: 1.1px; }
.side-bottom strong { color: #53627c; font-size: 16px; font-weight: 650; }
main { width: 100%; max-width: none; min-width: 0; padding: 36px 42px 70px; margin: 0; color: var(--ink); }
.eyebrow { display: block; margin-bottom: 11px; color: #77839a; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.4; }
.lead { max-width: 700px; margin-bottom: 26px; color: #68758d; font-size: 15px; line-height: 1.65; }
.page-heading { margin-bottom: 26px; }
.page-heading h1 { margin-bottom: 10px; }
.page-heading .lead { margin-bottom: 0; }
.page-heading .eyebrow { color: #7282a4; }
.home-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.home-heading h1 { font-size: 36px; }
.home-heading .eyebrow { font-size: 10px; margin-bottom: 10px; }
.home-heading .lead { font-size: 15px; margin-bottom: 0; }
.version-pill, .status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dce5f4; border-radius: 999px; padding: 6px 10px; background: #f0f5ff; color: #58719b; font-size: 10px; font-weight: 650; white-space: nowrap; }

/* Service catalog. */
.service-intro { display: flex; align-items: center; gap: 20px; position: relative; margin: 0 0 26px; padding: 26px 28px; overflow: hidden; border: 1px solid #dce5fa; border-radius: 24px; background: radial-gradient(ellipse at 100% 0, #d7e4ff8a, transparent 55%), linear-gradient(120deg, #f5f8ff, #edf3ff); }
.service-intro > div:not(.service-icon) { flex: 1; min-width: 0; }
.service-intro h2 { font-size: 23px; margin: 0 0 8px; letter-spacing: -.6px; }
.service-intro p { color: #607398; max-width: 650px; font-size: 14px; margin: 0; }
.service-icon { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 18px; background: #fff; color: #3e69df; box-shadow: 0 5px 14px #3960b00d; font-size: 29px; }
.service-icon svg { width: 29px; height: 29px; }
.service-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; border: 1px solid #d3e0f8; border-radius: 999px; padding: 7px 11px; background: #ffffffad; color: #526d9b; font-size: 10px; font-weight: 650; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 218px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: #fff; text-align: left; color: var(--ink); box-shadow: 0 3px 10px #24344f03; transition: transform .18s, border-color .18s, box-shadow .18s; }
.service-tile:hover { transform: translateY(-3px); border-color: #b9caf5; box-shadow: 0 12px 24px #304e8c0c; }
.service-tile strong, .service-tile h3 { color: #23314a; font-size: 18px; font-weight: 700; letter-spacing: -.4px; line-height: 1.35; margin: 16px 0 7px; }
.service-tile p, .service-tile small { color: #7b8699; font-size: 12px; line-height: 1.55; margin: 0; }
.tile-icon { display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 47px; border-radius: 15px; color: #3964da; background: #edf2ff; font-size: 23px; }
.tile-icon svg { width: 23px; height: 23px; }
.tile-icon.teal, .tile-icon.mint { background: #e8f6f3; color: #198b80; }
.tile-icon.violet, .tile-icon.purple { background: #f1edff; color: #7e60ca; }
.tile-icon.orange, .tile-icon.amber { background: #fff1e6; color: #c68643; }
.tile-copy { display: grid; gap: 6px; }
.tile-copy > span { color: #748199; font-size: 12px; line-height: 1.55; }
.tile-icon .stage-art { position: static; width: 25px; height: 25px; opacity: 1; transform: none; filter: none; color: inherit; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 0 0 17px; }
.section-title h2 { margin: 0; font-size: 22px; }
.section-title .quiet-button { padding: 0; font-size: 12px; }
.quick-services { margin-top: 30px; }
.map-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.tile-meta { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: auto; padding-top: 17px; color: #8a95a8; font-size: 10px; }
.tile-meta svg { width: 13px; height: 13px; }
.tile-arrow { position: absolute; right: 22px; top: 24px; color: #a5b1c5; font-size: 19px; }
.service-tile:hover .tile-arrow { color: var(--accent); }
.topic-row { display: flex; gap: 8px; flex-wrap: wrap; overflow: visible; margin: 24px 0; padding: 0; }
.topic-button { display: flex; align-items: center; flex-shrink: 0; gap: 5px; min-height: 42px; padding: 10px 15px; border: 1px solid #dce3ef; border-radius: 11px; background: #fff; color: #6a7790; font-size: 12px; font-weight: 550; }
.topic-button.selected { border-color: #a8bbf5; background: #eaf0ff; color: #345bcd; font-weight: 650; }
.topic-button span { color: #8998b4; font-size: 10px; margin-left: 5px; }
.phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.phase-card, .phase-card.stage-after { position: relative; display: block; min-height: 278px; padding: 23px 23px 52px; border: 1px solid #dfe6ef; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 3px 10px #24344f03; }
.phase-card::before, .phase-card::after { display: none; }
.phase-card:hover { transform: translateY(-3px); border-color: #b9caf5; box-shadow: 0 12px 24px #304e8c0c; }
.stage-before, .stage-during, .stage-after, .stage-plates { border-left: 1px solid #dfe6ef; }
.stage-kicker { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 62px; color: #7b87a0; font-size: 8px; font-weight: 650; letter-spacing: .65px; opacity: 1; }
.stage-kicker > span { padding: 4px 6px; border: 1px solid #e0e7f3; border-radius: 6px; color: #6f83a7; background: #f5f8ff; font-size: 7px; letter-spacing: .35px; }
.phase-copy { width: 100%; gap: 8px; }
.phase-title, .phase-card.stage-after .phase-title { max-width: none; color: #23314a; font-size: 21px; line-height: 1.23; font-weight: 700; letter-spacing: -.6px; }
.phase-caption, .stage-after .phase-caption { max-width: none; color: #7b879d; font-size: 12px; line-height: 1.55; }
.stage-art { width: 73px; height: 70px; right: 18px; top: 42px; color: #4169d1; opacity: .6; filter: none; transform: rotate(-5deg); }
.stage-during .stage-art { color: #7761bf; }
.stage-after .stage-art { color: #15958d; opacity: .6; }
.stage-after .phase-title { color: #23314a; }
.stage-after .stage-kicker, .stage-after .stage-bottom { color: #7b87a0; }
.stage-after .stage-kicker > span { border-color: #d5e9e4; background: #eff9f5; color: #508b7d; }
.stage-cta, .stage-before .stage-cta, .stage-during .stage-cta, .stage-after .stage-cta, .stage-plates .stage-cta { display: inline-flex; width: fit-content; margin-top: 6px; padding: 7px 0; background: transparent; border-radius: 0; color: #4168d4; font-size: 12px; font-weight: 650; }
.stage-cta::after { content: '→'; margin-left: 8px; }
.stage-bottom { position: absolute; left: 23px; right: 23px; bottom: 16px; padding-top: 12px; border-top: 1px solid #eef1f7; color: #8a94a7; font-size: 9px; }

/* Shared controls and content. */
.button { min-height: 46px; padding: 12px 17px; border: 1px solid #dce4f1; border-radius: 12px; background: #fff; color: #4669c9; font-size: 13px; line-height: 1.4; font-weight: 600; box-shadow: none; transition: background .15s, border-color .15s; }
.button:hover { background: #f1f5ff; border-color: #adbef0; }
.button.primary, .appeal-screen .button.primary, .member-button { border: 1px solid #3764ed; background: #3764ed; color: #fff; box-shadow: 0 4px 10px #3863dc18; font-weight: 650; }
.button.primary:hover, .appeal-screen .button.primary:hover, .member-button:hover { border-color: #2c52ca; background: #2c52ca; }
.button.full { width: 100%; }
.button-row { gap: 10px; margin-top: 22px; }
.quiet-button, .back-button { color: #4d6bb5; font-size: 13px; font-weight: 550; }
.quiet-button:hover, .back-button:hover { color: #244dc7; }
.quiet-button.full { margin-top: 14px; }
.back-button { display: inline-flex; align-items: center; padding-bottom: 20px; }
.section-foot { margin-top: 26px; color: #7b879b; font-size: 12px; }
.surface, .doc-card, .support-card, .home-help { margin: 22px 0; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 3px 10px #24344f03; }
.surface p, .doc-card p, .support-card p, .surface ul, .surface ol, .support-card ul { color: #68758c; font-size: 14px; line-height: 1.7; }
.surface li, .support-card li { color: #68758c; }
.surface > :last-child, .doc-card > :last-child { margin-bottom: 0; }
summary { color: #354460; font-weight: 650; }
.note, .warning, .demo-note { margin: 20px 0; padding: 17px 20px; border: 1px solid #dce6f6; border-radius: 14px; background: #eff5ff; color: #5e749b; font-size: 12px; line-height: 1.65; }
.warning { background: #fff8ec; border-color: #eee0c6; color: #967143; }
.warning strong { color: #775d35; }
.demo-note { border-color: #e3e7f0; background: #f5f7fb; color: #7d889d; }
.tag { padding: 5px 8px; border: 1px solid #dce5f8; border-radius: 6px; background: #eef3ff; color: #6780b2; font-size: 9px; font-weight: 650; letter-spacing: .6px; }
.appeal-screen .eyebrow, .appeal-screen .file-type { color: #7085b4; }
.appeal-screen .tag { border-color: #dce5f8; background: #eef3ff; color: #6780b2; }
.file-type, .access-index { color: #7085b4; font-size: 10px; }
.error-text { color: #c45263; font-size: 12px; }
.empty { padding: 40px 26px; border: 1px dashed #ccd6e8; border-radius: 18px; background: #fff; color: #78859c; }
.resume-card { display: flex; align-items: center; gap: 16px; padding: 20px 23px; border: 1px solid #dbe5f7; border-radius: 18px; background: #f0f5ff; box-shadow: none; }
.resume-card strong { color: #526994; font-weight: 650; }
.resume-card .eyebrow { color: #7b8db0; }
.support-price { color: #3b60c9; font-size: 52px; }
.support-price span { color: #9ba8bf; font-size: 28px; }

/* Forms, progress and document journey. */
.step-header { gap: 14px; margin-bottom: 17px; }
.step-header .back-button { padding-bottom: 4px; }
.step-label { color: #8b97ac; font-size: 10px; letter-spacing: .8px; }
.percent, .appeal-screen .percent { color: #4769c9; font-size: 15px; font-weight: 700; }
.progress-track { height: 6px; margin: 13px 0 32px; background: #e3e9f4; border-radius: 999px; }
.progress-fill, .appeal-screen .progress-fill { background: linear-gradient(90deg, #6485f2, #3b67df); }
.step-segments { gap: 7px; margin: -17px 0 27px; }
.step-segments span { height: 4px; border-radius: 6px; background: #e3e9f4; }
.step-segments .done { background: #90b9b0; }
.step-segments .current { background: #5b7bec; box-shadow: none; }
.form-grid { gap: 18px 20px; margin: 23px 0; padding: 0; }
.field { gap: 8px; color: #64728c; font-size: 12px; font-weight: 550; }
.field input, .field textarea, .access-card input, #access-code { width: 100%; min-height: 48px; padding: 13px 15px; border: 1px solid #d6deec; border-radius: 12px; background: #fff; color: #263650; font-size: 15px; font-weight: 450; box-shadow: 0 1px 2px #1b2c4503; }
.field input::placeholder, .field textarea::placeholder, #access-code::placeholder { color: #a2aec1; }
.field input:focus, .field textarea:focus, .access-card input:focus, #access-code:focus { outline: none; border-color: #7e9bee; background: #fff; box-shadow: 0 0 0 4px #3764ed12; }
.field input[aria-invalid=true] { border-color: #d89ba6; background: #fffafa; }
.field small { font-size: 11px; font-weight: 450; color: #93a0b5; }
.check-row, .appeal-screen .check-row { color: #64738c; font-size: 13px; line-height: 1.6; gap: 11px; padding: 15px 0; }
.check-row input, .appeal-screen .check-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: #3e6bea; }
.wizard-actions { margin-top: 28px; }
.wizard-actions .muted { color: #91a0b6; font-size: 11px; }
.upload { min-height: 244px; padding: 30px 24px; border: 1px dashed #b7c9ec; border-radius: 20px; background: linear-gradient(125deg, #f9fbff, #f0f5ff); }
.upload h3 { color: #425c90; font-size: 22px; }
.upload p { color: #889bbd; font-size: 13px; }
.upload .file-type { border: 1px solid #d6e0f5; padding: 5px 9px; background: #fff; color: #7b8faf; }
.photo-list { margin: 18px 0; gap: 9px; color: #428a7d; font-size: 12px; }
.upload-choices { gap: 13px; margin: 25px 0; }
.upload-choice { padding: 24px; grid-template-columns: 44px 1fr 18px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 3px 10px #24344f03; }
.upload-choice:hover { border-color: #b5c8f3; background: #f9fbff; }
.upload-choice-icon { display: grid; place-items: center; width: 42px; height: 42px; background: #edf3ff; border-radius: 13px; font-size: 23px; color: #6889d3; }
.upload-choice strong { color: #344b72; font-size: 16px; font-weight: 650; }
.upload-choice small { color: #9aa5b6; font-size: 11px; }
.upload-choice > span:last-child { color: #91a4c5; }
.case-summary { padding: 25px; border: 1px solid #dce6f7; border-radius: 22px; background: linear-gradient(125deg, #f5f8ff, #edf3ff); }
.case-summary h3 { color: #5571a3; font-size: 17px; }
.case-percent { color: #466ccf; font-size: 48px; font-weight: 650; letter-spacing: -1.5px; }
.case-percent small { color: #90a0bb; font-size: 11px; letter-spacing: 0; }
.case-step-list { gap: 10px; }
.case-step, .appeal-screen .case-step { padding: 19px 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 2px 7px #24344f02; }
.case-step:hover { border-color: #b5c8f3; background: #fafcff; }
.case-step-number { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px; border-radius: 10px; background: #eef3ff; color: #6a89c6; font-size: 12px; }
.case-step strong { color: #405575; font-size: 14px; font-weight: 650; }
.case-step small { color: #9aa7bb; font-size: 10px; }
.case-step-arrow { color: #acb9ce; }
.details-grid { grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.details-grid > div { padding: 19px 22px; gap: 7px; border-color: #e8edf5; }
.details-grid span { color: #8a99b1; font-size: 10px; }
.details-grid strong { color: #536883; font-size: 13px; font-weight: 600; }
.doc-preview { padding: 38px; border: 1px solid #e0e5ee; border-radius: 20px; background: #fff; color: #39475d; font-family: Georgia, "Times New Roman", serif; line-height: 1.8; box-shadow: 0 6px 20px #34465d07; }
.doc-preview hr { border: 0; border-top: 1px solid #e5eaf1; }

/* Reading and news. */
.checklist { gap: 13px; }
.checklist li { gap: 17px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 2px 8px #24344f02; }
.checklist strong { color: #40516f; font-weight: 650; }
.checklist p { color: #7c899e; font-size: 13px; line-height: 1.7; }
.count { width: 29px; height: 29px; border: 1px solid #d8e3f7; background: #eff4ff; color: #6180b8; font-size: 11px; font-weight: 600; }
.quote { margin-top: 16px; padding: 16px; border: 1px solid #e0e8f5; border-left: 3px solid #7390dc; border-radius: 11px; background: #f5f8ff; color: #52688f; font-size: 17px; }
.city-row { gap: 8px; margin: 8px 0 25px; padding-bottom: 2px; }
.city-chip { min-height: 40px; padding: 9px 14px; border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; color: #7a879d; font-size: 12px; font-weight: 550; }
.city-chip.is-on { border-color: #a7bcf8; background: #eaf0ff; color: #4b6fd5; font-weight: 650; }
.news-list { display: grid; gap: 16px; margin: 23px 0; }
.news-card { display: grid; gap: 11px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 3px 10px #24344f03; }
.news-card:hover { background: #fff; border-color: #b7caec; }
.news-type { color: #7e96ba; font-size: 9px; font-weight: 650; letter-spacing: .8px; }
.news-card strong { font-size: 19px; color: #415778; font-weight: 680; letter-spacing: -.3px; }
.news-card p { margin: 0; color: #7d8aa0; font-size: 13px; line-height: 1.75; }
.news-link { color: #6484c4; font-size: 12px; font-weight: 650; }
.news-note { margin: 18px 0; color: #91a0b6; font-size: 12px; line-height: 1.65; }
.plates-guide { margin-top: 26px; }
.plates-guide > .ks-eyebrow { margin-bottom: 10px; color: #8493aa; font-size: 10px; font-weight: 650; letter-spacing: 1px; }
.plates-guide > h2 { margin-bottom: 21px; font-size: 34px; color: #3d526f; font-weight: 700; letter-spacing: -1px; }
.plates-guide > .ks-capture-tip { padding: 23px; border: 1px solid #eadfc8; border-radius: 18px; background: #fff9ef; color: #9a835c; font-size: 13px; }
.plates-guide > .ks-capture-tip > strong { color: #866b42; font-weight: 650; }
.plates-guide > .ks-space { font-size: 18px; color: #586d8c; margin: 29px 0 18px; font-weight: 650; }
.plates-guide .ks-reading-card { margin: 14px 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; }
.plates-guide .ks-reading-card summary { padding: 23px; gap: 16px; color: #4f6382; font-size: 17px; }
.plates-guide .ks-reading-card summary strong { font-weight: 650; }
.plates-guide .ks-reading-card summary small { color: #94a1b6; font-size: 10px; }
.plates-guide .ks-reading-card summary::after { color: #859bbb; }
.plates-guide .ks-scenario-index { width: 39px; height: 39px; border: 1px solid #dce5f6; border-radius: 12px; background: #eff4ff; color: #7190c6; font-size: 13px; }
.plates-guide .ks-reading-content { padding: 2px 23px 24px; border-top: 1px solid #eef1f6; color: #7c8ca3; font-size: 13px; line-height: 1.8; }
.plates-guide .ks-reading-content strong { color: #566e8c; font-weight: 650; }
.plates-guide .ks-reading-content em { color: #748da9; }
.plates-guide .ks-document-chain { padding: 16px; border: 1px solid #dbe5f4; border-radius: 12px; background: #f5f8ff; color: #6a85ad; font-size: 12px; }

/* Access and maps. */
.access-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 26px; align-items: start; margin-top: 26px; }
.access-summary { padding: 28px; border: 1px solid #dce6f8; border-radius: 24px; background: radial-gradient(ellipse at 100% 0, #dce8ff, transparent 75%), #f0f5ff; }
.access-summary h2 { font-size: 28px; color: #405b90; }
.access-summary p { color: #7c90b1; font-size: 14px; line-height: 1.7; }
.access-card { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 8px 28px #304a7e06; }
.access-card h2 { margin-bottom: 12px; font-size: 22px; color: #485e7d; }
.access-card p { color: #91a0b6; font-size: 13px; line-height: 1.65; }
.access-card .field { margin-top: 21px; }
.access-card .button { margin-top: 14px; }
.access-card .quiet-button { font-size: 12px; }
.access-price { margin: 24px 0 15px; font-size: 36px; color: #4a6ab9; font-weight: 750; letter-spacing: -1px; }
.access-price small { display: inline; margin-left: 8px; color: #95a5bd; font-size: 12px; font-weight: 450; letter-spacing: 0; }
.access-features { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.access-features li, .feature-item { display: flex; align-items: flex-start; gap: 10px; color: #748aab; font-size: 13px; }
.access-features li::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: #e1f3ed; color: #479482; font-size: 11px; font-weight: 700; }
.feature-item > span { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border: 1px solid #d4e1f6; border-radius: 10px; background: #fff8; color: #6082be; font-size: 10px; font-weight: 650; }
.feature-item strong { color: #4d6b96; font-size: 13px; }
.feature-item p { margin: 3px 0 0; font-size: 12px; }
.access-summary > .service-pill { margin-bottom: 20px; }
.access-card > .tile-icon { margin-bottom: 19px; }
.access-divider { display: flex; align-items: center; gap: 12px; margin: 23px 0 17px; color: #8997b0; font-size: 11px; }
.access-divider::before, .access-divider::after { content: ''; flex: 1; height: 1px; background: #e6ebf5; }
.preview-code { display: grid; gap: 6px; margin-top: 23px; padding: 17px; border: 1px dashed #cad9f5; border-radius: 14px; background: #f6f9ff; color: #6f89b2; font-size: 12px; }
.preview-code strong { font-size: 11px; color: #7590b6; }
.preview-code b { margin-left: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #526fa8; }
.preview-code small { font-size: 10px; }
.access-heading { padding-top: 6px; }
.access-heading h1 { max-width: 660px; color: #405674; font-size: 36px; }
.access-heading .eyebrow { font-size: 10px; margin-bottom: 12px; color: #8697af; }
.access-heading .lead { color: #8394af; font-size: 15px; margin-bottom: 26px; }
.access-lock { position: static; width: 50px; height: 50px; margin-bottom: 18px; border: 1px solid #dce6f7; border-radius: 15px; background: #eff4ff; color: #7495cc; }
.access-status { padding: 13px 16px; margin: 0 0 23px; border: 1px solid #dce8e3; border-radius: 12px; background: #f0f8f4; color: #6e9a88; font-size: 12px; }
.access-status .quiet-button { color: #8caa9d; font-size: 11px; }
.member-offer { margin: 24px 0; padding: 24px; border: 1px solid #dce6f7; border-radius: 20px; background: #f2f6ff; color: #5b74a0; }
.member-offer h2 { color: #5975a5; font-size: 21px; margin: 11px 0; }
.member-offer p { color: #91a3c0; font-size: 13px; }
.offer-kicker { color: #869fc4; font-size: 9px; letter-spacing: .8px; }
.demo-open small { color: #a2aec0; font-size: 11px; }
.map-dashboard { border-radius: 24px; overflow: hidden; margin: 0 0 28px; }
.map-title-row h1, .home-map h1 { color: var(--ink); }
.free-label { border: 1px solid #d8e7df; border-radius: 999px; background: #edf8f3; color: #618d79; font-size: 9px; font-weight: 650; letter-spacing: .5px; }
.peek-map, .map-container { border: 1px solid var(--line); border-radius: 20px; background: #f3f6fb; box-shadow: none; }
.map-caption { color: #8192ac; }
.map-under { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.map-under .button { border-radius: 12px; font-size: 13px; }
.map-close { border: 1px solid #d8e2f2; border-radius: 11px; background: #fff; color: #6282be; }
.products-title { color: #526b8c; font-size: 23px; }
.products-note { color: #94a3b9; font-size: 13px; }
.product-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: #647d9f; box-shadow: none; }
.product-copy strong { color: #526f94; font-size: 15px; }
.product-copy small { color: #9baabd; font-size: 11px; }
.product-lock { color: #a1b3cc; }
.detour-map { border: 1px solid var(--line); border-radius: 20px; }
.detour-meta span { border: 1px solid #dce6f7; border-radius: 999px; background: #fff; color: #8a9fbd; font-size: 12px; }
.route-form { border-radius: 20px; background: #fff; }
.route-form .eyebrow { color: #8099c0; }
.route-form .map-caption { color: #9aaac1; }
.city-selector { display: grid; gap: 7px; color: #667b9b; font-size: 11px; font-weight: 600; }
.city-selector select, select.city-selector { display: block; min-height: 43px; min-width: 170px; padding: 10px 13px; border: 1px solid #d8e2f1; border-radius: 11px; background: #fff; color: #526e97; font-size: 13px; }
.city-selector select:focus { outline: 3px solid #3764ed15; border-color: #8ba6ef; }
.source-status { display: flex; align-items: flex-start; gap: 9px; padding: 15px 17px; border: 1px solid #dae6f5; border-radius: 14px; background: #f2f7ff; color: #647d9e; font-size: 12px; line-height: 1.65; }
.source-status::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; margin-top: 6px; border-radius: 50%; background: #92aacb; }
.source-status.is-unavailable, .source-status.unavailable, .source-status[data-state="unavailable"] { background: #fff9ef; border-color: #eee1ca; color: #927c56; }
.source-status.is-unavailable::before, .source-status.unavailable::before, .source-status[data-state="unavailable"]::before { background: #c1a470; }
.source-status.is-error, .source-status[data-state="error"] { background: #fff4f5; border-color: #eed7dc; color: #b97888; }
.source-status.is-ready, .source-status[data-state="ready"] { background: #eff8f4; border-color: #d6e8df; color: #639784; }
.source-status.is-ready::before, .source-status[data-state="ready"]::before { background: #61a28e; }
.kd-map-workspace { --kd-blue: #3764ed; --kd-text: #22314b; --kd-muted: #73839b; --kd-border: #e0e6ef; }
.kd-source-status div > span, .kd-route-toggle small, .kd-route-help,
.kd-route-result p, .kd-route-field-main > span:first-child { color: #697a92; }
.kd-map-styles button.is-selected { background: #eaf0ff; }
.kd-route-icon { background: #edf2ff; }
#toast { z-index: 70; bottom: 26px; padding: 13px 19px; border: 1px solid #d7e2f7; border-radius: 14px; background: #fff; color: #536e9d; box-shadow: 0 10px 40px #233d7120; font-size: 12px; }
html body .mobile-nav { display: none !important; }

@media (max-width: 1120px) and (min-width: 901px) {
  .workspace { grid-template-columns: 194px minmax(0, 1fr); }
  main { padding: 32px 28px 60px; }
  .topbar { padding: 0 28px; }
  .sidebar { padding-right: 13px; padding-left: 13px; }
  .service-grid { gap: 12px; }
  .service-tile { padding: 20px; min-height: 210px; }
  .service-tile strong { font-size: 16px; }
  .phase-grid { grid-template-columns: 1fr; gap: 13px; }
  .phase-card, .phase-card.stage-after { min-height: 208px; }
  .stage-kicker { margin-bottom: 21px; }
  .stage-art { top: 52px; width: 120px; height: 115px; opacity: .25; }
  .phase-copy { width: 75%; }
  .access-layout { gap: 18px; grid-template-columns: 1fr 1fr; }
  .access-card, .access-summary { padding: 23px; }
}
@media (max-width: 900px) {
  .shell { max-width: none; }
  .topbar { height: 74px; padding: 0 24px; }
  .workspace { display: block; min-height: calc(100vh - 74px); }
  .sidebar { display: none; }
  main { max-width: 820px; margin: 0 auto; padding: 30px 25px 116px; }
  html body .mobile-nav { display: flex !important; position: fixed !important; left: 50% !important; right: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: calc(100% - 32px) !important; max-width: 740px !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 8px !important; gap: 5px !important; border: 1px solid #dae3f3; border-radius: 20px; background: #ffffffed; backdrop-filter: blur(20px); box-shadow: 0 10px 32px #2f477923; z-index: 40; }
  html body .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 1 1 25%; min-width: 0; min-height: 52px; padding: 6px 2px !important; border-radius: 13px; color: #8e9cb3; font-size: 10px !important; font-weight: 550; white-space: nowrap; }
  html body .mobile-nav button > span { display: grid; place-items: center; color: #8b9bb6; font-size: 20px !important; line-height: 1; height: 22px; }
  html body .mobile-nav button svg { width: 21px; height: 21px; }
  html body .mobile-nav button.active, html body .mobile-nav button.nav-appeal.active { background: #edf2ff; color: #6280ca; font-weight: 650; }
  html body .mobile-nav button.active > span, html body .mobile-nav button.nav-appeal.active > span { color: #6985cc; }
  #toast { bottom: calc(95px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .topbar { height: 68px; padding: 0 18px; gap: 10px; }
  .brand { gap: 9px; }
  .brand-mark { width: 37px; height: 37px; flex-basis: 37px; border-radius: 12px; font-size: 13px; }
  .brand-name, .brand-copy { font-size: 22px; letter-spacing: -.8px; }
  .brand-name { font-size: 24px; font-weight: 800; letter-spacing: -.9px; }
  .brand-drive { font-size: 19px; margin-left: 4px; }
  .topbar-actions { gap: 8px; }
  .access-badge { padding: 9px 10px; min-height: 36px; border-radius: 10px; gap: 6px; font-size: 10px; white-space: nowrap; }
  .test-label { display: none; }
  .help-compact { display: none; }
  main { padding: 27px 18px 116px; }
  h1, .home-heading h1 { font-size: 30px; letter-spacing: -.95px; margin-bottom: 11px; }
  h2 { font-size: 23px; }
  h3 { font-size: 18px; }
  .page-heading { margin-bottom: 22px; }
  .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .lead, .home-heading .lead { font-size: 13px; line-height: 1.65; margin-bottom: 23px; }
  .service-intro { align-items: flex-start; gap: 13px; margin-bottom: 22px; padding: 21px; border-radius: 20px; flex-wrap: wrap; }
  .service-icon { width: 43px; height: 43px; flex-basis: 43px; border-radius: 13px; font-size: 23px; }
  .service-intro h2 { font-size: 18px; margin-bottom: 6px; }
  .service-intro p { font-size: 12px; line-height: 1.6; }
  .service-pill { margin-left: 56px; padding: 5px 8px; font-size: 8px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-tile { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 2px 15px; min-height: 134px; padding: 21px; border-radius: 19px; }
  .tile-icon { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 13px; }
  .service-tile strong, .service-tile h3 { grid-column: 2; margin: 1px 15px 6px 0; font-size: 16px; }
  .service-tile p, .service-tile small { grid-column: 2; font-size: 11px; }
  .tile-copy { grid-column: 2; }
  .tile-copy strong { margin: 1px 16px 3px 0; }
  .tile-copy > span { font-size: 11px; }
  .tile-meta { grid-column: 2; padding-top: 11px; font-size: 9px; }
  .tile-arrow { right: 18px; top: 23px; font-size: 16px; }
  .topic-row { margin: 22px 0; gap: 7px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .topic-button { padding: 10px 12px; font-size: 11px; min-height: 39px; border-radius: 10px; }
  .topic-button span { display: none; }
  .phase-grid { grid-template-columns: 1fr; gap: 13px; }
  .phase-card, .phase-card.stage-after { min-height: 207px; padding: 21px 22px 49px; border-radius: 20px; }
  .stage-kicker { margin-bottom: 24px; font-size: 8px; }
  .phase-copy { width: 77%; gap: 6px; }
  .phase-title, .phase-card.stage-after .phase-title { font-size: 22px; line-height: 1.2; }
  .phase-caption { font-size: 11px; }
  .stage-art { width: 101px; height: 95px; right: 10px; top: 45px; opacity: .3; }
  .stage-bottom { left: 22px; right: 22px; bottom: 14px; font-size: 8px; }
  .stage-cta { font-size: 11px; margin-top: 4px; }
  .surface, .doc-card, .support-card, .home-help { margin: 19px 0; padding: 21px; border-radius: 18px; }
  .surface p, .doc-card p, .surface ul, .surface ol, .support-card p { font-size: 13px; }
  .button { min-height: 44px; padding: 12px 15px; border-radius: 11px; font-size: 12px; }
  .button-row { gap: 9px; margin-top: 18px; }
  .quiet-button, .back-button { font-size: 12px; }
  .section-foot { display: grid; gap: 9px; }
  .form-grid { grid-template-columns: 1fr; gap: 17px; margin: 22px 0; }
  .wide { grid-column: auto; }
  .field input, .field textarea, .access-card input, #access-code { min-height: 47px; font-size: 16px; }
  .note, .warning, .demo-note { padding: 15px 17px; font-size: 11px; border-radius: 13px; }
  .check-row { font-size: 12px; }
  .upload { min-height: 240px; padding: 25px 18px; border-radius: 18px; }
  .upload h3 { font-size: 20px; }
  .upload-choice { padding: 21px 18px; grid-template-columns: 38px 1fr 16px; gap: 3px 12px; border-radius: 18px; }
  .upload-choice-icon { width: 37px; height: 37px; border-radius: 11px; font-size: 20px; }
  .upload-choice strong { font-size: 14px; }
  .case-summary { padding: 22px; }
  .case-step, .appeal-screen .case-step { padding: 18px; gap: 13px; border-radius: 16px; }
  .case-step strong { font-size: 13px; }
  .case-step small { font-size: 9px; }
  .details-grid { grid-template-columns: 1fr; border-radius: 16px; }
  .details-grid > div { padding: 17px 20px; }
  .doc-preview { padding: 25px 21px; border-radius: 18px; font-size: 14px; }
  .two-columns { grid-template-columns: 1fr; }
  .checklist li { gap: 13px; padding: 20px 17px; border-radius: 17px; }
  .checklist strong { font-size: 14px; }
  .checklist p { font-size: 12px; }
  .count { width: 26px; height: 26px; font-size: 10px; }
  .quote { flex-wrap: wrap; gap: 8px; padding: 13px; font-size: 16px; }
  .city-row { margin-bottom: 22px; }
  .city-chip { min-height: 37px; padding: 8px 12px; font-size: 11px; }
  .news-card { padding: 22px; border-radius: 19px; }
  .news-card strong { font-size: 17px; }
  .news-card p { font-size: 12px; }
  .plates-guide > h2 { font-size: 29px; }
  .plates-guide > .ks-capture-tip { padding: 20px; font-size: 12px; }
  .plates-guide > .ks-space { font-size: 16px; }
  .plates-guide .ks-reading-card summary { padding: 21px 18px; gap: 13px; font-size: 15px; }
  .plates-guide .ks-scenario-index { width: 35px; height: 35px; }
  .plates-guide .ks-reading-content { padding: 2px 18px 23px; font-size: 12px; }
  .access-layout { grid-template-columns: 1fr; gap: 17px; margin-top: 23px; }
  .access-summary, .access-card { padding: 24px; border-radius: 21px; }
  .access-summary h2 { font-size: 25px; }
  .access-summary p, .access-card p { font-size: 12px; }
  .access-heading h1 { max-width: 100%; font-size: 30px; }
  .access-heading .lead { font-size: 13px; }
  .access-price { font-size: 32px; }
  .access-features li { font-size: 12px; }
  .member-offer { padding: 21px; border-radius: 18px; }
  .member-offer h2 { font-size: 20px; }
  .map-dashboard { margin-bottom: 24px; border-radius: 20px; }
  .map-page-heading > .service-pill { margin-top: 0; margin-left: 0; font-size: 9px; padding: 6px 9px; }
  .map-page-heading .lead { max-width: 265px; margin-bottom: 0; }
  .section-title h2 { font-size: 20px; }
  .section-title .quiet-button { font-size: 11px; }
  .access-summary > .service-pill { margin-left: 0; font-size: 9px; }
  .map-container, .peek-map { border-radius: 18px; }
  .resume-card { padding: 18px; gap: 12px; }
  .resume-card .button { min-height: 39px; padding: 9px 11px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
/* Keep explanatory text readable on the light surfaces. */
.access-card p, .access-summary p, .member-offer p, .feature-item, .feature-item p,
.news-card p, .news-note, .checklist p, .surface p, .surface ul, .surface ol,
.service-tile p, .service-tile small, .tile-copy > span, .phase-caption,
.stage-after .phase-caption, .field small, .preview-code small, .plates-guide .ks-reading-content {
  color: #66758d;
}

/* Primary appeal action: a clear red accent within the light services layout. */
.phase-card.stage-after .phase-caption { color: #637087; }
.phase-card.stage-after .stage-bottom, .phase-card.stage-after .stage-kicker { color: #7b87a0; }
.phase-card.stage-after .stage-kicker > span { border-color: #d5e9e4; color: #508b7d; }
.phase-card.stage-after { min-height: 278px; }
@media (max-width: 960px) { .phase-card.stage-after { min-height: 238px; } }
.phase-card.stage-after .stage-cta { display: inline-flex; align-items: center; gap: 18px; min-height: 42px; margin-top: 18px; padding: 11px 18px; border-radius: 11px; background: #df2541; color: #fff; box-shadow: 0 4px 10px #df254119; }
.phase-card.stage-after:hover .stage-cta { background: #c91c36; }
.phase-card.stage-after .stage-cta::after { color: #fff; }
.button[data-phase="after"] { border-color: #df2541; background: #df2541; color: #fff; }
.button[data-phase="after"]:hover { border-color: #c91c36; background: #c91c36; }

/* Theme control and the phone-first, three-section navigation. */
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid #dce4f2; border-radius: 13px; background: #f7f9fe; color: #687c9c; cursor: pointer; }
.theme-toggle:hover { border-color: #a4b7f5; background: #edf2ff; color: #3e61bb; }
.theme-toggle svg { width: 24px; height: 24px; }
html { scroll-padding-bottom: calc(105px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  html body .mobile-nav { left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; transform: none !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; gap: 6px !important; border: 0; border-top: 1px solid #dbe3f2; border-radius: 20px 20px 0 0; background: #ffffffed; box-shadow: 0 -5px 25px #243e7610; }
  html body .mobile-nav button { flex: 1 1 0; width: 0; min-width: 0; min-height: 48px; gap: 4px; padding: 6px 2px !important; font-size: 11px !important; }
  html body .mobile-nav button > span { height: 22px; }
}
@media (max-width: 420px) {
  .topbar { gap: 8px; padding: 0 16px; }
  .topbar-actions { gap: 7px; min-width: 0; }
  .access-badge { min-height: 44px; padding: 9px 10px; font-size: 10px; }
  .access-badge svg { width: 16px; height: 16px; }
  .theme-toggle { border-radius: 12px; }
  main { padding-right: 16px; padding-left: 16px; }
  .step-header { gap: 8px; }
  .step-header .quiet-button { font-size: 11px; }
  .form-grid { min-width: 0; }
  .field { min-width: 0; }
  .field input, .field textarea { min-width: 0; }
  .button-row .button { max-width: 100%; overflow-wrap: anywhere; }
  .news-card, .surface, .access-card, .access-summary { min-width: 0; }
  .kd-map-styles button { min-height: 40px; padding: 9px 10px; }
  .kd-city-control select { min-height: 44px; font-size: 17px; }
  .kd-map-tools button { width: 40px; height: 40px; }
  .kd-source-status { max-width: calc(100% - 77px); }
  .kd-route-primary, .kd-route-secondary { min-height: 44px; }
  .kd-route-fit { min-height: 38px; }
  .kd-route-field > button { width: 32px; min-height: 40px; }
  .kd-map-tip { overflow-wrap: anywhere; }
}

/* Dark mode changes page surfaces, controls and map panels together. */
html[data-theme="dark"] {
  color-scheme: dark;
  color: #eff4fc;
  background: #111827;
  --accent: #94b2ff;
  --blue: #a0bcff;
  --ink: #eff4fc;
  --text: #eff4fc;
  --muted: #a9b7ce;
  --line: #334158;
  --panel: #1b273b;
  --page: #111827;
  --teal: #7acfc0;
}
html[data-theme="dark"] body, html[data-theme="dark"] .shell { background: #111827; color: #eff4fc; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] .brand-name, html[data-theme="dark"] .brand-copy { color: #f0f4fc; }
html[data-theme="dark"] .topbar { border-color: #303d52; background: #141e2fed; }
html[data-theme="dark"] .brand-mark { box-shadow: 0 5px 14px #0004; }
html[data-theme="dark"] .sidebar { border-color: #303d52; background: #142034; }
html[data-theme="dark"] .side-caption { color: #a4b2ca; }
html[data-theme="dark"] .side-bottom { color: #a6b5cf; }
html[data-theme="dark"] .side-bottom strong { color: #d4dff1; }
html[data-theme="dark"] .nav-button { color: #b0bdd4; }
html[data-theme="dark"] .nav-button > span { color: #a9bad7; }
html[data-theme="dark"] .nav-button:hover { background: #202f48; color: #f0f4fc; }
html[data-theme="dark"] .nav-button.active { background: #273b5e; color: #b6cbff; }
html[data-theme="dark"] .nav-button.active > span { color: #b6cbff; }
html[data-theme="dark"] .access-badge, html[data-theme="dark"] .theme-toggle { border-color: #394b68; background: #202e45; color: #c3d0e8; }
html[data-theme="dark"] .access-badge:hover, html[data-theme="dark"] .theme-toggle:hover { border-color: #617eae; background: #293d5c; color: #eef4ff; }
html[data-theme="dark"] .access-badge::before { background: #96a8c6; }
html[data-theme="dark"] .access-badge.is-active::before { background: #7edbc2; }
html[data-theme="dark"] .test-label { border-color: #394960; background: #1c293e; color: #b3c1d9; }
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .page-heading .eyebrow,
html[data-theme="dark"] .file-type, html[data-theme="dark"] .access-index,
html[data-theme="dark"] .appeal-screen .eyebrow, html[data-theme="dark"] .appeal-screen .file-type { color: #a5b9d9; }
html[data-theme="dark"] .lead, html[data-theme="dark"] .home-heading .lead,
html[data-theme="dark"] .muted, html[data-theme="dark"] small { color: #b0bdd3; }
html[data-theme="dark"] .service-pill, html[data-theme="dark"] .version-pill,
html[data-theme="dark"] .status-pill { border-color: #455b7b; background: #273a56; color: #bdd1f0; }
html[data-theme="dark"] .service-intro { border-color: #3a5072; background: radial-gradient(ellipse at 100% 0, #36598a66, transparent 65%), #21324c; }
html[data-theme="dark"] .service-intro h2 { color: #e4edfb; }
html[data-theme="dark"] .service-intro p { color: #b4c5df; }
html[data-theme="dark"] .service-icon { background: #30466a; color: #b4cdff; box-shadow: none; }
html[data-theme="dark"] .service-tile, html[data-theme="dark"] .phase-card,
html[data-theme="dark"] .phase-card.stage-after, html[data-theme="dark"] .surface,
html[data-theme="dark"] .doc-card, html[data-theme="dark"] .support-card,
html[data-theme="dark"] .home-help, html[data-theme="dark"] .news-card,
html[data-theme="dark"] .checklist li, html[data-theme="dark"] .case-step,
html[data-theme="dark"] .appeal-screen .case-step, html[data-theme="dark"] .upload-choice,
html[data-theme="dark"] .product-card, html[data-theme="dark"] .empty,
html[data-theme="dark"] .access-card { border-color: #33445e; background: #1b273b; color: #eff4fc; box-shadow: 0 3px 14px #0000000d; }
html[data-theme="dark"] .service-tile:hover, html[data-theme="dark"] .phase-card:hover,
html[data-theme="dark"] .news-card:hover, html[data-theme="dark"] .case-step:hover,
html[data-theme="dark"] .upload-choice:hover { border-color: #5b76a3; background: #202f47; }
html[data-theme="dark"] .service-tile strong, html[data-theme="dark"] .service-tile h3,
html[data-theme="dark"] .phase-title, html[data-theme="dark"] .stage-after .phase-title,
html[data-theme="dark"] .phase-card.stage-after .phase-title,
html[data-theme="dark"] .news-card strong, html[data-theme="dark"] .checklist strong,
html[data-theme="dark"] .case-step strong, html[data-theme="dark"] .upload-choice strong,
html[data-theme="dark"] .product-copy strong, html[data-theme="dark"] .products-title { color: #e9effa; }
html[data-theme="dark"] .tile-icon, html[data-theme="dark"] .tile-icon.blue,
html[data-theme="dark"] .upload-choice-icon, html[data-theme="dark"] .case-step-number { background: #2c3f61; color: #a8c3ff; }
html[data-theme="dark"] .tile-icon.teal, html[data-theme="dark"] .tile-icon.mint { background: #254844; color: #8bd7c7; }
html[data-theme="dark"] .tile-icon.violet, html[data-theme="dark"] .tile-icon.purple { background: #403456; color: #c5b0ef; }
html[data-theme="dark"] .tile-icon.orange, html[data-theme="dark"] .tile-icon.amber { background: #514332; color: #e0bf87; }
html[data-theme="dark"] .tile-arrow, html[data-theme="dark"] .case-step-arrow,
html[data-theme="dark"] .product-lock, html[data-theme="dark"] .product-go { color: #a5b8d6; }
html[data-theme="dark"] .topic-button, html[data-theme="dark"] .city-chip { border-color: #3b4e6d; background: #1c2a40; color: #b4c2db; }
html[data-theme="dark"] .topic-button.selected, html[data-theme="dark"] .city-chip.is-on { border-color: #5677bc; background: #2a3e64; color: #c3d5ff; }
html[data-theme="dark"] .topic-button span { color: #a2b6d9; }
html[data-theme="dark"] .stage-kicker, html[data-theme="dark"] .phase-card.stage-after .stage-kicker,
html[data-theme="dark"] .stage-bottom, html[data-theme="dark"] .phase-card.stage-after .stage-bottom { color: #a4b5cf; border-color: #33445e; }
html[data-theme="dark"] .stage-kicker > span { border-color: #3f5478; background: #253953; color: #afc5e6; }
html[data-theme="dark"] .stage-after .stage-kicker > span { border-color: #3e645d; background: #244640; color: #9ecebe; }
html[data-theme="dark"] .stage-art { color: #a3bdf6; }
html[data-theme="dark"] .stage-after .stage-art { color: #87d7c5; }
html[data-theme="dark"] .stage-during .stage-art { color: #b8a1e0; }
html[data-theme="dark"] .stage-cta, html[data-theme="dark"] .stage-before .stage-cta,
html[data-theme="dark"] .stage-during .stage-cta, html[data-theme="dark"] .stage-plates .stage-cta { color: #a9c3ff; }
html[data-theme="dark"] .phase-card.stage-after .stage-cta { background: #df2541; color: #fff; box-shadow: 0 4px 12px #0003; }
html[data-theme="dark"] .phase-card.stage-after:hover .stage-cta { background: #c91c36; }
html[data-theme="dark"] .button { border-color: #465c82; background: #233550; color: #c0d2f8; }
html[data-theme="dark"] .button:hover { border-color: #6481b1; background: #2b4263; }
html[data-theme="dark"] .button.primary, html[data-theme="dark"] .appeal-screen .button.primary,
html[data-theme="dark"] .member-button { border-color: #6785e1; background: #4169df; color: #fff; }
html[data-theme="dark"] .button.primary:hover, html[data-theme="dark"] .appeal-screen .button.primary:hover { border-color: #7397ff; background: #355ad4; }
html[data-theme="dark"] .button[data-phase="after"] { border-color: #df2541; background: #df2541; color: #fff; }
html[data-theme="dark"] .button[data-phase="after"]:hover { border-color: #c91c36; background: #c91c36; }
html[data-theme="dark"] .quiet-button, html[data-theme="dark"] .back-button,
html[data-theme="dark"] .news-link { color: #a7c0ff; }
html[data-theme="dark"] .quiet-button:hover, html[data-theme="dark"] .back-button:hover { color: #d0ddff; }
html[data-theme="dark"] .section-foot, html[data-theme="dark"] .tile-meta,
html[data-theme="dark"] .news-type, html[data-theme="dark"] .products-note,
html[data-theme="dark"] .product-copy small { color: #afbed7; }
html[data-theme="dark"] .surface p, html[data-theme="dark"] .surface ul,
html[data-theme="dark"] .surface ol, html[data-theme="dark"] .surface li,
html[data-theme="dark"] .doc-card p, html[data-theme="dark"] .support-card p,
html[data-theme="dark"] .support-card li, html[data-theme="dark"] .support-card ul,
html[data-theme="dark"] .service-tile p, html[data-theme="dark"] .service-tile small,
html[data-theme="dark"] .tile-copy > span, html[data-theme="dark"] .phase-caption,
html[data-theme="dark"] .stage-after .phase-caption,
html[data-theme="dark"] .phase-card.stage-after .phase-caption,
html[data-theme="dark"] .news-card p, html[data-theme="dark"] .news-note,
html[data-theme="dark"] .checklist p { color: #b7c4d9; }
html[data-theme="dark"] summary { color: #d3dff3; }
html[data-theme="dark"] .note { border-color: #3b567c; background: #233650; color: #bacfec; }
html[data-theme="dark"] .warning { border-color: #64553a; background: #3d3426; color: #e0c79b; }
html[data-theme="dark"] .warning strong { color: #f0d7a5; }
html[data-theme="dark"] .demo-note { border-color: #414f69; background: #263348; color: #b7c6de; }
html[data-theme="dark"] .tag, html[data-theme="dark"] .appeal-screen .tag { border-color: #4c648b; background: #2b3e5f; color: #b8ccef; }
html[data-theme="dark"] .error-text { color: #ff9fb0; }
html[data-theme="dark"] .resume-card, html[data-theme="dark"] .case-summary { border-color: #3f567b; background: linear-gradient(130deg, #263752, #223149); }
html[data-theme="dark"] .resume-card strong, html[data-theme="dark"] .case-summary h3 { color: #d0dff6; }
html[data-theme="dark"] .resume-card .eyebrow, html[data-theme="dark"] .case-percent small { color: #a9bfdc; }
html[data-theme="dark"] .case-percent { color: #b1c9ff; }
html[data-theme="dark"] .field { color: #c0cce1; }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .access-card input, html[data-theme="dark"] #access-code { border-color: #425674; background: #162236; color: #edf3fd; box-shadow: none; }
html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder,
html[data-theme="dark"] #access-code::placeholder { color: #95a8c6; }
html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .access-card input:focus, html[data-theme="dark"] #access-code:focus { border-color: #799de7; background: #1a2a42; box-shadow: 0 0 0 4px #6990ec18; }
html[data-theme="dark"] .field input[aria-invalid=true] { border-color: #c47689; background: #382532; }
html[data-theme="dark"] .field small, html[data-theme="dark"] .check-row,
html[data-theme="dark"] .appeal-screen .check-row, html[data-theme="dark"] .wizard-actions .muted { color: #b1c0d8; }
html[data-theme="dark"] .check-row input, html[data-theme="dark"] .appeal-screen .check-row input { accent-color: #87a7ff; }
html[data-theme="dark"] .step-label { color: #a7b8d3; }
html[data-theme="dark"] .percent, html[data-theme="dark"] .appeal-screen .percent { color: #abc5ff; }
html[data-theme="dark"] .progress-track, html[data-theme="dark"] .step-segments span { background: #31435f; }
html[data-theme="dark"] .progress-fill, html[data-theme="dark"] .appeal-screen .progress-fill { background: linear-gradient(90deg, #7795f7, #94b5ff); }
html[data-theme="dark"] .step-segments .done { background: #74b8a9; }
html[data-theme="dark"] .step-segments .current { background: #9ab7ff; }
html[data-theme="dark"] .upload { border-color: #5c79ab; background: linear-gradient(125deg, #233752, #1b2c46); }
html[data-theme="dark"] .upload h3 { color: #d0e0fa; }
html[data-theme="dark"] .upload p { color: #b2c6e3; }
html[data-theme="dark"] .upload .file-type { border-color: #4c668f; background: #2b4263; color: #b8ceee; }
html[data-theme="dark"] .photo-list { color: #9bd9c8; }
html[data-theme="dark"] .upload-choice small, html[data-theme="dark"] .case-step small { color: #adbed7; }
html[data-theme="dark"] .details-grid { border-color: #3d4f6c; background: #1b273b; }
html[data-theme="dark"] .details-grid > div { border-color: #33445e; }
html[data-theme="dark"] .details-grid span { color: #a8bbd9; }
html[data-theme="dark"] .details-grid strong { color: #d0ddf0; }
html[data-theme="dark"] .doc-preview { border-color: #3d4f6c; background: #1d2a40; color: #dae4f5; box-shadow: none; }
html[data-theme="dark"] .doc-preview hr { border-color: #405472; }
html[data-theme="dark"] .count { border-color: #47628c; background: #2a4064; color: #bfd4f5; }
html[data-theme="dark"] .quote { border-color: #425a81; border-left-color: #99b5f4; background: #253854; color: #d0def5; }
html[data-theme="dark"] .plates-guide > .ks-eyebrow { color: #a7bddc; }
html[data-theme="dark"] .plates-guide > h2, html[data-theme="dark"] .plates-guide > .ks-space { color: #e0eafb; }
html[data-theme="dark"] .plates-guide > .ks-capture-tip { border-color: #64573f; background: #3c352a; color: #dfcba7; }
html[data-theme="dark"] .plates-guide > .ks-capture-tip > strong { color: #edd6ae; }
html[data-theme="dark"] .plates-guide .ks-reading-card { border-color: #3a4c68; background: #1b273b; }
html[data-theme="dark"] .plates-guide .ks-reading-card summary { color: #dce6f6; }
html[data-theme="dark"] .plates-guide .ks-reading-card summary small { color: #afc0da; }
html[data-theme="dark"] .plates-guide .ks-reading-card summary::after { color: #b0c6ea; }
html[data-theme="dark"] .plates-guide .ks-scenario-index { border-color: #45628b; background: #2a4063; color: #b4cef2; }
html[data-theme="dark"] .plates-guide .ks-reading-content { border-color: #354862; color: #bfcbde; }
html[data-theme="dark"] .plates-guide .ks-reading-content strong { color: #e0eaf8; }
html[data-theme="dark"] .plates-guide .ks-reading-content em { color: #bad0ea; }
html[data-theme="dark"] .plates-guide .ks-document-chain { border-color: #4c6286; background: #253b59; color: #cadcf6; }
html[data-theme="dark"] .access-summary { border-color: #405a84; background: radial-gradient(ellipse at 100% 0, #365f9366, transparent 75%), #223450; }
html[data-theme="dark"] .access-summary h2, html[data-theme="dark"] .access-card h2,
html[data-theme="dark"] .access-heading h1 { color: #e2ebf9; }
html[data-theme="dark"] .access-card p, html[data-theme="dark"] .access-summary p,
html[data-theme="dark"] .feature-item, html[data-theme="dark"] .feature-item p,
html[data-theme="dark"] .access-heading .lead { color: #b7c7df; }
html[data-theme="dark"] .feature-item > span { border-color: #476389; background: #304867; color: #b3ccee; }
html[data-theme="dark"] .feature-item strong { color: #d3e2f6; }
html[data-theme="dark"] .access-heading .eyebrow, html[data-theme="dark"] .offer-kicker { color: #a8c0df; }
html[data-theme="dark"] .access-price { color: #bed2ff; }
html[data-theme="dark"] .access-price small { color: #adbfda; }
html[data-theme="dark"] .access-lock { border-color: #49648b; background: #2b4162; color: #b1cdf4; }
html[data-theme="dark"] .access-status { border-color: #3d695e; background: #203d38; color: #b6decc; }
html[data-theme="dark"] .access-status .quiet-button { color: #a3d4c2; }
html[data-theme="dark"] .access-divider { color: #b0c0db; }
html[data-theme="dark"] .access-divider::before, html[data-theme="dark"] .access-divider::after { background: #3f5271; }
html[data-theme="dark"] .preview-code { border-color: #536e99; background: #263a59; color: #c2d5f3; }
html[data-theme="dark"] .preview-code strong, html[data-theme="dark"] .preview-code small { color: #b6cae7; }
html[data-theme="dark"] .preview-code b { color: #d1e1ff; }
html[data-theme="dark"] .member-offer { border-color: #45628b; background: #243a58; }
html[data-theme="dark"] .member-offer h2 { color: #d0e0f8; }
html[data-theme="dark"] .member-offer p, html[data-theme="dark"] .demo-open small { color: #aec3e0; }
html[data-theme="dark"] .free-label { border-color: #4c7466; background: #25483c; color: #b6ddcb; }
html[data-theme="dark"] .map-container, html[data-theme="dark"] .peek-map,
html[data-theme="dark"] .detour-map { border-color: #3d4f6b; background: #1b273b; }
html[data-theme="dark"] .map-close { border-color: #4b6287; background: #263b59; color: #c3d6f2; }
html[data-theme="dark"] .map-caption, html[data-theme="dark"] .route-form .map-caption { color: #b0c2df; }
html[data-theme="dark"] .detour-meta span { border-color: #465f85; background: #263a59; color: #c7d9f2; }
html[data-theme="dark"] .route-form { background: #1b273b; }
html[data-theme="dark"] .route-form .eyebrow { color: #a7c2e7; }
html[data-theme="dark"] .city-selector select, html[data-theme="dark"] select.city-selector { border-color: #4b6284; background: #263951; color: #d0dff4; }
html[data-theme="dark"] .source-status { border-color: #435b7a; background: #263a54; color: #c4d3e9; }
html[data-theme="dark"] .source-status.is-unavailable, html[data-theme="dark"] .source-status.unavailable,
html[data-theme="dark"] .source-status[data-state="unavailable"] { border-color: #665638; background: #3b3224; color: #e2cda8; }
html[data-theme="dark"] .source-status.is-error, html[data-theme="dark"] .source-status[data-state="error"] { border-color: #7a4b5c; background: #482c38; color: #f0b6c5; }
html[data-theme="dark"] .source-status.is-ready, html[data-theme="dark"] .source-status[data-state="ready"] { border-color: #416c5f; background: #25473e; color: #b9dfd0; }
html[data-theme="dark"] #toast { border-color: #57749f; background: #273f5f; color: #e0ebfb; box-shadow: 0 10px 40px #0005; }

/* Native map controls follow the UI theme; the base map uses its own selection. */
html[data-theme="dark"] .kd-map-workspace { --kd-blue: #9bbcff; --kd-text: #eaf1fc; --kd-muted: #a5b9d7; --kd-border: #3a4e6e; }
html[data-theme="dark"] .kd-map-stage, html[data-theme="dark"] .kd-native-canvas { border-color: #425677; background: #18263b; }
html[data-theme="dark"] .kd-city-control select { color: #e2eafb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23c2d1e8' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .kd-map-styles { border-color: #425978; background: #223550; }
html[data-theme="dark"] .kd-map-styles button { color: #c0cee4; }
html[data-theme="dark"] .kd-map-styles button.is-selected { background: #3a537b; color: #d7e5ff; }
html[data-theme="dark"] .kd-source-status, html[data-theme="dark"] .kd-route-panel,
html[data-theme="dark"] .kd-map-tools button { border-color: #536987; background: #20324df2; box-shadow: 0 4px 20px #0004; color: #e0eafa; }
html[data-theme="dark"] .kd-source-status div > span, html[data-theme="dark"] .kd-route-toggle small,
html[data-theme="dark"] .kd-route-help, html[data-theme="dark"] .kd-route-result p,
html[data-theme="dark"] .kd-route-field-main > span:first-child { color: #b4c5df; }
html[data-theme="dark"] .kd-source-status > button { border-color: #486080; color: #becfeb; }
html[data-theme="dark"] .kd-route-icon { background: #344d72; color: #bad2ff; }
html[data-theme="dark"] .kd-toggle-symbol { color: #a8bedf; }
html[data-theme="dark"] .kd-route-field { border-color: #4a6184; background: #192a43; }
html[data-theme="dark"] .kd-route-field input { color: #e6eefb; }
html[data-theme="dark"] .kd-route-field input::placeholder { color: #a5b9d7; }
html[data-theme="dark"] .kd-route-field > button { color: #bdd0ed; }
html[data-theme="dark"] .kd-swap-button { border-color: #557097; background: #2c4365; color: #c8daf3; }
html[data-theme="dark"] .kd-route-letter { background: #385781; color: #d4e5ff; }
html[data-theme="dark"] .kd-route-letter-end { background: #688df2; color: #fff; }
html[data-theme="dark"] .kd-route-primary { background: #4169df; color: #fff; }
html[data-theme="dark"] .kd-route-primary:disabled { background: #334760; color: #adbdd5; box-shadow: none; }
html[data-theme="dark"] .kd-route-secondary { color: #bbcff1; }
html[data-theme="dark"] .kd-route-secondary:hover { background: #30496d; }
html[data-theme="dark"] .kd-route-message { background: #2b4466; color: #c9dcf8; }
html[data-theme="dark"] .kd-route-message[data-kind="warning"] { background: #493c28; color: #ead0a7; }
html[data-theme="dark"] .kd-route-message[data-kind="error"] { background: #4a2c36; color: #f3becd; }
html[data-theme="dark"] .kd-geocode-results { border-color: #4a6181; }
html[data-theme="dark"] .kd-geocode-results button { border-color: #425c7f !important; background: #2a4263; color: #d4e4f9 !important; }
html[data-theme="dark"] .kd-route-result, html[data-theme="dark"] .kd-route-turns { border-color: #486080; }
html[data-theme="dark"] .kd-route-result-label { background: #2a5747; color: #b5e0cc; }
html[data-theme="dark"] .kd-route-result-label.is-ordinary { background: #384e6b; color: #c4d4e9; }
html[data-theme="dark"] .kd-route-numbers > span, html[data-theme="dark"] .kd-route-numbers strong small { color: #b4c9e5; }
html[data-theme="dark"] .kd-route-comparison > div { background: #263951; border-color: #486080; }
html[data-theme="dark"] .kd-route-comparison > div.is-selected { background: #233e65; border-color: #7aaeff; }
html[data-theme="dark"] .kd-route-result p.kd-route-difference { color: #a9cdff; }
html[data-theme="dark"] .kd-route-transfer { border-color: #486080; }
html[data-theme="dark"] .kd-route-transfer summary { color: #a9cdff; }
html[data-theme="dark"] .kd-route-transfer p { color: #b4c9e5; }
html[data-theme="dark"] .kd-route-yandex { background: #263951; border-color: #486080; color: #e3eeff; }
html[data-theme="dark"] .kd-route-turns summary { color: #c0d5f4; }
html[data-theme="dark"] .kd-route-turns summary > span { background: #3a5275; color: #d0e1f6; }
html[data-theme="dark"] .kd-route-turns ol { color: #c3d4ec; }
html[data-theme="dark"] .kd-route-turns li { border-color: #3b557a; }
html[data-theme="dark"] .kd-route-turns li > small { color: #abc3e4; }
html[data-theme="dark"] .kd-route-provider { color: #b1c4df !important; }
html[data-theme="dark"] .kd-map-bottom { background: #203451ec; color: #c1d2e9; }
html[data-theme="dark"] .kd-map-bottom a { color: #bbceee; }
html[data-theme="dark"] .kd-map-tip { background: #d5e4f9ee; color: #223b5b; }
html[data-theme="dark"] .kd-native-canvas .leaflet-control-attribution { background: #1f3452ed; color: #b8c9e3; }
html[data-theme="dark"] .kd-native-canvas .leaflet-control-attribution a { color: #c6d8f2; }
html[data-theme="dark"] .kd-native-canvas .leaflet-popup-content-wrapper,
html[data-theme="dark"] .kd-native-canvas .leaflet-popup-tip,
html[data-theme="dark"] .kd-native-canvas .leaflet-tooltip { border-color: #536e94; background: #243b5b; color: #d9e6f8; }
html[data-theme="dark"] .kd-native-canvas .leaflet-popup-close-button { color: #c1d4f0; }
html[data-theme="dark"] .kd-map-unavailable { color: #c2d4ef; }
@media (max-width: 900px) {
  html[data-theme="dark"] body .mobile-nav { border-color: #3d5273; background: #192941f2; box-shadow: 0 -7px 24px #0004; }
  html[data-theme="dark"] body .mobile-nav button { color: #b8c7df; }
  html[data-theme="dark"] body .mobile-nav button > span { color: #b8c7df; }
  html[data-theme="dark"] body .mobile-nav button.active,
  html[data-theme="dark"] body .mobile-nav button.nav-appeal.active { background: #304a70; color: #d3e3ff; }
  html[data-theme="dark"] body .mobile-nav button.active > span,
  html[data-theme="dark"] body .mobile-nav button.nav-appeal.active > span { color: #c3d8ff; }
}

/* The restored full name stays compact beside its avatar on phones. */
.brand-name { max-width: 130px; font-size: 18px; font-weight: 750; line-height: 1.17; letter-spacing: -.5px; }
.brand-drive { display: block; margin-left: 0; font-size: 17px; font-weight: 550; line-height: 1.17; letter-spacing: -.35px; color: #65738c; }
html[data-theme="dark"] .brand-drive { color: #b7c6df; }
@media (max-width: 640px) {
  .brand { gap: 10px; }
  .brand-mark { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
  .brand-name { max-width: 130px; font-size: 16px; line-height: 1.15; letter-spacing: -.3px; }
  .brand-drive { font-size: 15px; line-height: 1.15; letter-spacing: -.25px; }
}
@media (max-width: 420px) {
  .access-badge { position: relative; width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; padding: 0; }
  .access-badge::before { display: none; }
  .access-badge svg { width: 22px; height: 22px; }
  .access-badge [data-access-badge] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

.member-access-card { max-width: 560px; margin: 24px auto 0; }
.member-access-row { display: flex; align-items: flex-start; gap: 14px; }
.member-access-row h2 { margin: 1px 0 8px; }
.member-access-row .tile-icon { flex-shrink: 0; }
.member-access-card .access-fine-print { margin-top: 12px; color: #66758d; font-size: 12px; }
.locked-services { margin-bottom: 24px; }
html[data-theme="dark"] .member-access-card .access-fine-print { color: #b7c7df; }
.beta-badge { align-self: center; flex-shrink: 0; padding: 3px 7px; border: 1px solid #cedafb; border-radius: 7px; background: #edf2ff; color: #365bd5; font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .15px; }
html[data-theme="dark"] .beta-badge { border-color: #3c527b; background: #253859; color: #c8d7ff; }
.member-access-card .member-auth-hint { margin: 10px 0 0; color: #66758d; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
html[data-theme="dark"] .member-access-card .member-auth-hint { color: #b7c7df; }

/* Remembered club access and a personal sign-in code. */
.transfer-access { max-width: 560px; }
.transfer-access h2 { font-size: 23px; }
.personal-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; padding: 18px; border: 1px dashed var(--blue); border-radius: 16px; background: var(--page); }
.personal-code strong { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 23px; letter-spacing: 1px; color: var(--ink); }
.access-code-details { margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.access-code-details summary { padding: 16px; font-size: 13px; }
.access-code-details .code-form { margin: 0; padding: 0 16px 18px; }
.access-code-details small { display: block; margin: 12px 0; }
.access-code-details .code-form .button { margin-top: 16px; }
html[data-theme="dark"] .access-code-details summary { color: #dce6f6; }

.access-help { margin: 18px 0; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.access-help a { color: var(--blue); font-weight: 700; text-decoration: none; white-space: nowrap; }
.access-help a:hover { text-decoration: underline; }
html[data-theme="dark"] .access-help a { color: #bbd0ff; }

/* Three-line wordmark requested by the owner. */
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.brand-name, .brand-drive { line-height: 1.1; }
.brand-na { display: block; color: #4168e8; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 1.2px; margin: 1px 0; }
html[data-theme="dark"] .brand-na { color: #a9c1ff; }
@media (max-width: 640px) { .brand-na { font-size: 10px; line-height: 1.15; margin: 1px 0; } }