/* ==========================================================================
   MSP Process — Technician Verification page
   Reuses tokens, base, components, home.css, scheduleassist.css, euv.css.
   Brand accent aligned with the home page: brand-green + cyan
   (active/in-progress = cyan, completed/verified = bright green).
   ========================================================================== */

.tv-hero .sa-hero__title-grad,
.tv-final .sa-final__title .grad,
.sa-head__title .tv-grad,
.tv-spot__title .grad {
  background: linear-gradient(135deg, #0a9a56 0%, #00e676 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tv-hero .sa-hero__pulse-eyebrow { color: var(--brand-green); }
.tv-hero .sa-hero__pulse-eyebrow .sa-pulse {
  background: var(--brand-green);
  box-shadow: 0 0 10px var(--brand-green), 0 0 0 4px rgba(10, 154, 86, 0.16);
}
.tv-hero .sa-hero__glow { background: rgba(0, 230, 118, 0.28); }

.tv-final::before { background: rgba(0, 230, 118, 0.28) !important; }
.tv-final .sa-final__eyebrow {
  color: var(--brand-green);
  background: rgba(10, 154, 86, 0.1);
  border-color: rgba(10, 154, 86, 0.32);
}

/* Hero vcard accents — matches home Section 3 (cyan active, green final). */
.tv-hero__card .vcard__live { color: var(--heading); }
.tv-hero__card .vstep__pill--verifying {
  color: var(--brand-cyan);
  background: rgba(0, 186, 251, 0.1);
  border-color: rgba(0, 186, 251, 0.45);
  box-shadow: 0 0 14px rgba(0, 186, 251, 0.3);
}
.vcard.is-tv.is-animated .vstep--final { border-color: rgba(0, 230, 118, 0.5); }
.vcard.is-tv.is-animated .vstep--final .vstep__num {
  background: #00b557; color: #fff; border-color: rgba(0, 200, 83, 0.6);
}

/* EUV lanes (THREAT compare section) — green-tinted "trusted" lane. */
.tv-lanes .euv-lane--green { border-color: rgba(0, 230, 118, 0.32); }
.tv-lanes .euv-lane--green .euv-lane__tag {
  color: var(--brand-green);
  background: rgba(10, 154, 86, 0.1);
  border-color: rgba(10, 154, 86, 0.32);
}
.tv-lanes .euv-lane--green .euv-lane__step::before {
  background: var(--brand-green);
  box-shadow: 0 0 0 1px rgba(10, 154, 86, 0.5);
}

/* Audit log mock — stats strip below the table (TechVerif-only) */
.tv-audit-mock__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tv-audit-mock__stat { padding: 14px 14px; text-align: center; }
.tv-audit-mock__stat + .tv-audit-mock__stat { border-left: 1px solid rgba(255, 255, 255, 0.06); }
.tv-audit-mock__stat b { display: block; font-family: var(--font-brand); font-weight: 500; font-size: 22px; line-height: 1.1; color: #fff; }
.tv-audit-mock__stat span { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-top: 3px; }
.tv-audit-mock__stat--ok b { color: #5af6a8; }
.tv-audit-mock__stat--bad b { color: #ff8888; }
.tv-audit-mock__stat--brand b { color: #00e676; }

/* ==========================================================================
   How It Works — connected-spine flow (non-boxy)
   Replaces the boxy .sa-pipe layout on the TV page only. 4 numbered steps
   sit on a horizontal cyan→green spine with no card chrome; on mobile they
   stack into a vertical rail.
   ========================================================================== */
.tv-flow {
  --node: 70px; --line: 3px;
  position: relative; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1080px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: calc(var(--node) / 2 + 22px) 0 0;
}
/* Horizontal spine — inset to run node-center to node-center */
.tv-flow::before {
  content: ""; position: absolute;
  top: calc(var(--node) / 2 + 22px); left: 12.5%; right: 12.5%;
  height: var(--line); transform: translateY(-50%);
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-green));
  border-radius: 999px;
  z-index: 0;
}
.tv-flow__step { position: relative; text-align: center; }
.tv-flow__num {
  position: absolute; left: 50%; top: -22px;
  transform: translate(-50%, 0);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
  color: var(--brand-cyan);
  z-index: 1;
}
.tv-flow__node {
  position: relative;
  width: var(--node); height: var(--node); border-radius: 50%;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(150deg, var(--brand-cyan), #00bfff);
  box-shadow:
    0 14px 28px -10px rgba(0, 186, 251, 0.55),
    0 0 0 6px var(--bg),
    0 0 0 7px rgba(0, 186, 251, 0.18);
  z-index: 2;
}
.tv-flow__step--final .tv-flow__node {
  background: linear-gradient(150deg, var(--brand-green), #00e676);
  box-shadow:
    0 14px 28px -10px rgba(10, 154, 86, 0.55),
    0 0 0 6px var(--bg),
    0 0 0 7px rgba(10, 154, 86, 0.18);
}
.tv-flow__step--final .tv-flow__num { color: var(--brand-green); }
.tv-flow__node svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tv-flow__name {
  font-family: var(--font-brand); font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.25; letter-spacing: -0.2px;
  color: var(--heading); margin: 0 0 8px;
}
.tv-flow__body {
  font-weight: 300; font-size: 13.5px; line-height: 1.55;
  color: var(--text); margin: 0 auto;
  max-width: 240px;
}

/* Subtle node pulse so the spine reads as alive, not static */
@keyframes tvFlowPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
  .tv-flow__node { animation: tvFlowPulse 3.4s ease-in-out infinite; }
  .tv-flow__step:nth-child(2) .tv-flow__node { animation-delay: 0.35s; }
  .tv-flow__step:nth-child(3) .tv-flow__node { animation-delay: 0.70s; }
  .tv-flow__step:nth-child(4) .tv-flow__node { animation-delay: 1.05s; }
}

/* Tablet: 2-col with row spine off (rails would mis-align across rows) */
@media (max-width: 960px) {
  .tv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding-top: 0; }
  .tv-flow::before { display: none; }
  .tv-flow__step { padding-top: 22px; }
  .tv-flow__num { top: 0; }
}
/* Mobile: vertical rail */
@media (max-width: 560px) {
  .tv-flow {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-left: calc(var(--node) + 22px);
    padding-top: 0;
  }
  .tv-flow::before {
    display: block;
    top: 0; bottom: 0;
    left: calc(var(--node) / 2);
    right: auto;
    width: var(--line); height: auto;
    background: linear-gradient(180deg, var(--brand-cyan), var(--brand-green));
    transform: none;
  }
  .tv-flow__step { text-align: left; padding-top: 0; }
  .tv-flow__node { margin: 0; position: absolute; left: calc(-1 * (var(--node) + 22px)); top: 0; }
  .tv-flow__num { position: static; transform: none; display: block; margin-bottom: 6px; text-align: left; }
  .tv-flow__body { margin-inline: 0; max-width: none; }
}

/* ==========================================================================
   Tech Verification — non-boxy patterns to match the home page + AIVA page.
   Mirrors the .aiva-feat / .outcomes patterns: typography with a thin
   left brand-cyan accent stripe, no card backgrounds, no shadows.
   ========================================================================== */

/* Channel + audit feature lists — 4-col by default, 3-col modifier */
.tv-feats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px clamp(1.5rem, 2.5vw, 2rem);
  max-width: 1180px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}
.tv-feats--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-feat {
  position: relative;
  padding: 22px 4px 22px 22px;
  display: flex; flex-direction: column; gap: 11px;
  border-left: 2px solid rgba(0, 186, 251, 0.18);
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(.2, .7, .2, 1);
}
.tv-feat:hover {
  border-left-color: var(--brand-cyan);
  transform: translateX(2px);
}
.tv-feat__icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--brand-cyan);
  background: linear-gradient(135deg, rgba(0, 186, 251, 0.12), rgba(0, 186, 251, 0.03));
  border: 1px solid rgba(0, 186, 251, 0.24);
}
.tv-feat__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tv-feat__icon img { width: 22px; height: 22px; object-fit: contain; }
.tv-feat__title {
  font-family: var(--font-brand); font-weight: 600;
  font-size: 16.5px; line-height: 1.25; letter-spacing: -0.2px;
  color: var(--heading); margin: 0;
}
.tv-feat__desc {
  font-weight: 300; font-size: 13.5px; line-height: 1.55;
  color: var(--text); margin: 0;
}
.tv-feat__tag {
  align-self: flex-start;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.12em; font-weight: 800; text-transform: uppercase;
  color: var(--brand-cyan);
}
@media (max-width: 1080px) { .tv-feats, .tv-feats--3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tv-feats, .tv-feats--3col { grid-template-columns: 1fr; } }

/* The .tv-audit-mock visualization sits below the feature list. The audit
   mock keeps its dark-card look on purpose — it's a screenshot mock, the
   "card" reads as a UI surface, not section chrome. Just give it some top
   breathing room. */
.tv-audit-mock { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Threat lanes — keep the red/green attack-vs-verified visual but strip
   any heavy outer card chrome inherited from .euv-lane defaults. */
.tv-lanes .euv-lane {
  box-shadow: none;
}

/* TV hero title — shrink the max font so "Your clients trust your team."
 * fits on one line in the copy column (the shared .sa-hero__title at 52px
 * was wrapping the first sentence to 2 lines, total 3 lines). Reduce max
 * to ~38px and add text-wrap: balance for safer breaks at narrower widths. */
.tv-hero .sa-hero__title {
  font-size: clamp(1.625rem, 1rem + 1.7vw, 2.375rem);
  letter-spacing: -0.4px;
  text-wrap: balance;
}