/* Self-contained and scoped to .dc-app so it looks the same on all three pages. */
  .dc-app, .dc-app * { box-sizing: border-box; }
  .dc-app {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #1a0838 0%, #24094f 100%);
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    padding: 56px 0 60px;
  }
  .dc-app::before {
    content: ""; position: absolute; top: -140px; right: -100px; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 92, 0, 0.28), transparent 70%); pointer-events: none;
  }
  .dc-app__inner { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
  .dc-app h2, .dc-app h3, .dc-app p { margin: 0; }
  .dc-app a { color: inherit; text-decoration: none; }
  .dc-app a:focus-visible { outline: 2px solid #ff7a2e; outline-offset: 3px; }

  .dc-app__head { max-width: 660px; margin: 0 auto 32px; text-align: center; }
  .dc-app__kicker {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px;
    border-radius: 999px; border: 1px solid rgba(255, 122, 46, 0.7); background: rgba(255, 92, 0, 0.12);
    color: #ff7a2e; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .dc-app__kicker svg { width: 14px; height: 14px; }
  .dc-app__title { margin-bottom: 12px; font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1.15; }
  .dc-app__sub { color: rgba(255, 255, 255, 0.9); font-size: 16px; }

  .dc-app__grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }

  /* Phones: compact row (icon + name + button on the left, QR on the right). */
  .dc-app__card {
    display: grid; grid-template-columns: 1fr 132px; grid-template-areas: "head qr" "btn qr";
    align-items: center; gap: 14px 16px; padding: 18px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .dc-app__cardhead { grid-area: head; display: flex; align-items: center; gap: 12px; }
  .dc-app__icon {
    flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px; background: linear-gradient(135deg, #ff3700, #ff5c00); color: #1a0838;
  }
  .dc-app__icon svg { width: 24px; height: 24px; }
  .dc-app__name { font-size: 20px; font-weight: 800; line-height: 1.2; }
  .dc-app__hint { margin-top: 2px; color: rgba(255, 255, 255, 0.85); font-size: 13px; }
  .dc-app__badge {
    display: none; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
    background: #ff7a2e; color: #1a0838; font-size: 11px; font-weight: 800;
  }
  .dc-app__card.is-yours { border-color: #ff7a2e; box-shadow: 0 0 0 1px #ff7a2e, 0 10px 36px rgba(255, 92, 0, 0.25); }
  .dc-app__card.is-yours .dc-app__badge { display: inline-block; }

  .dc-app__qr {
    grid-area: qr; display: block; width: 132px; padding: 6px; border-radius: 16px; background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); transition: transform 0.2s;
  }
  .dc-app__qr:hover { transform: translateY(-3px); }
  .dc-app__qr svg { display: block; width: 100%; height: auto; }
  .dc-app__caption { display: none; color: rgba(255, 255, 255, 0.85); font-size: 13px; }
  /* Deep-purple text on brand orange (white on orange is only ~3:1). */
  .dc-app__btn {
    grid-area: btn; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px;
    border-radius: 999px; background: linear-gradient(135deg, #ff3700, #ff5c00); color: #1a0838 !important;
    box-shadow: 0 6px 20px rgba(255, 55, 0, 0.3); font-size: 14px; font-weight: 800; text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .dc-app__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 55, 0, 0.5); }

  /* Wider screens: three tall cards with a large, easily scanned QR. */
  @media (min-width: 720px) {
    .dc-app__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .dc-app__card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 22px; text-align: center; }
    .dc-app__cardhead { flex-direction: column; gap: 10px; }
    .dc-app__qr { width: 188px; }
    .dc-app__caption { display: block; }
    .dc-app__btn { align-self: stretch; }
  }