/* ========================================================================
   3RD-I — LIVE + HUMAN TRUST RAIL
   Isolated, dependency-free styles. Add after the existing homepage CSS.
   ======================================================================== */

.thirdi-trust-rail-wrap,
.thirdi-trust-rail-wrap * {
  box-sizing: border-box;
}

.thirdi-trust-rail-wrap {
  --thirdi-ink: #151b3c;
  --thirdi-muted: #68708a;
  --thirdi-pink: #f52c8f;
  --thirdi-violet: #8a58f2;
  --thirdi-blue: #5877f8;
  --thirdi-rule: rgba(59, 67, 101, 0.12);
  --thirdi-surface: rgba(255, 255, 255, 0.82);
  --thirdi-surface-strong: rgba(255, 255, 255, 0.94);
  --thirdi-spot-x: 50%;
  --thirdi-spot-y: 50%;

  position: relative;
  z-index: 8;
  width: min(1220px, calc(100% - 40px));
  margin: clamp(26px, 3.2vw, 44px) auto clamp(18px, 2.4vw, 34px);
  isolation: isolate;
}

.thirdi-trust-rail {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(220px, 0.95fr)
    minmax(190px, 0.86fr)
    minmax(280px, 1.28fr)
    minmax(220px, 0.98fr);
  align-items: stretch;
  width: 100%;
  min-height: 94px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;

  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.93), rgba(248, 249, 255, 0.78));
  box-shadow:
    0 24px 60px rgba(38, 46, 84, 0.12),
    0 5px 16px rgba(38, 46, 84, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);

  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

/* Cursor-following highlight. It is subtle on purpose. */
.thirdi-trust-rail::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      280px circle at var(--thirdi-spot-x) var(--thirdi-spot-y),
      rgba(245, 44, 143, 0.10),
      rgba(99, 107, 246, 0.055) 42%,
      transparent 72%
    );
  transition: opacity 220ms ease;
}

.thirdi-trust-rail.is-engaged::before,
.thirdi-trust-rail.is-tapped::before {
  opacity: 1;
}

/* Crisp top edge that keeps the glass treatment from looking foggy. */
.thirdi-trust-rail::after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 28px;
  left: 28px;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}

.thirdi-trust-rail__item {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 19px clamp(16px, 1.8vw, 28px);
  color: var(--thirdi-ink);
  font: inherit;
}

.thirdi-trust-rail__item + .thirdi-trust-rail__item::before {
  position: absolute;
  top: 23%;
  bottom: 23%;
  left: 0;
  width: 1px;
  content: "";
  background: linear-gradient(180deg, transparent, var(--thirdi-rule) 18%, var(--thirdi-rule) 82%, transparent);
}

.thirdi-trust-rail__label {
  min-width: 0;
  color: var(--thirdi-ink);
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  font-weight: 650;
  line-height: 1.26;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ------------------------------------------------------------------------
   Custom 2D icon system — no emoji, no external icon library.
   ------------------------------------------------------------------------ */

.thirdi-trust-rail__icon {
  display: grid;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(96, 103, 148, 0.10);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 7px 17px rgba(40, 49, 92, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.thirdi-trust-rail__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thirdi-trust-rail__icon--download {
  color: var(--thirdi-blue);
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)) padding-box,
    linear-gradient(145deg, rgba(88,119,248,.20), rgba(138,88,242,.08)) border-box;
}

.thirdi-trust-rail__icon--person {
  color: #d953b9;
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)) padding-box,
    linear-gradient(145deg, rgba(245,44,143,.18), rgba(138,88,242,.10)) border-box;
}

.thirdi-trust-rail__icon--shield {
  color: #6869e9;
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)) padding-box,
    linear-gradient(145deg, rgba(88,119,248,.18), rgba(245,44,143,.08)) border-box;
}

/* Icon palettes for the /enterprise rail (same treatment, page-specific glyphs). */
.thirdi-trust-rail__icon--building {
  color: var(--thirdi-blue);
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)) padding-box,
    linear-gradient(145deg, rgba(88,119,248,.20), rgba(138,88,242,.08)) border-box;
}

.thirdi-trust-rail__icon--control {
  color: #d953b9;
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)) padding-box,
    linear-gradient(145deg, rgba(245,44,143,.18), rgba(138,88,242,.10)) border-box;
}

.thirdi-trust-rail__icon--nolocation {
  color: #6869e9;
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)) padding-box,
    linear-gradient(145deg, rgba(88,119,248,.18), rgba(245,44,143,.08)) border-box;
}

/* /product rail: its longest label ("Safety Agent monitoring on every plan") sits in the
   LAST column, unlike home where the long label is column 3 — rebalance the widths. */
.thirdi-trust-rail--product {
  grid-template-columns:
    minmax(210px, 0.94fr)
    minmax(180px, 0.84fr)
    minmax(190px, 0.9fr)
    minmax(280px, 1.3fr);
}

/* ------------------------------------------------------------------------
   LIVE + HUMAN — replaces the generic pulsing dot.
   The bars move asynchronously, like an active connection—not an AI orb.
   ------------------------------------------------------------------------ */

.thirdi-live-chip {
  position: relative;
  display: inline-flex;
  min-width: 184px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px 12px 17px;
  overflow: hidden;

  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(92deg, rgba(255,255,255,.93), rgba(255,255,255,.82)) padding-box,
    linear-gradient(110deg, rgba(245,44,143,.65), rgba(138,88,242,.48), rgba(88,119,248,.52)) border-box;
  box-shadow:
    0 8px 24px rgba(128, 62, 190, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);

  transition:
    transform 190ms ease,
    box-shadow 190ms ease,
    background 190ms ease;
}

.thirdi-live-chip::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -36%;
  width: 34%;
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.74), transparent);
}

.thirdi-trust-rail.is-visible .thirdi-live-chip::before {
  animation: thirdi-live-sheen 5.6s 1.2s ease-in-out infinite;
}

.thirdi-trust-rail.is-engaged .thirdi-live-chip,
.thirdi-trust-rail.is-tapped .thirdi-live-chip {
  transform: translateY(-2px);
  box-shadow:
    0 13px 30px rgba(128, 62, 190, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.thirdi-live-chip__label {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  color: #242744;
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.075em;
}

.thirdi-live-chip__live {
  color: var(--thirdi-pink);
}

.thirdi-live-chip__plus {
  color: #a143ca;
  font-weight: 800;
}

.thirdi-live-chip__signal {
  display: inline-flex;
  flex: 0 0 auto;
  width: 27px;
  height: 19px;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.thirdi-live-chip__bar {
  display: block;
  width: 3.5px;
  min-height: 4px;
  border-radius: 999px;
  transform: scaleY(.35);
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, var(--thirdi-pink), var(--thirdi-violet) 55%, var(--thirdi-blue));
  box-shadow: 0 0 8px rgba(138, 88, 242, 0.24);
  animation-name: thirdi-signal-wave;
  animation-timing-function: cubic-bezier(.42, 0, .58, 1);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.thirdi-live-chip__bar:nth-child(1) {
  height: 10px;
  animation-duration: 1.15s;
  animation-delay: -0.44s;
}

.thirdi-live-chip__bar:nth-child(2) {
  height: 17px;
  animation-duration: .92s;
  animation-delay: -0.13s;
}

.thirdi-live-chip__bar:nth-child(3) {
  height: 13px;
  animation-duration: 1.34s;
  animation-delay: -0.71s;
}

.thirdi-live-chip__bar:nth-child(4) {
  height: 18px;
  animation-duration: 1.04s;
  animation-delay: -0.27s;
}

.thirdi-trust-rail.is-visible .thirdi-live-chip__bar {
  animation-play-state: running;
}

/* The signal becomes a little more energetic when the user engages the rail. */
.thirdi-trust-rail.is-engaged .thirdi-live-chip__bar:nth-child(1),
.thirdi-trust-rail.is-tapped .thirdi-live-chip__bar:nth-child(1) { animation-duration: .68s; }
.thirdi-trust-rail.is-engaged .thirdi-live-chip__bar:nth-child(2),
.thirdi-trust-rail.is-tapped .thirdi-live-chip__bar:nth-child(2) { animation-duration: .53s; }
.thirdi-trust-rail.is-engaged .thirdi-live-chip__bar:nth-child(3),
.thirdi-trust-rail.is-tapped .thirdi-live-chip__bar:nth-child(3) { animation-duration: .76s; }
.thirdi-trust-rail.is-engaged .thirdi-live-chip__bar:nth-child(4),
.thirdi-trust-rail.is-tapped .thirdi-live-chip__bar:nth-child(4) { animation-duration: .59s; }

@keyframes thirdi-signal-wave {
  0%, 100% { transform: scaleY(.34); opacity: .74; }
  22%      { transform: scaleY(.88); opacity: 1; }
  48%      { transform: scaleY(.52); opacity: .86; }
  72%      { transform: scaleY(1); opacity: 1; }
}

@keyframes thirdi-live-sheen {
  0%, 64%, 100% { left: -36%; opacity: 0; }
  72%           { opacity: .74; }
  88%           { left: 112%; opacity: 0; }
}

/* ------------------------------------------------------------------------
   Responsive layout
   ------------------------------------------------------------------------ */

@media (max-width: 1040px) {
  .thirdi-trust-rail {
    grid-template-columns: 1fr 1fr;
  }

  .thirdi-trust-rail__item {
    min-height: 82px;
    justify-content: flex-start;
    padding-inline: clamp(20px, 4vw, 38px);
  }

  .thirdi-trust-rail__item + .thirdi-trust-rail__item::before {
    display: none;
  }

  .thirdi-trust-rail__item:nth-child(odd)::after {
    position: absolute;
    top: 20%;
    right: 0;
    bottom: 20%;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, transparent, var(--thirdi-rule), transparent);
  }

  .thirdi-trust-rail__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--thirdi-rule);
  }

  .thirdi-live-chip {
    width: min(100%, 230px);
  }
}

@media (max-width: 620px) {
  .thirdi-trust-rail-wrap {
    width: min(100% - 24px, 520px);
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .thirdi-trust-rail {
    border-radius: 20px;
  }

  .thirdi-trust-rail__item {
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 14px 11px;
    text-align: center;
  }

  .thirdi-trust-rail__item--live {
    align-items: center;
  }

  .thirdi-trust-rail__item:nth-child(odd)::after {
    top: 14%;
    bottom: 14%;
  }

  .thirdi-live-chip {
    min-width: 0;
    width: auto;
    max-width: 100%;
    gap: 10px;
    padding: 11px 12px 11px 14px;
  }

  .thirdi-live-chip__label {
    font-size: 10.5px;
    letter-spacing: .055em;
  }

  .thirdi-live-chip__signal {
    width: 22px;
    height: 17px;
    gap: 2.5px;
  }

  .thirdi-live-chip__bar {
    width: 3px;
  }

  .thirdi-trust-rail__icon {
    width: 39px;
    height: 39px;
  }

  .thirdi-trust-rail__icon svg {
    width: 20px;
    height: 20px;
  }

  .thirdi-trust-rail__label {
    max-width: 150px;
    font-size: 12px;
    line-height: 1.22;
  }
}

/* ------------------------------------------------------------------------
   Dark mode. Map these selectors to the site's actual theme hook if needed.
   ------------------------------------------------------------------------ */

html[data-theme="dark"] .thirdi-trust-rail-wrap,
html.dark .thirdi-trust-rail-wrap,
body.dark .thirdi-trust-rail-wrap {
  --thirdi-ink: #f3f5ff;
  --thirdi-muted: #b5bbd2;
  --thirdi-rule: rgba(214, 219, 255, 0.12);
}

html[data-theme="dark"] .thirdi-trust-rail,
html.dark .thirdi-trust-rail,
body.dark .thirdi-trust-rail {
  border-color: rgba(215, 220, 255, 0.13);
  background: linear-gradient(135deg, rgba(22, 27, 52, 0.90), rgba(17, 22, 45, 0.80));
  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,.07);
}

html[data-theme="dark"] .thirdi-trust-rail__icon,
html.dark .thirdi-trust-rail__icon,
body.dark .thirdi-trust-rail__icon {
  background: rgba(38, 44, 78, 0.84);
  border-color: rgba(219, 223, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .thirdi-live-chip,
html.dark .thirdi-live-chip,
body.dark .thirdi-live-chip {
  background:
    linear-gradient(92deg, rgba(34,39,70,.96), rgba(28,33,62,.90)) padding-box,
    linear-gradient(110deg, rgba(245,44,143,.78), rgba(138,88,242,.58), rgba(88,119,248,.62)) border-box;
}

html[data-theme="dark"] .thirdi-live-chip__label,
html.dark .thirdi-live-chip__label,
body.dark .thirdi-live-chip__label {
  color: #f5f6ff;
}

/* Accessibility: no continuous motion for users who disable animation. */
@media (prefers-reduced-motion: reduce) {
  .thirdi-trust-rail,
  .thirdi-live-chip,
  .thirdi-live-chip::before,
  .thirdi-live-chip__bar {
    animation: none !important;
    transition: none !important;
  }

  .thirdi-live-chip__bar:nth-child(1) { transform: scaleY(.45); }
  .thirdi-live-chip__bar:nth-child(2) { transform: scaleY(.82); }
  .thirdi-live-chip__bar:nth-child(3) { transform: scaleY(.61); }
  .thirdi-live-chip__bar:nth-child(4) { transform: scaleY(1); }
}

/* Large monitors: match the widened content column (app.css 1720px pass). */
@media (min-width: 1720px) {
  .thirdi-trust-rail-wrap { width: min(1380px, calc(100% - 40px)); }
}
@media (min-width: 2400px) {
  .thirdi-trust-rail-wrap { width: min(1510px, calc(100% - 40px)); }
}