/* Phone and portrait tablet layout, independent of the desktop composition. */
@media (max-width: 1023px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { background-color: #00AA74; }
  .landing-desktop { display: none !important; }
  .landing-mobile {
    --mobile-gutter: max(clamp(20px, 6.15vw, 32px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
    background: var(--bg-app);
  }
  .landing-mobile, .landing-mobile *, .landing-mobile *::before, .landing-mobile *::after {
    box-sizing: border-box;
  }
  .landing-mobile :is(h1,h2,h3,p) { overflow-wrap: break-word; }
  .landing-mobile button, .landing-mobile a { touch-action: manipulation; }
  .landing-mobile .mobile-hero {
    padding: calc(16px + env(safe-area-inset-top, 0px)) var(--mobile-gutter) 28px !important;
    background: linear-gradient(180deg, #00AA74 0, #00AA74 calc(104px + env(safe-area-inset-top, 0px)), #0C7A4C 42%, #004529 78%, #02251A 100%) !important;
    gap: 20px !important;
  }
  .landing-mobile .mobile-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px;
    min-height: 68px;
  }
  .mobile-header > span:first-child { flex-shrink: 0; }
  .landing-mobile [data-brand-context="mobile-header"] {
    width: 96px !important;
    height: auto !important;
    aspect-ratio: 1491.49 / 1052.82;
  }
  .mobile-header > span:last-child { grid-column: 3; justify-self: end; }
  .mobile-language-control { position: relative; display: flex; align-items: center; color: #fff; }
  .mobile-language-select {
    appearance: none;
    -webkit-appearance: none;
    width: 62px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #fff;
    padding: 0 24px 0 12px;
    font: 600 16px/1 var(--font-mono);
    cursor: pointer;
  }
  .mobile-language-select:focus-visible { outline: 2px solid var(--kb-green-300); outline-offset: 4px; }
  .mobile-language-select option { color: #08291d; background: #fff; }
  .mobile-language-control > svg { position: absolute; right: 10px; pointer-events: none; }
  .landing-mobile .language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px !important;
    font: 600 12px/1 var(--font-mono);
    letter-spacing: .04em;
  }
  .landing-mobile .mobile-hero-copy {
    gap: 12px !important;
    padding-top: 0 !important;
  }
  .mobile-hero-copy .kb-eyebrow { line-height: 1.5; letter-spacing: .12em; }
  .landing-mobile .mobile-hero-copy h1 {
    font-size: clamp(36px, 10.26vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    text-wrap: initial !important;
  }
  .mobile-hero-copy h1 > span {
    display: block;
    background: none !important;
    color: var(--kb-green-300) !important;
    -webkit-text-fill-color: currentColor;
  }
  .landing-mobile .mobile-hero-copy > p:first-of-type {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .landing-mobile .mobile-hero-copy > p:nth-of-type(2) {
    font-size: 15px !important;
    line-height: 1.45;
  }
  .mobile-hero-copy > p:last-child { max-width: 52ch; }
  .landing-mobile .mobile-hero-actions { gap: 8px !important; }
  .landing-mobile :is(.mobile-hero-actions,.mobile-cta) > button {
    min-height: 54px;
    height: auto !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  .landing-mobile .mobile-hero-actions > a {
    min-height: 44px;
    height: auto !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-align: center;
  }
  .landing-mobile .mobile-highlights {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px !important;
    padding-top: 4px !important;
    isolation: isolate;
  }
  .mobile-highlight-glow {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%);
    max-width: 100%;
    z-index: -1;
  }
  .landing-mobile .mobile-highlight {
    width: 100% !important;
    min-width: 0;
    min-height: 88px;
    height: 100%;
    padding: 12px !important;
    gap: 8px !important;
    align-self: stretch !important;
    border-radius: 18px !important;
    animation: none !important;
  }
  .mobile-highlight > :first-child { flex-shrink: 0; }
  .mobile-highlight > span:last-child { min-width: 0; }
  .mobile-highlight > span:last-child > span:first-child { font-size: 13px !important; line-height: 1.35; }
  .mobile-highlight > span:last-child > span:last-child { font-size: 12px !important; line-height: 1.45; }
  .landing-mobile .mobile-ticker {
    height: 48px !important;
    width: 100%;
    overflow: hidden;
  }
  .mobile-ticker-track { flex-shrink: 0; }
  .landing-mobile .mobile-steps, .landing-mobile .mobile-faq {
    padding: 48px var(--mobile-gutter) !important;
  }
  .landing-mobile .mobile-steps { gap: 16px !important; }
  .landing-mobile :is(.mobile-steps,.mobile-security,.mobile-faq) > h2 {
    font-size: clamp(30px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
  }
  .landing-mobile .mobile-step-card {
    min-width: 0;
    padding: 24px !important;
    gap: 14px !important;
  }
  .mobile-step-card h3 { font-size: 20px !important; line-height: 1.25; }
  .mobile-step-card p { font-size: 15px !important; line-height: 1.55 !important; }
  .landing-mobile .mobile-security, .landing-mobile .mobile-cta {
    margin-left: var(--mobile-gutter) !important;
    margin-right: var(--mobile-gutter) !important;
    padding: 28px 20px !important;
    border-radius: 24px !important;
    min-width: 0;
  }
  .landing-mobile .mobile-security { gap: 16px !important; }
  .landing-mobile .mobile-security-item {
    padding: 16px 14px !important;
    gap: 12px !important;
    min-width: 0;
    align-items: flex-start !important;
  }
  .mobile-security-item > span:first-child { flex-shrink: 0; padding-top: 2px; }
  .mobile-security-item > span:last-child { min-width: 0; }
  .mobile-security-item > span:last-child > span:first-child { line-height: 1.35; }
  .mobile-security-item > span:last-child > span:last-child { line-height: 1.5; }
  .mobile-faq .faq summary {
    min-height: 64px;
    padding: 18px 0 !important;
    gap: 16px;
    font-size: 16px !important;
    line-height: 1.4;
  }
  .mobile-faq .faq summary > span:last-child { flex-shrink: 0; }
  .mobile-faq .faq p { font-size: 15px; padding-bottom: 20px; }
  .landing-mobile .mobile-cta { padding: 32px 24px !important; }
  .mobile-cta h2 { font-size: 32px !important; line-height: 1.08 !important; }
  .mobile-cta > span { line-height: 1.5; }
  .mobile-cta [data-action="login"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  .landing-mobile .mobile-footer {
    padding: 40px var(--mobile-gutter) max(28px,env(safe-area-inset-bottom)) !important;
    gap: 24px !important;
  }
  .mobile-footer [data-brand-context="footer"] { width: 120px !important; height: 84.71px !important; }
  .mobile-footer-links { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px !important; }
  .mobile-footer-links > * { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 14px; }
  .mobile-footer-languages { display: flex; justify-content: center; gap: 8px; }
  .mobile-footer .kb-company-info { padding-top: 20px !important; overflow-wrap: anywhere; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .landing-mobile { --mobile-gutter: max(clamp(32px,5vw,52px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .landing-mobile .mobile-hero { display: grid !important; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 28px 32px !important; padding-bottom: 40px !important; }
  .mobile-header { grid-column: 1 / -1; }
  .mobile-hero-copy { grid-column: 1; grid-row: 2; }
  .mobile-hero-actions { grid-column: 1; grid-row: 3; }
  .landing-mobile .mobile-highlights { grid-column: 2; grid-row: 2 / 4; grid-template-columns: minmax(0,1fr); align-content: center; gap: 16px !important; }
  .landing-mobile .mobile-highlight { min-height: 76px; padding: 16px !important; }
  .mobile-highlight > span:last-child > span:first-child { font-size: 14px !important; }
  .mobile-highlight > span:last-child > span:last-child { font-size: 13px !important; }
  .landing-mobile .mobile-hero-copy h1 { font-size: clamp(38px,5.8vw,56px) !important; }
  .mobile-security, .mobile-faq, .mobile-cta, .mobile-footer { max-width: 760px; }
  .landing-mobile .mobile-security, .landing-mobile .mobile-cta { margin-left: auto !important; margin-right: auto !important; width: calc(100% - 2 * var(--mobile-gutter)); }
  .landing-mobile .mobile-faq, .landing-mobile .mobile-footer { margin-left: auto; margin-right: auto; }
  .mobile-footer-links { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing-mobile .mobile-steps { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; }
  .mobile-steps > h2 { grid-column: 1 / -1; max-width: 18ch; margin-bottom: 8px !important; }
  .landing-mobile .mobile-step-card { padding: 20px !important; }
  .mobile-step-card > div:first-child { gap: 12px; }
  .mobile-step-card .kb-numeric { font-size: 32px !important; }
}
@media (max-width: 359px) {
  .landing-mobile .mobile-highlight { padding: 10px !important; gap: 6px !important; }
  .mobile-highlight > :first-child { width: 24px !important; height: 24px !important; }
  .landing-mobile .mobile-step-card { padding: 20px !important; }
  .landing-mobile .mobile-security, .landing-mobile .mobile-cta { padding-left: 16px !important; padding-right: 16px !important; }
}