/* Homepage Mobile communication cards — explicit owner. */
.homepage-body .home-mobile-communication { display: none; }
@media (max-width: 640px), (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
body.homepage-body .home-mobile-communication {
    display: block;
    margin: 0 0 20px;
  }
  body.homepage-body .home-mobile-communication-heading {
    padding: 3px 5px 13px;
    text-align: center;
  }
  body.homepage-body .home-mobile-communication-heading h2 {
    margin: 0;
    color: #1c1e21;
    font-size: clamp(22px, 6vw, 27px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.05em;
  }
  body.homepage-body .home-mobile-communication-heading p {
    max-width: 310px;
    margin: 7px auto 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
  }
  body.homepage-body .home-mobile-communication-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  body.homepage-body .home-mobile-communication-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 188px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--communication-accent) 18%, #e2e8f0);
    border-radius: 21px;
    background: linear-gradient(145deg, var(--communication-surface) 0%, #fff 76%);
    color: #1c1e21;
    box-shadow: 0 8px 20px rgba(30, 41, 59, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  body.homepage-body .home-mobile-communication-card::after {
    position: absolute;
    top: -32px;
    right: -32px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--communication-accent) 11%, transparent);
    content: '';
    pointer-events: none;
  }
  body.homepage-body .home-mobile-communication-card:hover,
  body.homepage-body .home-mobile-communication-card:focus-visible {
    border-color: color-mix(in srgb, var(--communication-accent) 46%, #dbe3ef);
    box-shadow: 0 14px 27px color-mix(in srgb, var(--communication-accent) 15%, transparent);
    outline: none;
    transform: translateY(-2px);
  }
  body.homepage-body .home-mobile-communication-card--messages {
    --communication-accent: #4f46e5;
    --communication-surface: #f5f3ff;
  }
  body.homepage-body .home-mobile-communication-card--conferences {
    --communication-accent: #0f766e;
    --communication-surface: #effcfb;
  }
  body.homepage-body .home-mobile-communication-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--communication-accent) 20%, #e5e7eb);
    border-radius: 14px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--communication-accent) 13%, #fff), #fff);
    color: var(--communication-accent);
    box-shadow: 0 5px 13px color-mix(in srgb, var(--communication-accent) 11%, transparent);
  }
  body.homepage-body .home-mobile-communication-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
  body.homepage-body .home-mobile-communication-copy {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    gap: 5px;
  }
  body.homepage-body .home-mobile-communication-copy strong {
    color: #121827;
    font-size: clamp(15px, 4.2vw, 18px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.04em;
  }
  body.homepage-body .home-mobile-communication-copy small {
    color: #626b78;
    font-size: 11px;
    line-height: 1.38;
  }
  body.homepage-body .home-mobile-communication-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-height: 33px;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--communication-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--communication-accent) 24%, transparent);
  }

}