/* Phone content: services, reading and forms. Map and shell chrome are separate. */
html.kd-mobile-shell main:not(.map-screen) {
  --ink: #182a43;
  --text: #182a43;
  --muted: #52657d;
  --line: #d8e1ec;
  --panel: #fff;
  --page: #f3f5f8;
  --blue: #156bf2;
  --accent: #156bf2;
  container: kd-content / inline-size;
  max-width: 880px;
  min-width: 0;
  margin-inline: auto;
  padding: 24px calc(16px + var(--kd-safe-right, env(safe-area-inset-right, 0px))) calc(var(--kd-tabs-height, 76px) + 28px) calc(16px + var(--kd-safe-left, env(safe-area-inset-left, 0px)));
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
html.kd-mobile-shell[data-theme="dark"] main:not(.map-screen) {
  --ink: #edf3fc;
  --text: #edf3fc;
  --muted: #b6c5db;
  --line: #3a4c65;
  --panel: #1c2b40;
  --page: #142033;
  --blue: #abcaff;
  --accent: #abcaff;
}
html.kd-mobile-shell main:not(.map-screen) :where(h1, h2, h3, p, li, label, figure, section, article, form, div) {min-width: 0;}
html.kd-mobile-shell main:not(.map-screen) :where(h1, h2, h3) {color: var(--ink); text-wrap: pretty;}
html.kd-mobile-shell main:not(.map-screen) h1 {font-size: clamp(27px, 7vw, 34px); line-height: 1.18; letter-spacing: -.8px;}
html.kd-mobile-shell main:not(.map-screen) h2 {font-size: clamp(21px, 5.4vw, 25px); line-height: 1.3; letter-spacing: -.4px;}
html.kd-mobile-shell main:not(.map-screen) h3 {font-size: 18px; line-height: 1.35; letter-spacing: -.2px;}
html.kd-mobile-shell main:not(.map-screen) :where(.page-heading, .guide-heading) {margin-bottom: 24px;}
html.kd-mobile-shell main:not(.map-screen) :where(.lead, .page-heading .lead, .guide-intro-text) {color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 66ch;}
html.kd-mobile-shell main:not(.map-screen) .eyebrow {font-size: 11px; color: var(--muted); letter-spacing: .6px;}
html.kd-mobile-shell main:not(.map-screen) :where(button, .button, summary) {min-height: 44px; min-width: 0; touch-action: manipulation;}
html.kd-mobile-shell main:not(.map-screen) :where(button, a, summary, input, textarea, select):focus-visible {outline: 3px solid #639bfa; outline-offset: 3px;}
html.kd-mobile-shell main:not(.map-screen) :where(button, .button, summary) {scroll-margin-block: 88px calc(var(--kd-tabs-height, 76px) + 24px);}
html.kd-mobile-shell main:not(.map-screen) .button {min-height: 48px; padding: 13px 16px; border-radius: 14px; font-size: 15px; white-space: normal; overflow-wrap: anywhere; text-align: center;}
html.kd-mobile-shell main:not(.map-screen) .button.primary {background: #156bf2; border-color: #156bf2; color: #fff; box-shadow: none;}
html.kd-mobile-shell main:not(.map-screen) :where(.quiet-button, .back-button) {display: inline-flex; align-items: center; justify-content: center; padding-block: 10px; font-size: 14px; line-height: 1.45; white-space: normal;}
html.kd-mobile-shell main:not(.map-screen) .back-button {justify-content: flex-start; padding-bottom: 10px; margin-bottom: 8px;}
html.kd-mobile-shell main:not(.map-screen) .button-row {display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
html.kd-mobile-shell main:not(.map-screen) .button-row > * {max-width: 100%;}
html.kd-mobile-shell main:not(.map-screen) :where(.surface, .doc-card, .access-card, .support-card, .home-help, .guide-rule, .guide-materials article, .appeal-ready-guide, .dispatch-online, .dispatch-club) {padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: none;}
html.kd-mobile-shell main:not(.map-screen) :where(.surface p, .surface ul, .surface ol, .doc-card p, .access-card p, .support-card p, .home-help p, .guide-rule p, .guide-rule li) {font-size: 15px; line-height: 1.7; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) :where(.note, .warning, .demo-note) {padding: 16px; border-radius: 14px; font-size: 14px; line-height: 1.65;}
html.kd-mobile-shell main:not(.map-screen) :where(.note p, .warning p, .demo-note p) {font-size: inherit; line-height: inherit;}
html.kd-mobile-shell main:not(.map-screen) :where(.news-note, .access-fine-print, .member-auth-hint, .access-help, .error-text, .field small) {font-size: 14px; line-height: 1.6;}
html.kd-mobile-shell main:not(.map-screen) .access-help a {display: inline-flex; align-items: center; min-height: 44px;}
html.kd-mobile-shell main:not(.map-screen) .error-text {color: #b82740;}
html.kd-mobile-shell[data-theme="dark"] main:not(.map-screen) .error-text {color: #ffb7c2;}

/* The main guide leads; SOS remains one quiet, ordinary service row. */
html.kd-mobile-shell main:not(.map-screen) .service-featured {min-height: 112px; gap: 12px; padding: 18px 16px; margin-bottom: 14px; border-radius: 22px; background: #eaf1ff; border-color: #cdddfa; box-shadow: none;}
html.kd-mobile-shell main:not(.map-screen) .service-featured-icon {flex-basis: 40px; height: 40px; border-radius: 12px;}
html.kd-mobile-shell main:not(.map-screen) .service-featured-copy strong {font-size: 17px; line-height: 1.35; letter-spacing: 0;}
html.kd-mobile-shell main:not(.map-screen) .service-featured-copy > span {font-size: 14px; line-height: 1.55; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .service-featured-arrow {flex-basis: 18px;}
html.kd-mobile-shell main:not(.map-screen) .sos-service {gap: 12px; padding: 16px; margin-bottom: 22px; border-radius: 18px; background: var(--panel); border-color: var(--line); box-shadow: none; text-decoration: none;}
html.kd-mobile-shell main:not(.map-screen) .sos-copy strong {font-size: 17px;}
html.kd-mobile-shell main:not(.map-screen) .sos-copy > span {font-size: 14px; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) :where(.service-grid.locked-services, .topic-row.topic-cards.services-topic-cards) {display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin: 18px 0 24px; overflow: visible;}
html.kd-mobile-shell main:not(.map-screen) :where(.locked-services .service-tile, .topic-row.topic-cards.services-topic-cards .topic-card) {display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 4px 12px; min-height: 112px; width: 100%; padding: 18px 36px 18px 16px; border-radius: 18px; background: var(--panel); box-shadow: none; white-space: normal;}
html.kd-mobile-shell main:not(.map-screen) :where(.locked-services .tile-icon, .topic-row.topic-cards.services-topic-cards .topic-card-icon) {grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; border-radius: 12px;}
html.kd-mobile-shell main:not(.map-screen) :where(.locked-services .tile-copy, .topic-row.topic-cards.services-topic-cards .topic-card-label, .topic-row.topic-cards.services-topic-cards .topic-card-caption, .topic-row.topic-cards.services-topic-cards .service-topic-article) {grid-column: 2; margin: 0; min-width: 0; white-space: normal;}
html.kd-mobile-shell main:not(.map-screen) :where(.locked-services .tile-copy strong, .topic-row.topic-cards.services-topic-cards .topic-card-label) {margin: 0; font-size: 17px; line-height: 1.35; color: var(--ink);}
html.kd-mobile-shell main:not(.map-screen) :where(.locked-services .tile-copy > span, .topic-row.topic-cards.services-topic-cards .topic-card-caption) {font-size: 14px; line-height: 1.55; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) :where(.locked-services .tile-copy .service-topic-article, .topic-row.topic-cards.services-topic-cards .service-topic-article) {font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.45; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .topic-card.selected {background: var(--topic-tint, #eaf1ff);}
html.kd-mobile-shell main:not(.map-screen) .locked-services .tile-arrow {right: 12px; top: 18px;}
/* Nested topic copy remains one reading column, including the guest list. */
html.kd-mobile-shell main:not(.map-screen) .locked-services .service-tile {align-items:start;text-align:left;}
html.kd-mobile-shell main:not(.map-screen) .locked-services .tile-copy {display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
html.kd-mobile-shell main:not(.map-screen) .locked-services .tile-copy>* {grid-column:auto;grid-row:auto;width:auto;text-align:left;}
html.kd-mobile-shell main:not(.map-screen) .locked-services .tile-copy strong {font-size:17px;line-height:1.35;}
html.kd-mobile-shell main:not(.map-screen) .locked-services .tile-copy>span {font-size:14px;line-height:1.55;}
html.kd-mobile-shell main:not(.map-screen) .locked-services .tile-copy>.service-topic-article {font-size:12px;color:var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .topic-card {text-align:left;align-items:start;align-content:start;min-height:112px;grid-template-rows:auto auto auto;}
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .topic-card-label,
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .service-topic-article,
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .topic-card-caption {grid-column:2;text-align:left;}
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .topic-card-label {font-size:17px;line-height:1.35;}
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .service-topic-article {font-size:12px;line-height:1.4;}
html.kd-mobile-shell main:not(.map-screen) .topic-row.topic-cards.services-topic-cards .topic-card-caption {font-size:14px;line-height:1.55;}
html.kd-mobile-shell main:not(.map-screen) .phase-grid {grid-template-columns: minmax(0,1fr); gap: 12px;}
html.kd-mobile-shell main:not(.map-screen) .phase-card {min-height: 0; padding: 18px; border-radius: 20px; background: var(--panel); border-color: var(--line); box-shadow: none;}
html.kd-mobile-shell main:not(.map-screen) .stage-kicker {margin-bottom: 14px; padding-right: 42px; font-size: 11px; line-height: 1.5; color: var(--muted); letter-spacing: .3px;}
html.kd-mobile-shell main:not(.map-screen) .stage-kicker > span {font-size: 10px;}
html.kd-mobile-shell main:not(.map-screen) .phase-copy {width: 100%; gap: 8px;}
html.kd-mobile-shell main:not(.map-screen) .phase-title {font-size: 21px; line-height: 1.3; color: var(--ink);}
html.kd-mobile-shell main:not(.map-screen) .phase-caption {font-size: 14px; line-height: 1.55; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .phase-card .stage-art {width: 36px; height: 36px; top: 17px; right: 17px; opacity: .6; transform: none;}
html.kd-mobile-shell main:not(.map-screen) .stage-cta {font-size: 14px; padding-block: 10px;}
html.kd-mobile-shell main:not(.map-screen) .stage-bottom {position: static; margin-top: 14px; padding-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.55;}
html.kd-mobile-shell main:not(.map-screen) .phase-card.stage-after .stage-cta {min-height: 44px; padding: 11px 18px; margin-top: 8px; border-radius: 13px; background: #df2541; color: #fff; box-shadow: none;}
html.kd-mobile-shell main:not(.map-screen) .button[data-phase="after"] {border-color: #df2541; background: #df2541; color: #fff;}
html.kd-mobile-shell main:not(.map-screen) .access-status {gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 20px;}
html.kd-mobile-shell main:not(.map-screen) :where(.status-pill, .access-status .quiet-button) {font-size: 13px; white-space: normal;}
html.kd-mobile-shell main:not(.map-screen) .resume-card {flex-wrap: wrap; padding: 18px;}

/* Fields stay large enough to prevent Safari's focus zoom. */
html.kd-mobile-shell main:not(.map-screen) .form-grid {grid-template-columns: minmax(0,1fr); gap: 20px; margin-block: 24px;}
html.kd-mobile-shell main:not(.map-screen) .field {min-width: 0; font-size: 14px; gap: 8px; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) :where(.field input, .field textarea, .access-card input, #access-code, .news-region-select select) {min-width: 0; max-width: 100%; min-height: 50px; border-radius: 14px; font-size: 16px; color: var(--ink); background-color: var(--panel);}
html.kd-mobile-shell main:not(.map-screen) .field.wide {grid-column: 1 / -1;}
html.kd-mobile-shell main:not(.map-screen) .field textarea {min-height: 112px; resize: vertical;}
html.kd-mobile-shell main:not(.map-screen) .check-row {min-height: 48px; padding-block: 14px; font-size: 15px; line-height: 1.6; color: var(--muted); align-items: flex-start; gap: 12px;}
html.kd-mobile-shell main:not(.map-screen) .check-row input {width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px;}
html.kd-mobile-shell main:not(.map-screen) .signature-date-field {grid-template-columns: minmax(0,1fr) auto; gap: 10px;}
html.kd-mobile-shell main:not(.map-screen) .signature-date-field .date-today {min-height: 50px; margin-top: 28px; font-size: 14px; padding-inline: 12px;}
html.kd-mobile-shell main:not(.map-screen) .step-header {align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px;}
html.kd-mobile-shell main:not(.map-screen) .step-header .quiet-button {font-size: 14px;}
html.kd-mobile-shell main:not(.map-screen) .step-label {font-size: 12px; letter-spacing: .3px; font-variant-numeric: tabular-nums;}
html.kd-mobile-shell main:not(.map-screen) .wizard-actions {gap: 12px; margin-top: 24px;}
html.kd-mobile-shell main:not(.map-screen) .wizard-actions .muted {font-size: 14px;}
html.kd-mobile-shell main:not(.map-screen) .upload {min-height: 0; padding: 22px 18px; background: var(--panel); border-radius: 20px;}
html.kd-mobile-shell main:not(.map-screen) :where(.upload p, .upload small, .upload-choice small, .photo-list) {font-size: 14px; line-height: 1.6; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .upload .button {display: flex; align-items: center; justify-content: center;}
html.kd-mobile-shell main:not(.map-screen) .upload-choices {gap: 12px;}
html.kd-mobile-shell main:not(.map-screen) .upload-choice {padding: 18px 16px; grid-template-columns: 40px minmax(0,1fr) 16px; gap: 5px 12px; border-radius: 18px; background: var(--panel);}
html.kd-mobile-shell main:not(.map-screen) .upload-choice strong {font-size: 16px; line-height: 1.4; color: var(--ink);}
html.kd-mobile-shell main:not(.map-screen) .photo-list span {max-width: 100%; overflow-wrap: anywhere;}
html.kd-mobile-shell main:not(.map-screen) .case-step {padding: 18px 16px; gap: 12px; border-radius: 16px;}
html.kd-mobile-shell main:not(.map-screen) .case-step strong {font-size: 15px; color: var(--ink);}
html.kd-mobile-shell main:not(.map-screen) .case-step small {font-size: 13px; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .details-grid {grid-template-columns: minmax(0,1fr);}
html.kd-mobile-shell main:not(.map-screen) .details-grid > div {padding: 16px;}
html.kd-mobile-shell main:not(.map-screen) .details-grid span {font-size: 13px; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .details-grid strong {font-size: 15px; color: var(--ink);}
html.kd-mobile-shell main:not(.map-screen) .doc-preview {padding: 22px 18px; font-size: 16px; line-height: 1.75;}
html.kd-mobile-shell main:not(.map-screen) .doc-signature-date {padding: 14px; font-size: 14px;}

/* A readable document photo is part of the second stage, not decoration. */
html.kd-mobile-shell main:not(.map-screen) :where(img, video, canvas) {max-width: 100%;}
html.kd-mobile-shell main:not(.map-screen) .guide-tabs {gap: 4px; padding: 4px; border-radius: 18px;}
html.kd-mobile-shell main:not(.map-screen) .guide-tabs button {min-height: 82px; padding: 12px 8px; font-size: 15px; border-radius: 14px;}
html.kd-mobile-shell main:not(.map-screen) .guide-tab-hint {font-size: 13px; line-height: 1.5;}
html.kd-mobile-shell main:not(.map-screen) .guide-contents {display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px;}
html.kd-mobile-shell main:not(.map-screen) .guide-contents > span {flex-basis: 100%; margin-bottom: 4px; font-size: 14px;}
html.kd-mobile-shell main:not(.map-screen) .guide-contents button {font-size: 14px; padding: 11px 12px; min-height: 44px;}
html.kd-mobile-shell main:not(.map-screen) :where(.guide-teaser, .guide-capture-tip) {gap: 12px; padding: 18px 16px; border-radius: 18px;}
html.kd-mobile-shell main:not(.map-screen) .guide-teaser strong {font-size: 17px;}
html.kd-mobile-shell main:not(.map-screen) :where(.guide-teaser small, .guide-capture-tip strong, .guide-capture-tip p, .guide-heading p, .guide-photo-card figcaption, .guide-photo-warning, .guide-photo-unavailable p, .guide-reading-label p) {font-size: 14px; line-height: 1.65;}
html.kd-mobile-shell main:not(.map-screen) .guide-photo-card {padding: 8px; margin-block: 24px; border-radius: 18px; max-width: 100%;}
html.kd-mobile-shell main:not(.map-screen) .guide-photo-open img {width: 100%; height: auto; max-height: min(50dvh, 430px); object-fit: contain;}
html.kd-mobile-shell main:not(.map-screen) .guide-photo-zoom {font-size: 14px; padding: 10px 12px; right: 8px; bottom: 8px;}
html.kd-mobile-shell main:not(.map-screen) :where(.guide-rule, .guide-section) {scroll-margin-top: calc(84px + var(--kd-safe-top, 0px));}
html.kd-mobile-shell main:not(.map-screen) .guide-materials {grid-template-columns: minmax(0,1fr); gap: 12px;}
html.kd-mobile-shell main:not(.map-screen) .guide-materials article {position: relative; padding: 18px 16px 18px 62px;}
html.kd-mobile-shell main:not(.map-screen) .guide-material-number {position: absolute; top: 18px; left: 16px; font-size: 12px;}
html.kd-mobile-shell main:not(.map-screen) .guide-materials h3 {margin: 0 0 8px; font-size: 18px;}
html.kd-mobile-shell main:not(.map-screen) .guide-materials p {font-size: 15px; line-height: 1.65; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .guide-copy-line {padding: 14px; gap: 8px 14px;}
html.kd-mobile-shell main:not(.map-screen) .guide-copy-line .quiet-button {font-size: 14px;}
html.kd-mobile-shell main:not(.map-screen) .checklist li {gap: 12px; padding: 18px 16px; border-radius: 18px;}
html.kd-mobile-shell main:not(.map-screen) .checklist strong {font-size: 17px; line-height: 1.45; color: var(--ink);}
html.kd-mobile-shell main:not(.map-screen) .checklist p {font-size: 15px; line-height: 1.7; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .quote {flex-wrap: wrap; padding: 14px; font-size: 16px; gap: 8px;}
html.kd-mobile-shell main:not(.map-screen) .quote .quiet-button {font-size: 14px;}
html.kd-mobile-shell main:not(.map-screen) .plates-guide .ks-reading-card summary {min-height: 64px; padding: 18px 16px; gap: 12px; font-size: 17px;}
html.kd-mobile-shell main:not(.map-screen) .plates-guide .ks-reading-card summary small {font-size: 13px;}
html.kd-mobile-shell main:not(.map-screen) :where(.plates-guide .ks-reading-content, .plates-guide .ks-capture-tip, .plates-guide .ks-document-chain) {font-size: 15px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; white-space: normal;}
html.kd-mobile-shell main:not(.map-screen) .plates-guide .ks-reading-content {padding: 4px 16px 22px;}
html.kd-mobile-shell main:not(.map-screen) .plates-guide .ks-reading-content ul {padding-inline-start: 22px;}
html.kd-mobile-shell main:not(.map-screen) .plates-guide .ks-reading-content li {margin-block: 10px;}

/* News uses one clear feed; all category controls stay thumb sized. */
html.kd-mobile-shell main:not(.map-screen) .news-update {gap: 10px; font-size: 14px; line-height: 1.6; margin: 18px 0;}
html.kd-mobile-shell main:not(.map-screen) .news-region-select {padding: 12px 16px; border-radius: 18px; font-size: 14px; gap: 3px;}
html.kd-mobile-shell main:not(.map-screen) .news-region-select select {padding-block: 8px; background-color: var(--panel);}
html.kd-mobile-shell main:not(.map-screen) .news-filter-row {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 5px; border-radius: 16px;}
html.kd-mobile-shell main:not(.map-screen) .news-filter {min-height: 44px; padding: 10px 8px; border-radius: 11px; font-size: 14px; line-height: 1.4; white-space: normal;}
html.kd-mobile-shell main:not(.map-screen) .news-list {gap: 14px; margin-block: 20px;}
html.kd-mobile-shell main:not(.map-screen) .official-news-card {padding: 20px; border-radius: 20px; background: var(--panel); border-color: var(--line); box-shadow: none;}
html.kd-mobile-shell main:not(.map-screen) .official-news-card h2 {font-size: 21px; line-height: 1.35; margin: 0;}
html.kd-mobile-shell main:not(.map-screen) .official-news-card p {font-size: 15px; line-height: 1.7; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) :where(.news-card-meta time, .news-status, .news-place, .news-event-date) {font-size: 13px; line-height: 1.5;}
html.kd-mobile-shell main:not(.map-screen) .news-card-meta {gap: 8px 12px;}
html.kd-mobile-shell main:not(.map-screen) .news-source {min-height: 48px; padding-top: 14px; gap: 12px; font-size: 14px;}

/* Access and dispatch remain step-by-step, with enough space for real data. */
html.kd-mobile-shell main:not(.map-screen) .member-access-card {max-width: 580px; padding: 20px; margin-top: 22px;}
html.kd-mobile-shell main:not(.map-screen) .member-access-row {gap: 12px;}
html.kd-mobile-shell main:not(.map-screen) .member-access-row h2 {font-size: 21px; line-height: 1.35;}
html.kd-mobile-shell main:not(.map-screen) .member-access-row .tile-icon {width: 40px; height: 40px; flex-basis: 40px;}
html.kd-mobile-shell main:not(.map-screen) .access-code-details summary {padding: 14px 16px; font-size: 15px;}
html.kd-mobile-shell main:not(.map-screen) .access-code-details .code-form {padding: 0 16px 18px;}
html.kd-mobile-shell main:not(.map-screen) .access-code-details small {font-size: 14px;}
html.kd-mobile-shell main:not(.map-screen) .personal-code {display: flex; flex-wrap: wrap; gap: 8px 14px; min-width: 0;}
html.kd-mobile-shell main:not(.map-screen) .personal-code strong {font-variant-numeric: tabular-nums; font-size: clamp(21px, 6.5vw, 28px); letter-spacing: .5px; overflow-wrap: anywhere;}
html.kd-mobile-shell main:not(.map-screen) .login-approval {padding: 16px; min-width: 0;}
html.kd-mobile-shell main:not(.map-screen) .login-approval > strong {font-size: 26px; font-variant-numeric: tabular-nums;}
html.kd-mobile-shell main:not(.map-screen) .privacy-card details summary {padding-block: 10px; font-size: 15px;}
html.kd-mobile-shell main:not(.map-screen) .kd-phone-app-card {padding: 20px; background: var(--panel); border-color: var(--line); border-radius: 20px; box-shadow: none;}
html.kd-mobile-shell main:not(.map-screen) :where(.kd-phone-app-hint, .kd-phone-app-status, .kd-phone-app-footnote, .kd-phone-app-platforms ol) {font-size: 14px; line-height: 1.65;}
html.kd-mobile-shell main:not(.map-screen) .dispatch-step {grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 20px 16px; border-radius: 20px;}
html.kd-mobile-shell main:not(.map-screen) .dispatch-number {width: 30px; height: 30px; border-radius: 10px; font-size: 13px;}
html.kd-mobile-shell main:not(.map-screen) .dispatch-step h2 {font-size: 21px; line-height: 1.35; margin-top: 2px;}
html.kd-mobile-shell main:not(.map-screen) :where(.dispatch-step p, .dispatch-online p, .dispatch-club p, .appeal-pin) {font-size: 15px; line-height: 1.7; color: var(--muted);}
html.kd-mobile-shell main:not(.map-screen) .dispatch-recipient {padding: 14px; font-size: 15px;}
html.kd-mobile-shell main:not(.map-screen) .dispatch-recipient > small {font-size: 13px; line-height: 1.6;}
html.kd-mobile-shell main:not(.map-screen) .dispatch-pack li {padding: 14px; font-size: 15px;}
html.kd-mobile-shell main:not(.map-screen) .dispatch-pack li > span {font-size: 14px;}
html.kd-mobile-shell main:not(.map-screen) .appeal-ready-pack li {grid-template-columns: minmax(0,1fr); gap: 4px; font-size: 15px;}
html.kd-mobile-shell main:not(.map-screen) .appeal-ready-pack li > strong {font-size: 13px;}

html.kd-mobile-shell[data-theme="dark"] main:not(.map-screen) .service-featured {background: #253b59; border-color: #456183;}
html.kd-mobile-shell[data-theme="dark"] main:not(.map-screen) .service-featured-copy > span {color: var(--muted);}
html.kd-mobile-shell[data-theme="dark"] main:not(.map-screen) .button.primary {background: #216cf1; border-color: #216cf1; color: #fff;}

@container kd-content (min-width: 580px) {
  html.kd-mobile-shell main:not(.map-screen) .news-filter-row {grid-template-columns: repeat(4,minmax(0,1fr));}
  html.kd-mobile-shell main:not(.map-screen) :where(.form-grid, .details-grid, .phase-grid) {grid-template-columns: repeat(2,minmax(0,1fr));}
  html.kd-mobile-shell main:not(.map-screen) :where(.service-grid.locked-services, .topic-row.topic-cards.services-topic-cards) {grid-template-columns: repeat(2,minmax(0,1fr));}
  html.kd-mobile-shell main:not(.map-screen) .signature-date-field {grid-column: 1 / -1;}
  html.kd-mobile-shell main:not(.map-screen) .guide-materials {grid-template-columns: repeat(3,minmax(0,1fr));}
  html.kd-mobile-shell main:not(.map-screen) .guide-materials article {padding: 18px;}
  html.kd-mobile-shell main:not(.map-screen) .guide-material-number {position: static; margin-bottom: 12px;}
  html.kd-mobile-shell main:not(.map-screen) .appeal-ready-pack li {grid-template-columns: 66px minmax(0,1fr); gap: 12px;}
}
@media (max-width: 520px) {
  html.kd-mobile-shell main:not(.map-screen) .button-row {flex-direction: column; align-items: stretch;}
  html.kd-mobile-shell main:not(.map-screen) .button-row > :where(button, a) {width: 100%;}
  html.kd-mobile-shell main:not(.map-screen) .button-row > .muted {text-align: center;}
  html.kd-mobile-shell main:not(.map-screen) .resume-card .button {width: 100%; font-size: 14px; min-height: 44px;}
  html.kd-mobile-shell main:not(.map-screen) .guide-copy-line .quiet-button {width: 100%;}
  html.kd-mobile-shell main:not(.map-screen) .member-access-row {flex-wrap: wrap;}
  html.kd-mobile-shell main:not(.map-screen) .member-access-row > div {flex-basis: 100%;}
}
@media (max-width: 359px) {
  html.kd-mobile-shell main:not(.map-screen) :where(.surface, .doc-card, .access-card, .guide-rule, .official-news-card, .dispatch-online, .dispatch-club) {padding: 18px 16px;}
  html.kd-mobile-shell main:not(.map-screen) .service-featured {gap: 10px;}
  html.kd-mobile-shell main:not(.map-screen) .service-featured-icon {flex-basis: 32px; height: 32px; font-size: 22px;}
  html.kd-mobile-shell main:not(.map-screen) .service-featured-copy strong {font-size: 16px;}
  html.kd-mobile-shell main:not(.map-screen) .guide-capture-tip {display: block;}
  html.kd-mobile-shell main:not(.map-screen) .guide-capture-tip > span {display: block; margin-bottom: 8px;}
  html.kd-mobile-shell main:not(.map-screen) .dispatch-step {grid-template-columns: minmax(0,1fr);}
  html.kd-mobile-shell main:not(.map-screen) .dispatch-number {margin-bottom: 2px;}
}
@media (hover: hover) {
  html.kd-mobile-shell main:not(.map-screen) .button.primary:hover {background: #0d55cb; border-color: #0d55cb;}
  html.kd-mobile-shell main:not(.map-screen) :where(.service-featured, .sos-service, .service-tile, .phase-card, .topic-card):hover {transform: none; border-color: #89aee9; box-shadow: none;}
  html.kd-mobile-shell main:not(.map-screen) .phase-card.stage-after:hover .stage-cta {background: #c91c36;}
}
@media (prefers-reduced-motion: reduce) {
  html.kd-mobile-shell main:not(.map-screen), html.kd-mobile-shell main:not(.map-screen) * {scroll-behavior: auto !important; animation: none !important; transition: none !important;}
}