@layer components {
@media (max-width: 1023px) {

  .cp-phone .cp-lab { font-size: 13px; letter-spacing: 0.04em; }
  .cp-phone text { font-family: var(--font-sans); }

  .cp-sol-phone .cp-sol-fig { font-size: 13px; }
  .cp-sol-phone .cp-sol-fig--yr { font-size: 18px; }
  .cp-sol-phone .cp-sol-n { font-size: 13px; }
  .cp-sol-phone .cp-sol-rate-v { font-size: 34px; }
  .cp-sol-phone .cp-sol-grow-v { font-size: 14px; }

  .cp-led-surface { width: 100%; }

  .cp-led-chrome {
    height: auto;
    flex-wrap: wrap;
  }

  .cp-led-state { font-size: 12px; letter-spacing: 0.08em; }

  .cp-led-body {
    flex-direction: column;
  }
  .cp-led-who,
  .cp-led-next { flex: 0 0 auto; }

  .cp-led-k { font-size: 12px; letter-spacing: 0.08em; }
  .cp-led-name { font-size: 1.375rem; }
  .cp-led-name--sm { font-size: 1.125rem; }

  .cp-led-plate {
    min-width: 0;
    min-height: 0;
  }

  .cp-led-foot {
    flex-wrap: wrap;
  }
  .cp-led-foot span { flex: 0 0 auto; white-space: nowrap; }

  .cp-cro-phone .cp-cro-big { font-size: 30px; }
  .cp-cro-phone .cp-cro-big--dark { font-size: 30px; }
  .cp-cro-phone .cp-cro-sub { font-size: 13px; letter-spacing: 0; }
  .cp-cro-phone .cp-cro-chan { font-size: 13px; letter-spacing: 0; }
  .cp-cro-phone .cp-cro-field-k,
  .cp-cro-phone .cp-cro-field-r { font-size: 13px; letter-spacing: 0; }
  .cp-cro-phone .cp-cro-clim { font-size: 22px; }

  .cp-bow-phone .cp-bow-item { font-size: 13px; }
  .cp-bow-phone .cp-bow-item.is-lead { font-size: 15px; }
  .cp-bow-phone .cp-bow-clim { font-size: 16px; }
  .cp-bow-phone .cp-bow-n { font-size: 24px; }

  .cp-han-phone .cp-han-fig { font-size: 40px; }
  .cp-han-phone .cp-han-fig--sm { font-size: 32px; }
  .cp-han-phone .cp-han-in-k { font-size: 13px; letter-spacing: 0.06em; }
  .cp-han-phone .cp-han-in-v { font-size: 22px; }
  .cp-han-phone .cp-han-clim { font-size: 17px; }
}
}

@layer components {
@media (max-width: 1023px) {

  .cp-sol-head .page-hero-lede { display: none; }

  .cp-sol-head .site-actions { margin-top: var(--stack-md); }
  .cp-sol-head { margin-bottom: var(--stack-md); }

  .cp-led-rail { margin-bottom: var(--stack-md); }

  .cp-led-chrome { padding: 10px 16px; gap: 8px; }
  .cp-led-body { gap: 16px; padding: 16px; }
  .cp-led-plate { padding: 16px; }
  .cp-led-fig { font-size: 2.25rem; }
  .cp-led-foot { padding: 10px 16px; gap: 6px 16px; }

  .cp-cro-head { margin-top: 14px; }
  .cp-cro-head .site-kicker { margin-bottom: 10px; }
  .cp-cross .section-route { margin-top: 14px; }

  .cp-bow-phone .cp-bow-flex { transform-origin: 165px 320px; }

  .cp-bow-head { margin-bottom: 20px; }
  .cp-bow-head .site-kicker { margin-bottom: 10px; }
  .cp-bow-title { font-size: 1.875rem; }
  .cp-bow .section-route { margin-top: 14px; }

  .cp-han-head { margin-top: 14px; }
  .cp-han-head .site-kicker { margin-bottom: 10px; }
  .cp-han-title { font-size: 1.75rem; margin-top: 10px; margin-bottom: 8px; }
  .cp-han-lede { margin-top: 0; }
  .cp-hand .site-note { margin-top: 12px; }

  .main-content > .cp-hand { padding-top: 28px; padding-bottom: 28px; }
}

@media (max-width: 380px) {

  .cp-cro-head { margin-top: 14px; }
  .cp-cross .section-route { margin-top: 12px; }
}
}

@layer components {
@media (max-width: 1023px) {

  .main-content > .cp-solid {
    padding-top: calc(var(--navbar-h) + var(--hero-lede));
  }

  .cp-cro-head,
  .cp-han-head { margin-bottom: var(--stack-md); }

  .cp-led-lede,
  .cp-cro-lede,
  .cp-bow-lede,
  .cp-han-lede {
    font-size: var(--mt-lede);
    line-height: var(--mt-lh-lede);
  }

  .cp-led-rail .site-title { margin-top: var(--stack-xs); }
  .cp-led-rail .cp-led-lede { margin-top: var(--stack-xs); }

  .cp-cro-phone {
    width: calc(100% + var(--gutter));
    margin-inline: calc(-1 * var(--gutter)) 0;
  }

  .main-content > .cp-hand { padding-top: var(--stack-lg); padding-bottom: var(--stack-lg); }
  .cp-han-head { margin-top: 0; }

}

@media (min-width: 600px) and (max-width: 1023px) {
  .cp-bow-phone { max-width: 520px; }

  .cp-han-phone { max-width: 470px; }
}

@media (max-width: 380px) {
  .cp-han-phone { max-width: 318px; }
}

@media (max-width: 1023px) {
  .cp-cro-phone {
    width: 100%;
    margin-inline: 0;
  }

  .cp-cro-lens-k {
    fill: #14172A;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 14.5px;
    letter-spacing: 0.02em;
  }

  .cp-cro-phone .cp-lab,
  .cp-cro-phone .cp-cro-sub,
  .cp-cro-phone .cp-cro-chan,
  .cp-cro-phone .cp-cro-field-k,
  .cp-cro-phone .cp-cro-field-r { font-size: 14.5px; }
}

}

@layer components {
@media (max-width: 1023px) {

  .cp-sol-phone .cp-lab,
  .cp-sol-phone .cp-sol-fig,
  .cp-sol-phone .cp-sol-n,
  .cp-sol-phone .cp-sol-grow-v { font-size: 12.2px; }
  .cp-sol-phone .cp-sol-fig--yr { font-size: 18.6px; }

  .cp-bow-phone .cp-lab,
  .cp-bow-phone .cp-bow-item,
  .cp-bow-phone .cp-bow-item.is-lead,
  .cp-bow-phone .cp-bow-clim { font-size: 12.2px; }

  .cp-han-phone .cp-lab,
  .cp-han-phone .cp-han-in-k,
  .cp-han-phone .cp-han-clim { font-size: 12.6px; }

  .cp-cro-phone .cp-lab,
  .cp-cro-phone .cp-cro-sub,
  .cp-cro-phone .cp-cro-chan,
  .cp-cro-phone .cp-cro-lens-k,
  .cp-cro-phone .cp-cro-field-k,
  .cp-cro-phone .cp-cro-field-r { font-size: 13.4px; }

  .cp-led-name--sm { font-size: var(--mt-label); }

}
}