/* TP Context MOBILE R3 — coherent lighting and surface design for public Home.
   Presentation-only, additive, mobile-only. Never applies to dashboard, account,
   Strategy Studio, plans or desktop (> 899px). No layout, data or route changes. */
@media (max-width: 899px) {
  body.tpx-home-active {
    --tp-r3-edge: rgba(92, 153, 190, .34);
    --tp-r3-edge-quiet: rgba(83, 139, 172, .23);
    --tp-r3-surface: linear-gradient(148deg, rgba(21, 43, 60, .94) 0%, rgba(11, 27, 41, .96) 55%, rgba(7, 19, 31, .97) 100%);
    --tp-r3-inset: linear-gradient(150deg, rgba(13, 31, 46, .95), rgba(7, 20, 32, .98));
    --tp-r3-shadow: inset 0 1px 0 rgba(171, 216, 241, .065), 0 12px 30px rgba(0, 4, 13, .23);
    --tp-r3-blue: #87d2f3;
  }

  /* One grid and one restrained sequence of glows across the full homepage.
     The existing grid remains in R2; tone down R15's independent spotlights. */
  body.tpx-home-active .tpx-home-shell .tp-home-content::before {
    background:
      radial-gradient(ellipse 360px 300px at 7% 11%, rgba(24, 146, 190, .105), transparent 76%),
      radial-gradient(ellipse 370px 330px at 95% 38%, rgba(33, 117, 192, .085), transparent 78%),
      radial-gradient(ellipse 310px 300px at 8% 74%, rgba(25, 129, 183, .082), transparent 77%) !important;
    opacity: 1 !important;
  }
  body.tpx-home-active .tpx-home-shell .tp-home-section {
    border-bottom-color: var(--tp-r3-edge-quiet) !important;
  }
  body.tpx-home-active .tpx-topnav {
    background: rgba(6, 18, 29, .91) !important;
    border-bottom-color: var(--tp-r3-edge-quiet) !important;
    box-shadow: 0 8px 28px rgba(0, 5, 15, .13);
  }

  /* A single cyan accent and legible, understated category labels. */
  body.tpx-home-active .tpx-home-shell :is(.tpx-kicker, .tp-eyebrow) {
    color: var(--tp-r3-blue) !important;
    text-shadow: 0 0 20px rgba(32, 159, 213, .08);
  }
  body.tpx-home-active .tpx-home-shell :is(.tp-gradient-text, .tpx-hero h1 span) {
    background-image: linear-gradient(104deg, #85cae8 0%, #56c5ec 48%, #5b99f7 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Reference workstation, three-step explanation and broker disclaimer. */
  body.tpx-home-active .tpx-terminal {
    border-color: var(--tp-r3-edge) !important;
    box-shadow: var(--tp-r3-shadow), 0 0 38px rgba(28, 129, 184, .075) !important;
  }
  body.tpx-home-active .tpx-terminal-top {
    background: linear-gradient(180deg, #102438, #091b2b) !important;
    border-bottom-color: var(--tp-r3-edge-quiet) !important;
  }
  body.tpx-home-active .tpx-process-card,
  body.tpx-home-active .tpx-trust-bar {
    background: var(--tp-r3-surface) !important;
    border-color: var(--tp-r3-edge) !important;
    box-shadow: var(--tp-r3-shadow) !important;
  }
  body.tpx-home-active .tpx-process-icon,
  body.tpx-home-active .tpx-process-number {
    border-color: var(--tp-r3-edge) !important;
    box-shadow: inset 0 1px 0 rgba(171, 216, 241, .065);
  }

  /* One panel material for the demo, examples, illustrations and testimonials.
     Keep active demo states more prominent than inactive controls. */
  body.tpx-home-active .tp-home-content .tp-demo-panel,
  body.tpx-home-active .tp-home-content .tp-scenario-board,
  body.tpx-home-active .tp-home-content .tp-testimonial,
  body.tpx-home-active .tp-home-content .tp-faq-item,
  body.tpx-home-active #tpHomeQuickActions .tp-home-quick-card {
    background: var(--tp-r3-surface) !important;
    border-color: var(--tp-r3-edge) !important;
    box-shadow: var(--tp-r3-shadow) !important;
  }
  body.tpx-home-active .tp-home-content .tp-demo-status,
  body.tpx-home-active .tp-home-content .tp-scenario-flow li,
  body.tpx-home-active .tp-home-content .tp-alert-card {
    border-color: var(--tp-r3-edge-quiet) !important;
  }
  body.tpx-home-active .tp-home-content .tp-demo-status,
  body.tpx-home-active .tp-home-content .tp-alert-card {
    background: var(--tp-r3-inset) !important;
    box-shadow: inset 0 1px 0 rgba(168, 219, 250, .045);
  }
  body.tpx-home-active .tp-home-content .tp-demo-toolbar,
  body.tpx-home-active .tp-home-content .tp-alert-card a {
    border-color: var(--tp-r3-edge-quiet) !important;
  }
  body.tpx-home-active .tp-home-content .tp-demo-steps button:not([aria-pressed="true"]),
  body.tpx-home-active .tp-home-content .tp-scenario-choices button:not([aria-pressed="true"]) {
    background: var(--tp-r3-inset) !important;
    border-color: var(--tp-r3-edge-quiet) !important;
    box-shadow: inset 0 1px 0 rgba(168, 219, 250, .035);
  }
  body.tpx-home-active .tp-home-content .tp-demo-steps button[aria-pressed="true"],
  body.tpx-home-active .tp-home-content .tp-scenario-choices button[aria-pressed="true"] {
    background: linear-gradient(125deg, rgba(32, 72, 94, .97), rgba(13, 37, 55, .97)) !important;
    border-color: rgba(105, 199, 239, .73) !important;
    box-shadow: inset 3px 0 0 #67d1f1, 0 6px 20px rgba(14, 69, 110, .13) !important;
  }
  body.tpx-home-active .tp-home-content .tp-faq-item[open] {
    border-color: rgba(104, 188, 223, .61) !important;
    box-shadow: var(--tp-r3-shadow), inset 3px 0 0 rgba(95, 200, 239, .5) !important;
  }
  body.tpx-home-active .tp-home-content .tp-chip {
    color: #a0d9f2 !important;
    border-color: var(--tp-r3-edge) !important;
    background: rgba(29, 58, 78, .66) !important;
  }
  body.tpx-home-active .tp-home-content .tp-carousel-controls button {
    background: var(--tp-r3-inset) !important;
    border-color: var(--tp-r3-edge) !important;
    box-shadow: inset 0 1px 0 rgba(171, 216, 241, .055);
  }
  body.tpx-home-active .tp-home-content .tp-avatar {
    border-color: rgba(108, 179, 215, .47) !important;
  }

  /* Teal is reserved for the primary conversion action; blue for information. */
  body.tpx-home-active .tpx-button-primary,
  body.tpx-home-active .tp-home-content .tp-home-button {
    background: linear-gradient(125deg, #27a7de 0%, #1190c6 100%) !important;
    border-color: rgba(94, 198, 243, .54) !important;
    color: #051a23 !important;
    box-shadow: inset 0 1px 0 rgba(216, 243, 255, .26), 0 10px 25px rgba(18, 140, 192, .15) !important;
  }
  body.tpx-home-active .tpx-button-secondary {
    background: linear-gradient(130deg, rgba(27, 53, 77, .95), rgba(13, 31, 49, .98)) !important;
    border-color: var(--tp-r3-edge) !important;
    box-shadow: inset 0 1px 0 rgba(171, 216, 241, .055) !important;
  }
  body.tpx-home-active .tp-home-content :is(.tp-text-link, .tp-text-action, .tp-alert-card a) {
    color: var(--tp-r3-blue) !important;
  }
  body.tpx-home-active .tp-home-content .tp-final-cta {
    border-color: var(--tp-r3-edge) !important;
    background:
      radial-gradient(ellipse at 48% -35%, rgba(50, 156, 191, .24), transparent 72%),
      var(--tp-r3-surface) !important;
    box-shadow: var(--tp-r3-shadow), 0 0 35px rgba(33, 134, 185, .075) !important;
  }
  body.tpx-home-active .tp-home-content .tp-radar-core {
    border-color: rgba(101, 171, 211, .55) !important;
    box-shadow: 0 0 0 10px rgba(30, 122, 168, .07), 0 0 45px rgba(26, 149, 197, .17) !important;
  }
}