/* ═══════════════════════════════════════════════════════════════════════════
   IND-COMPONENTS — VSHR industry component styles
   Extracted 2026-04-17 from template-industries-retail.blade.php inline <style>
   (the source-of-truth for industry hero + mockup + pain/audience/case/proof/
   insurance-scroll/solvex styling that Ryan's visual calibration is based on).

   MOBILE-FIRST: rules below mostly come from the original bloated template,
   which was DESKTOP-FIRST. Some @media (max-width:...) rules remain. Future
   refactor pass can invert these to min-width: but only after the visual
   regression risk is cleared.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── HERO CTA BUTTONS (Phase 6 fix 2026-04-17) ──────────────────── */
/* Extracted from template-industries-retail.blade.php inline style.
   .btn-blue-solid has IDENTICAL styling to .btn-orange-solid (legacy
   naming artifact — class says "blue" but background is orange). Both
   behave as the primary orange CTA. */

.btn-orange-solid,
.btn-blue-solid {display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-b); font-size: 15px; font-weight: 700;
      color: #fff; background: var(--orange);
      padding: 14px 28px; border-radius: 10px;
      transition: all .2s var(--ease); cursor: pointer; border: none;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(249,115,22,.25);}
.btn-orange-solid:hover,
.btn-blue-solid:hover {background: #EA6C10; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.4);}
.btn-orange-solid {display: inline-flex; align-items: center; gap: 8px;
      background: var(--orange); color: #fff; border: none; border-radius: 10px;
      padding: 14px 28px; font-family: var(--font-b); font-size: 15px; font-weight: 700;
      text-decoration: none; cursor: pointer; width: fit-content;
      transition: background .2s, transform .2s;}
.btn-orange-solid:hover {background: #EA580C; transform: translateY(-2px);}
.btn-ghost-light {display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-b); font-size: 14px; font-weight: 600;
      color: rgba(255,255,255,.7);
      background: transparent; border: none; cursor: pointer;
      transition: color .15s;
      padding: 14px 8px;}
.btn-ghost-light:hover {color: var(--white);}
.btn-white-solid {display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-b); font-size: 16px; font-weight: 700;
      color: var(--navy); background: var(--white);
      padding: 16px 36px; border-radius: 10px;
      border: none; cursor: pointer;
      transition: all .2s var(--ease);
      box-shadow: 0 4px 16px rgba(0,0,0,.15);}
.btn-white-solid:hover {transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 28px rgba(0,0,0,.2);}
.btn-outline {color: inherit !important; text-decoration: none !important;}



/* -- GRADIENT SECTION DIVIDER --------------------------------- */
    .sec-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
      margin: 0 auto;
      max-width: 1200px;
    }
/* =============================================================
       RETAIL VERTICAL
    ============================================================= */

    /* -- HERO ----------------------------------------------------- */
    .ind-hero {
      background-image:
        radial-gradient(rgba(249,115,22,.06) 1px, transparent 1px),
        radial-gradient(ellipse 70% 50% at 50% 40%, rgba(249,115,22,.08), transparent 70%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
      background-size: 20px 20px, 100% 100%, 100% 100%;
      position: relative;
      overflow: hidden;
      padding: 48px 32px 48px;
    }
.ind-hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 70% at 75% 10%, rgba(249,115,22,.15) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 10% 80%, rgba(56,178,172,.08) 0%, transparent 50%);
      pointer-events: none;
    }
.ind-hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
    }
/* Animated gradient orbs */
    .ind-hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
    }
.ind-hero-orb-1 {
      width: 400px; height: 400px;
      background: rgba(249,115,22,.18);
      top: -10%; right: 5%;
      animation: ind-orb-float-1 8s ease-in-out infinite;
    }
.ind-hero-orb-2 {
      width: 300px; height: 300px;
      background: rgba(56,178,172,.14);
      bottom: -5%; left: 10%;
      animation: ind-orb-float-2 10s ease-in-out infinite;
    }
.ind-hero-orb-3 {
      width: 200px; height: 200px;
      background: rgba(41,171,226,.08);
      top: 40%; left: 40%;
      animation: ind-orb-float-3 12s ease-in-out infinite;
    }
.ind-hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      /* Foundation refactor 2026-04-17: was `1.1fr 1fr` which auto-inflated
         to content min-content when children have width: max-content (the
         trust marquee track). Track grew to 1469px at 1280 viewport and
         pushed the visual column off-screen. Using minmax(0, Xfr) lets
         each track shrink below min-content so max-content children are
         clipped by the track, not the other way around. */
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 2;
    }
.ind-hero-text h1 {
      font-family: var(--font-h);
      font-size: 30px;
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -1.2px;
      color: var(--white);
      margin-bottom: 20px;
    }
.ind-hero-text h1 .ind-accent {
      color: var(--orange);
    }
.ind-hero-text .ind-sub {
      font-family: var(--font-b);
      font-size: 17px;
      color: rgba(255,255,255,.82);
      line-height: 1.72;
      max-width: 500px;
      margin-bottom: 24px;
    }
.ind-hero-ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }
.ind-trust-badges{
      display: flex; gap: 20px; flex-wrap: wrap;
    }
.ind-badge{
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-b); font-size: 12px; font-weight: 600;
      color: rgba(255,255,255,.74);
      letter-spacing: .3px;
      animation: ind-badge-float 3s ease-in-out infinite;
      background: rgba(255,255,255,.04);
      padding: 6px 12px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,.06);
      transition: color .2s, border-color .2s;
    }
.ind-badge:nth-child(2) { animation-delay: .4s; }
.ind-badge:nth-child(3) { animation-delay: .8s; }
.ind-badge:hover { color: rgba(255,255,255,.7); border-color: rgba(249,115,22,.25); }
.ind-badge svg{ width: 14px; height: 14px; stroke: var(--orange); fill: none; stroke-width: 2; }
/* ── HERO DASHBOARD MOCKUP ─────────────────────────── */
    .ind-hero-visual { display: flex; align-items: center; justify-content: center; }
.ind-mockup {
      width: 100%; max-width: 420px;
      background: rgba(255,255,255,.12);
      -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 20px;
      box-shadow: 0 0 0 .5px rgba(255,255,255,.2), 0 4px 24px rgba(0,0,0,.25), 0 16px 56px rgba(0,0,0,.2);
      overflow: hidden;
    }
.im-header {
      padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
      display: flex; justify-content: space-between; align-items: center;
    }
.im-title { font-family: var(--font-h); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); }
.im-badge {
      /* High-contrast pill (2026-05-20). Old pale-blue/pale-blue combo
         was invisible against the white mockup card. Solid blue + white
         text now reads at WCAG AA across all 17 industry mockups. */
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 0.03em;
      background: var(--blue, #1479A3); color: #fff;
      padding: 4px 11px; border-radius: 20px;
      box-shadow: 0 1px 2px rgba(20, 121, 163, 0.25);
    }
.im-body { padding: 16px 22px 20px; }
.im-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 14px;
    }
.im-stat {
      background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
      border-radius: 10px; padding: 11px 12px;
      min-width: 0;
    }
.im-stat-label{
      font-family: var(--font-b); font-size: 9.5px; font-weight: 600;
      color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .5px;
      margin-bottom: 4px; line-height: 1.25;
      white-space: normal;
      word-break: keep-all;
    }
.im-stat-value{ font-family: var(--font-h); font-size: 20px; font-weight: 700; color: #fff; line-height: 1.1; }
.im-list { list-style: none; padding: 0; margin: 0; }
.im-list li {
      display: flex; align-items: center; gap: 10px; padding: 9px 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
      font-family: var(--font-b); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9);
    }
.im-list li:last-child { border-bottom: none; }
.im-check {
      width: 20px; height: 20px; border-radius: 50%; background: rgba(34,197,94,.15);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
.im-check svg { width: 12px; height: 12px; stroke: #22C55E; fill: none; stroke-width: 2.5; }
.im-footer {
      padding: 12px 22px; border-top: 1px solid rgba(255,255,255,.06);
      font-family: var(--font-b); font-size: 12px; font-weight: 500; color: rgba(255,255,255,.7); text-align: center;
    }
/* -- CHALLENGES ----------------------------------------------- */
    .ind-challenges {
      padding: 80px 32px;
      background: var(--white);
    }
.ind-challenges .sec-head {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 48px;
    }
.pain-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
.pain-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 28px 22px;
      border-top: 1px solid rgba(13, 24, 41, 0.12);
      transition: all .35s var(--ease);
    }
/* Foundation refactor 2026-04-17: deleted per-nth-child rainbow border-top
   colors (orange/blue/teal/magenta/purple/green). Single neutral border-top
   inherited from .pain-card base rule. Restraint over decoration. */
.pain-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 24px rgba(7,25,46,.10), 0 16px 48px rgba(7,25,46,.06);
    }
.pain-card:hover .pain-icon {
      animation: pain-icon-pulse .6s var(--ease);
    }
.pain-icon {
      position: relative;
      width: 64px; height: 64px;
      margin-bottom: 16px;
      color: var(--navy, #07192E);
      transition: transform .3s var(--ease);
      display: inline-flex; align-items: center; justify-content: center;
    }
.pain-icon::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, currentColor 0%, transparent 70%);
      opacity: .14;
    }
.pain-icon::after {
      content: ''; position: absolute; inset: 6px;
      border-radius: 50%;
      border: 1px solid currentColor; opacity: .28;
    }
/* Foundation refactor 2026-04-17: deleted per-nth-child rainbow icon colors.
   Icon inherits single navy from .pain-icon base. */
.pain-icon svg { width: 32px; height: 32px; position: relative; z-index: 1; }
.pain-card h3 {
      font-family: var(--font-h);
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 10px;
      letter-spacing: -.2px;
      line-height: 1.3;
    }
.pain-card p {
      font-family: var(--font-b);
      font-size: 13.5px;
      color: #4A5568;
      line-height: 1.6;
      margin-bottom: 16px;
    }
.pain-anchor {
      font-family: var(--font-b);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--blue-dark);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap .2s;
    }
.pain-anchor:hover { gap: 7px; }
/* -- HOW WE SOLVE --------------------------------------------- */
    .ind-solutions {
      padding: 80px 32px;
      background: var(--off);
    }
.ind-solutions .sec-head {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 56px;
    }
/* -- CASE STUDY ----------------------------------------------- */
    .ind-case {
      padding: 80px 32px;
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
.ind-case::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 40% 50% at 80% 20%, rgba(249,115,22,.08) 0%, transparent 60%),
        radial-gradient(ellipse 30% 40% at 15% 75%, rgba(41,171,226,.06) 0%, transparent 50%);
      pointer-events: none;
    }
.case-inner {
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
.case-label{
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px;
      text-align: center;
    }
.case-inner > h2 {
      font-family: var(--font-h);
      font-size: 24px;
      font-size: clamp(24px, 3vw, 34px);
      font-weight: 800;
      color: var(--white);
      text-align: center;
      margin-bottom: 48px;
      letter-spacing: -.5px;
      line-height: 1.2;
    }
.case-glass {
      background: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
      border: 1px solid rgba(255,255,255,.18);
      -webkit-backdrop-filter: blur(32px) saturate(1.4);
      backdrop-filter: blur(32px) saturate(1.4);
      border-radius: 20px;
      padding: 44px 40px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 20px rgba(249,115,22,.04),
        0 8px 32px rgba(0,0,0,.25),
        0 24px 64px rgba(0,0,0,.12);
      position: relative;
    }
.case-block {
      margin-bottom: 36px;
      position: relative;
      padding-left: 24px;
    }
.case-block:last-child { margin-bottom: 0; }
.case-block::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 8px rgba(249,115,22,.4);
    }
.case-block::after {
      content: '';
      position: absolute;
      left: 3px;
      top: 18px;
      width: 2px;
      bottom: -28px;
      background: linear-gradient(180deg, rgba(249,115,22,.3) 0%, rgba(249,115,22,.05) 100%);
    }
.case-block:last-child::after { display: none; }
.case-block:nth-child(2)::before { animation: case-dot-pulse 2s ease-in-out infinite .3s; }
.case-block:nth-child(3)::before { animation: case-dot-pulse 2s ease-in-out infinite .6s; }
.case-block:nth-child(4)::before { animation: case-dot-pulse 2s ease-in-out infinite .9s; }
.case-block h3 {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      color: var(--orange);
      margin-bottom: 12px;
      letter-spacing: -.1px;
    }
.case-block p {
      font-family: var(--font-b);
      font-size: 15px;
      color: rgba(255,255,255,.88);
      line-height: 1.7;
    }
.case-checklist {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 24px;
      margin-top: 8px;
    }
.case-check {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-b);
      font-size: 14px;
      color: rgba(255,255,255,.7);
    }
.case-check svg {
      width: 18px; height: 18px;
      stroke: var(--orange);
      fill: none;
      stroke-width: 2.5;
      flex-shrink: 0;
    }
.case-quote {
      border-left: 3px solid var(--orange);
      padding-left: 24px;
      margin-top: 8px;
    }
.case-quote p {
      font-family: var(--font-b);
      font-size: 18px;
      font-weight: 500;
      color: rgba(255,255,255,.85);
      font-style: italic;
      line-height: 1.6;
    }
/* -- PROOF STRIP -- language proofs (claim + supporting detail) ----- */
    .proof-strip {
      background: #FFF7ED;
      padding: 48px 24px;
    }
.proof-inner {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 28px 32px;
      text-align: center;
    }
.proof-inner > div {
      flex: 0 1 180px;
      min-width: 0;
      max-width: 220px;
    }
.proof-stat-n {
      font-family: var(--font-h);
      font-size: 18px;
      font-weight: 700;
      color: #07192E;
      line-height: 1.25;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
.proof-stat-l {
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #64748B;
      line-height: 1.4;
    }
/* -- SERVICES FOR RETAIL -------------------------------------- */
    .ind-services {
      padding: 80px 32px;
      background: var(--white);
    }
.ind-services .sec-head {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 48px;
    }
/* -- CTA ------------------------------------------------------ */
    .ind-cta {
      padding: 100px 32px;
      background: linear-gradient(135deg, #B45309 0%, #EA580C 50%, var(--orange) 100%);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
.ind-cta::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(
          -45deg,
          transparent 0px,
          transparent 40px,
          rgba(255,255,255,.015) 40px,
          rgba(255,255,255,.015) 42px
        );
      pointer-events: none;
    }
.ind-cta-inner {
      max-width: 700px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
.ind-cta h2 {
      font-family: var(--font-h);
      font-size: 26px;
      font-size: clamp(26px, 3.5vw, 40px);
      font-weight: 800;
      color: var(--white);
      margin-bottom: 18px;
      letter-spacing: -.8px;
      line-height: 1.15;
    }
.ind-cta p {
      font-family: var(--font-b);
      font-size: 16px;
      color: rgba(255,255,255,.7);
      line-height: 1.65;
      margin-bottom: 36px;
      max-width: 580px;
      margin-left: auto;
      margin-right: auto;
    }
.ind-cta .phone-link {
      display: block;
      margin-top: 16px;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,.76);
      transition: color .15s;
    }
.ind-cta .phone-link:hover { color: var(--white); }
.ind-hero .reveal { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .28s; }
.reveal-d4 { transition-delay: .38s; }
.reveal-d5 { transition-delay: .48s; }
.reveal-d6 { transition-delay: .58s; }
/* ── YOUR TEAM SECTION ─────────────────────────── */
    .ind-advisor-sec { background: var(--off); }
.ind-advisor-sec .eyebrow {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue-dark);
      margin-bottom: 10px;
    }
.ind-advisor-sec .sec-h2 {
      font-family: var(--font-h); font-size: clamp(24px, 3.2vw, 36px);
      font-weight: 800; color: var(--navy); letter-spacing: -.6px; line-height: 1.2;
    }
.ind-adv-layout {
      display: grid; grid-template-columns: 45fr 55fr; gap: 56px;
      align-items: center;
    }
.ind-adv-photo-wrap {
      display: flex; justify-content: center; position: relative;
    }
.ind-adv-photo-bg {
      position: absolute; width: 280px; height: 280px; border-radius: 50%;
      background: rgba(41,171,226,.10);
      top: 50%; left: 50%;
      transform: translate(calc(-50% + 20px), calc(-50% + 20px));
    }
.ind-adv-photo {
      width: 280px; height: 280px; border-radius: 50%;
      background: linear-gradient(145deg, var(--off) 0%, #fff 100%);
      border: 2px solid var(--blue); box-shadow: var(--glass-shadow);
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1; overflow: hidden;
    }
.ind-adv-photo svg { width: 96px; height: 96px; stroke: var(--muted); fill: none; stroke-width: 1; opacity: 0.5; }
.ind-adv-text h2 { margin-bottom: 24px; }
.ind-adv-text p { font-family: var(--font-b); font-size: 1rem; font-weight: 400; color: var(--text); line-height: 1.75; margin-bottom: 16px; }
.ind-adv-pullquote {
      font-family: var(--font-h); font-weight: 600; font-size: 1.25rem;
      color: var(--navy); line-height: 1.45; padding-left: 20px;
      border-left: 3px solid var(--orange); margin: 24px 0;
    }
.ind-adv-micro { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.ind-adv-micro-item {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 500; color: var(--navy);
    }
.ind-adv-micro-item svg { width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 2.5; flex-shrink: 0; }
.ind-adv-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.ind-adv-cta .btn-orange-solid {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--orange); color: #fff; border: none; border-radius: 10px;
      padding: 14px 28px; font-family: var(--font-b); font-size: 15px; font-weight: 700;
      text-decoration: none; cursor: pointer; width: fit-content;
      transition: background .2s, transform .2s;
    }
.ind-adv-cta .btn-orange-solid:hover { background: #EA580C; transform: translateY(-2px); }
.ind-adv-team-link {
      font-family: var(--font-b); font-size: 13px; font-weight: 600;
      color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    }
.ind-adv-team-link:hover { color: var(--blue-dark); text-decoration: underline; }
.ind-faq { padding: 80px 32px; background: var(--white); }
.ind-faq .sec-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
/* ── WHO WE SERVE ─────────────────────────── */
    .ind-audience { padding: 80px 32px; background: var(--white); }
.ind-audience .sec-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.audience-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.audience-card {
      background: var(--off); border: 1px solid var(--border); border-radius: 16px;
      padding: 32px 28px; text-align: center; transition: all .3s var(--ease);
      position: relative; overflow: hidden;
    }
.audience-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-blue); border-radius: 16px 16px 0 0; }
.audience-card:nth-child(2)::before { background: linear-gradient(90deg, var(--orange), #FBB040); }
.audience-card:nth-child(3)::before { background: linear-gradient(90deg, #38B2AC, var(--blue)); }
.audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.audience-icon { width: 56px; height: 56px; margin: 0 auto 20px; background: rgba(41,171,226,.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.audience-card:nth-child(2) .audience-icon { background: rgba(249,115,22,.1); }
.audience-card:nth-child(3) .audience-icon { background: rgba(56,178,172,.1); }
.audience-icon svg { width: 28px; height: 28px; stroke: var(--blue); stroke-width: 2; fill: none; }
.audience-card:nth-child(2) .audience-icon svg { stroke: var(--orange); }
.audience-card:nth-child(3) .audience-icon svg { stroke: #38B2AC; }
.audience-card h3 { font-family: var(--font-h); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.audience-card .audience-size { font-family: var(--font-b); font-size: 12px; font-weight: 600; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.audience-card p { font-family: var(--font-b); font-size: 14px; color: var(--muted); line-height: 1.65; }
.ind-img-divider { position: relative; height: 120px; overflow: hidden; margin: 0; }
.ind-img-divider img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.6) saturate(1.2); }
.ind-img-divider::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--white) 0%, transparent 30%, transparent 70%, var(--white) 100%); z-index: 1; pointer-events: none; }
/* ── IIG COMMERCIAL INSURANCE STRIP ──────────────────────────────────────
   Premium "Commercial insurance through IIG" panel. Replaces the old flat
   chip-rail (rated "looks like shit", 2026-06-03). Self-contained surface so
   it reads cleanly on white OR tinted page sections — used across ~14 industry
   pages + the insurance service page. Brand blue→navy gradient accents only
   (no burnt orange per buttons rule). One restrained corner glow. */
.ins-scroll-wrap {
  max-width: 1120px;
  margin: 28px auto;
  padding: 0 24px;
}
.ins-panel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 26px 28px 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(7, 25, 46, .04),
    0 20px 46px -28px rgba(7, 25, 46, .22),
    0 2px 12px -6px rgba(20, 121, 163, .10);
}
/* top accent rail — ties the panel to the brand */
.ins-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-bright) 0%, var(--blue) 45%, var(--navy) 100%);
}
/* single restrained brand glow, top-right */
.ins-panel__glow {
  position: absolute;
  top: -100px; right: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 171, 226, .15), rgba(41, 171, 226, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.ins-scroll-header {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.ins-scroll-heading { display: inline-flex; align-items: center; gap: 14px; }
.ins-scroll-badge {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #29ABE2 0%, #1479A3 100%);
  box-shadow:
    0 7px 18px -7px rgba(20, 121, 163, .60),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}
.ins-scroll-badge svg {
  width: 24px; height: 24px;
  stroke: #fff; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ins-scroll-titles { display: flex; flex-direction: column; gap: 2px; }
.ins-scroll-title {
  font-family: var(--font-h); font-size: 17px; font-weight: 700;
  color: var(--navy); line-height: 1.15; letter-spacing: -.01em;
}
.ins-scroll-sub {
  font-family: var(--font-b); font-size: 12px; font-weight: 600;
  color: var(--blue); text-transform: uppercase; letter-spacing: .09em;
}
.ins-scroll-link {
  flex: 0 0 auto;
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  color: var(--blue); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.ins-scroll-link:hover {
  color: var(--blue-dark);
  border-color: rgba(41, 171, 226, .45);
  box-shadow: 0 4px 14px -6px rgba(20, 121, 163, .40);
  text-decoration: none;
}
.ins-scroll-link__arrow { transition: transform .18s var(--ease); }
.ins-scroll-link:hover .ins-scroll-link__arrow { transform: translateX(3px); }
.ins-scroll-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.ins-scroll-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 12px 18px;
  box-shadow: 0 1px 2px rgba(7, 25, 46, .04), 0 8px 18px -14px rgba(7, 25, 46, .20);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.ins-scroll-card:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
}
.ins-scroll-card:hover {
  transform: translateY(-4px);
  border-color: rgba(41, 171, 226, .40);
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(7, 25, 46, .04),
    0 16px 34px -18px rgba(7, 25, 46, .28),
    0 4px 14px -8px rgba(20, 121, 163, .20);
}
.ins-scroll-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(41, 171, 226, .17), rgba(20, 121, 163, .12));
  box-shadow: inset 0 0 0 1px rgba(41, 171, 226, .22);
  transition: background .22s var(--ease), box-shadow .22s var(--ease),
              transform .22s var(--ease);
}
.ins-scroll-icon svg {
  width: 24px; height: 24px;
  color: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: color .22s var(--ease);
}
.ins-scroll-icon svg .dt-fill { fill: currentColor; opacity: .17; stroke: none; }
.ins-scroll-icon svg .dt-line { fill: none; stroke: currentColor; }
.ins-scroll-card:hover .ins-scroll-icon {
  background: linear-gradient(135deg, #29ABE2 0%, #1479A3 100%);
  box-shadow:
    0 8px 18px -6px rgba(20, 121, 163, .50),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  transform: scale(1.04);
}
.ins-scroll-card:hover .ins-scroll-icon svg { color: #fff; }
.ins-scroll-card:hover .ins-scroll-icon svg .dt-fill { opacity: .22; }
.ins-scroll-name {
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  color: var(--navy); line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) {
  .ins-scroll-card, .ins-scroll-icon, .ins-scroll-link__arrow { transition: none; }
  .ins-scroll-card:hover { transform: none; }
  .ins-scroll-card:hover .ins-scroll-icon { transform: none; }
}
/* IIG strip responsive — tablet: 3-up grid; mobile: swipeable snap rail */
@media (max-width: 1024px) {
  .ins-scroll-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ins-scroll-wrap { padding: 0 16px; }
  .ins-panel { padding: 22px 18px 24px; border-radius: 18px; }
  .ins-scroll-header { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
  .ins-scroll-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 0 -18px; padding: 2px 18px 6px;
  }
  .ins-scroll-track::-webkit-scrollbar { display: none; }
  .ins-scroll-card { flex: 0 0 44%; scroll-snap-align: start; }
}
/* -- KEN BURNS HERO BACKGROUND --------------------------------
   2026-04-17: per-industry backgrounds matched via WordPress body
   class. WP adds `.page-template-template-industry-<slug>-blade-php`
   to <body> based on the page template — we target that to swap
   the hero image per industry. All images exist in /generated-images/. */
    .ind-hero-bg {
      position: absolute; inset: 0;
      opacity: 0.62;
      animation: kenBurnsInd 20s ease-in-out infinite alternate;
      z-index: 0;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

    /* Per-industry hero backgrounds — 17 industries */
    body.agriculture .ind-hero-bg           { background-image: image-set(url('/generated-images/hero-agriculture.avif') type('image/avif'), url('/generated-images/hero-agriculture.webp') type('image/webp'), url('/generated-images/hero-agriculture.jpeg') type('image/jpeg')); }
    body.automotive .ind-hero-bg            { background-image: image-set(url('/generated-images/hero-automotive.avif') type('image/avif'), url('/generated-images/hero-automotive.webp') type('image/webp'), url('/generated-images/hero-automotive.jpeg') type('image/jpeg')); }
    body.construction .ind-hero-bg          { background-image: image-set(url('/generated-images/hero-construction.avif') type('image/avif'), url('/generated-images/hero-construction.webp') type('image/webp'), url('/generated-images/hero-construction.jpeg') type('image/jpeg')); }
    body.dental .ind-hero-bg                { background-image: image-set(url('/generated-images/hero-dental.avif') type('image/avif'), url('/generated-images/hero-dental.webp') type('image/webp'), url('/generated-images/hero-dental.jpeg') type('image/jpeg')); }
    body.education .ind-hero-bg             { background-image: image-set(url('/generated-images/hero-education.avif') type('image/avif'), url('/generated-images/hero-education.webp') type('image/webp'), url('/generated-images/hero-education.jpeg') type('image/jpeg')); }
    body.energy .ind-hero-bg                { background-image: image-set(url('/generated-images/hero-energy.avif') type('image/avif'), url('/generated-images/hero-energy.webp') type('image/webp'), url('/generated-images/hero-energy.jpeg') type('image/jpeg')); }
    body.financial-services .ind-hero-bg    { background-image: image-set(url('/generated-images/hero-financial-services.avif') type('image/avif'), url('/generated-images/hero-financial-services.webp') type('image/webp'), url('/generated-images/hero-financial-services.jpeg') type('image/jpeg')); }
    body.government-contractors .ind-hero-bg{ background-image: image-set(url('/generated-images/hero-government-contractors.avif') type('image/avif'), url('/generated-images/hero-government-contractors.webp') type('image/webp'), url('/generated-images/hero-government-contractors.jpeg') type('image/jpeg')); }
    body.healthcare .ind-hero-bg            { background-image: image-set(url('/generated-images/hero-healthcare.avif') type('image/avif'), url('/generated-images/hero-healthcare.webp') type('image/webp'), url('/generated-images/hero-healthcare.jpeg') type('image/jpeg')); }
    body.hospitality .ind-hero-bg           { background-image: image-set(url('/generated-images/hero-hospitality.avif') type('image/avif'), url('/generated-images/hero-hospitality.webp') type('image/webp'), url('/generated-images/hero-hospitality.jpeg') type('image/jpeg')); }
    body.manufacturing .ind-hero-bg         { background-image: image-set(url('/generated-images/hero-manufacturing.avif') type('image/avif'), url('/generated-images/hero-manufacturing.webp') type('image/webp'), url('/generated-images/hero-manufacturing.jpeg') type('image/jpeg')); }
    body.nonprofit .ind-hero-bg             { background-image: image-set(url('/generated-images/hero-nonprofit.avif') type('image/avif'), url('/generated-images/hero-nonprofit.webp') type('image/webp'), url('/generated-images/hero-nonprofit.jpeg') type('image/jpeg')); }
    body.professional-services .ind-hero-bg { background-image: image-set(url('/generated-images/hero-professional-services.avif') type('image/avif'), url('/generated-images/hero-professional-services.webp') type('image/webp'), url('/generated-images/hero-professional-services.jpeg') type('image/jpeg')); }
    body.real-estate .ind-hero-bg           { background-image: image-set(url('/generated-images/hero-real-estate.avif') type('image/avif'), url('/generated-images/hero-real-estate.webp') type('image/webp'), url('/generated-images/hero-real-estate.jpeg') type('image/jpeg')); }
    body.retail .ind-hero-bg                { background-image: image-set(url('/generated-images/hero-retail.avif') type('image/avif'), url('/generated-images/hero-retail.webp') type('image/webp'), url('/generated-images/hero-retail.jpeg') type('image/jpeg')); }
    body.technology .ind-hero-bg            { background-image: image-set(url('/generated-images/hero-technology.avif') type('image/avif'), url('/generated-images/hero-technology.webp') type('image/webp'), url('/generated-images/hero-technology.jpeg') type('image/jpeg')); }
    body.transportation .ind-hero-bg        { background-image: image-set(url('/generated-images/hero-transportation.avif') type('image/avif'), url('/generated-images/hero-transportation.webp') type('image/webp'), url('/generated-images/hero-transportation.jpeg') type('image/jpeg')); }
/* Scrim overlay — keeps white H1 + gradient accent legible across
       the full ken-burns pan range. Added 2026-04-14 in hero polish pass. */
    .ind-hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(90deg, rgba(7,25,46,.82) 0%, rgba(7,25,46,.42) 55%, rgba(7,25,46,.15) 100%),
        linear-gradient(180deg, rgba(7,25,46,.0) 0%, rgba(7,25,46,.30) 80%);
      pointer-events: none;
    }
/* ── GOD MODE POLISH: RETAIL ─────────────────────────── */


    /* Hero layout */
    .ind-hero { position: relative; overflow: hidden; }
.ind-hero-inner { position: relative; z-index: 1; }
/* Bouncy card hover upgrade */
    .pain-card {
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease !important;
    }
.pain-card:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 16px 32px rgba(7,25,46,.12), 0 0 0 1px rgba(236,72,153,.2) !important;
    }
/* Pink gradient on proof-strip claim titles — restored 2026-05-04 per Ryan.
   Pairs with the tighter flex layout + 18px sizing (no more 40px screaming).
   At 18px, the gradient reads as a brand accent, not a sale banner. */
    .proof-stat-n {
      background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%) !important;
      -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }
/* CTA dark navy gradient enhancement */
    .ind-cta {
      background: linear-gradient(135deg, #07192E 0%, #0D2B45 100%) !important;
      border-radius: 24px !important;
      padding: 64px 48px !important;
    }
/* GOLDEN-CARD-INDUSTRY-PATCH v1 */
    /* Overrides the existing .pain-card / .audience-card / .svc-card CSS on
       every industry vertical page to adopt the services-hub golden card
       aesthetic. Solid white + hairline + left-edge accent + ghost glow. */
    
    /* PAIN CARDS — 5-up grid */
    .pain-card {
      position: relative !important;
      background: #FFFFFF !important;
      border: 1px solid rgba(13,24,41,.09) !important;
      border-top: 1px solid rgba(13,24,41,.09) !important;
      border-radius: 10px !important;
      padding: 28px 24px 24px 32px !important;
      box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 8px 24px -12px rgba(13,24,41,.18), 0 16px 40px -20px rgba(13,24,41,.12) !important;
      transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out !important;
      overflow: hidden !important;
      isolation: isolate !important;
      /* Single neutral card accent for all pain-cards. Restraint over
         rainbow. Foundation refactor 2026-04-17: deleted the 5 x nth-child
         --card-color overrides (orange/blue/emerald/magenta/purple) that
         made every industry page look like a coloring book. Future tonal
         variation should come from data-tone attribute, not nth-child. */
      --card-color: var(--muted, #3D5266);
      --card-rgb: 61, 82, 102;
    }
.pain-card::before {
      content: '';
      position: absolute;
      left: 0; top: 18px; bottom: 18px;
      width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--card-color) 15%, var(--card-color) 85%, transparent 100%);
      border-radius: 0 3px 3px 0;
      transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
      z-index: 2;
    }
.pain-card::after {
      content: '';
      position: absolute;
      top: -80px; left: -80px;
      width: 240px; height: 240px;
      background: radial-gradient(circle, rgba(var(--card-rgb), .12) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
      opacity: .55;
      transition: opacity 180ms ease-out;
    }
.pain-card:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(var(--card-rgb), .42) !important;
      box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 14px 32px -14px rgba(var(--card-rgb), .22), 0 18px 36px -18px rgba(13,24,41,.18) !important;
    }
.pain-card:hover::before { width: 4px; top: 10px; bottom: 10px; }
.pain-card:hover::after { opacity: 1; }
.pain-card > * { position: relative; z-index: 1; }
.pain-icon {
      position: relative !important;
      top: auto;
      right: auto;
      width: 64px !important;
      height: 64px !important;
      color: var(--card-color) !important;
      opacity: 1;
      margin: 0 0 18px 0 !important;
      padding: 0;
      z-index: 1;
      display: inline-flex !important; align-items: center; justify-content: center;
      pointer-events: auto;
      transition: transform 240ms ease-out;
    }
.pain-icon::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, currentColor 0%, transparent 70%);
      opacity: .14;
    }
.pain-icon::after {
      content: ''; position: absolute; inset: 6px;
      border-radius: 50%;
      border: 1px solid currentColor; opacity: .28;
    }
/* Foundation refactor 2026-04-17: deleted redundant per-nth-child .pain-icon
   color rule. .pain-icon already inherits via var(--card-color) in base rules. */
.pain-icon svg {
      width: 32px !important;
      height: 32px !important;
      position: relative; z-index: 1;
      stroke: currentColor !important;
      fill: none !important;
      stroke-width: 2 !important;
      stroke-linecap: round;
      stroke-linejoin: round;
      overflow: visible;
    }
.pain-card:hover .pain-icon {
      transform: scale(1.04);
      animation: none !important;
    }
.pain-card h3 {
      font-family: var(--font-h) !important;
      font-size: 19px !important;
      font-weight: 800 !important;
      letter-spacing: -.018em !important;
      color: #0D1829 !important;
      line-height: 1.2 !important;
      margin: 8px 0 8px !important;
      max-width: 14ch;
    }
.pain-card p {
      font-family: var(--font-b) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      color: #5B6B7E !important;
      line-height: 1.55 !important;
      margin-bottom: 14px !important;
      max-width: 38ch;
    }
/* AUDIENCE CARDS — 3-up grid */
    .audience-card {
      position: relative !important;
      background: #FFFFFF !important;
      border: 1px solid rgba(13,24,41,.09) !important;
      border-radius: 10px !important;
      padding: 36px 28px 30px 38px !important;
      text-align: left !important;
      box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 8px 24px -12px rgba(13,24,41,.18), 0 16px 40px -20px rgba(13,24,41,.12) !important;
      transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out !important;
      overflow: hidden !important;
      isolation: isolate !important;
      /* Foundation refactor 2026-04-17: deleted the 3 x nth-child(3n+N)
         --card-color rainbow rotation. One neutral slate accent for all
         audience cards. */
      --card-color: var(--muted, #3D5266);
      --card-rgb: 61, 82, 102;
    }
.audience-card::before {
      content: '';
      position: absolute;
      left: 0; top: 22px; bottom: 22px;
      width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--card-color) 15%, var(--card-color) 85%, transparent 100%);
      border-radius: 0 3px 3px 0;
      transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
      z-index: 2;
      height: auto !important;
    }
.audience-card::after {
      content: '';
      position: absolute;
      top: -80px; left: -80px;
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(var(--card-rgb), .12) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
      opacity: .55;
      transition: opacity 180ms ease-out;
    }
.audience-card:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(var(--card-rgb), .42) !important;
      box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 14px 32px -14px rgba(var(--card-rgb), .22), 0 18px 36px -18px rgba(13,24,41,.18) !important;
    }
.audience-card:hover::before { width: 4px; top: 12px; bottom: 12px; }
.audience-card:hover::after { opacity: 1; }
.audience-card > * { position: relative; z-index: 1; }
.audience-icon {
      position: absolute !important;
      top: 22px;
      right: 22px;
      width: 60px !important;
      height: 60px !important;
      background: none !important;
      border: none;
      border-radius: 0 !important;
      color: var(--card-color);
      opacity: .14;
      margin: 0 !important;
      padding: 0;
      display: block !important;
      z-index: 0;
      pointer-events: none;
      transition: opacity 240ms ease-out, transform 240ms ease-out;
    }
.audience-card:nth-child(2) .audience-icon,
    .audience-card:nth-child(3) .audience-icon {
      background: none !important;
    }
.audience-icon svg {
      width: 100% !important;
      height: 100% !important;
      stroke: currentColor !important;
      fill: none !important;
      stroke-width: 1.4 !important;
    }
.audience-card:nth-child(2) .audience-icon svg,
    .audience-card:nth-child(3) .audience-icon svg {
      stroke: currentColor !important;
    }
.audience-card:hover .audience-icon {
      opacity: .22;
      transform: scale(1.05) rotate(-2deg);
    }
.audience-card h3 {
      font-family: var(--font-h) !important;
      font-size: 22px !important;
      font-weight: 800 !important;
      letter-spacing: -.022em !important;
      color: #0D1829 !important;
      line-height: 1.15 !important;
      margin: 10px 0 8px !important;
      max-width: 16ch;
      /* Reserve up to 3 title lines so the body copy shares a baseline across
         the 3-up row when titles run 1, 2, or 3 lines (e.g. "General
         Contractors" vs "Multi-State Construction Operations"). */
      min-height: calc(1.15em * 3);
    }
.audience-card .audience-size {
      font-family: var(--font-b) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: var(--card-color) !important;
      text-transform: uppercase !important;
      letter-spacing: .16em !important;
      margin-bottom: 10px !important;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
.audience-card .audience-size::after {
      content: '';
      width: 22px;
      height: 1px;
      background: currentColor;
      opacity: .4;
    }
.audience-card p {
      font-family: var(--font-b) !important;
      font-size: 13.5px !important;
      font-weight: 500 !important;
      color: #5B6B7E !important;
      line-height: 1.6 !important;
      max-width: 36ch;
    }
/* END ZAYZOON-CALLOUT-v1 */
    
  
    /* ═══════════════════════════════════════════════════════
       2030 HERO SEPARATION — propagated from real-estate reference
       Playbook: audit-reports-v2/hero-separation-playbook.md
       Kill list: orbs, old dot grid on ::after, H1 text-shadow, old 56×3
       cyan hairline. Shared primitives from assets/site.css (.navy-grain,
       .has-spotlight, .prism-bar, .curtain-feather) now paint the hero.
    ═══════════════════════════════════════════════════════ */
    .ind-hero.navy-grain {
      /* Clear inline background-image so .navy-grain (site.css) wins */
      background-image: none !important;
      min-height: 480px;
    }
.ind-hero.navy-grain::after { content: none !important; }
.ind-hero.navy-grain .ind-orb,
    .ind-hero.navy-grain .ind-orb-1,
    .ind-hero.navy-grain .ind-orb-2,
    .ind-hero.navy-grain .ind-orb-3,
    .ind-hero.navy-grain .ind-hero-orb,
    .ind-hero.navy-grain .ind-hero-orb-1,
    .ind-hero.navy-grain .ind-hero-orb-2,
    .ind-hero.navy-grain .ind-hero-orb-3 { display: none !important; }
.ind-hero h1.prism-bar { text-shadow: none !important; }
/* Industry hero accent v5: bright punchy electric-cyan start that fades
   through cyan → indigo → transparent. The soft taper preserves the
   "fades away" character of the original (which Ryan liked), and the
   strong opening fixes the muted "blue on blue" problem the original
   had on this navy hero. No dot, no full rainbow — keeps the gradient
   moment in the headline as the visual focal point. */
    .ind-hero h1.prism-bar::after {
      width: clamp(120px, 14vw, 180px) !important;
      height: 3px !important;
      margin: 18px 0 22px !important;
      border-radius: 999px !important;
      background: linear-gradient(90deg,
        rgba(41,171,226,1) 0%,
        rgba(41,171,226,.92) 24%,
        rgba(20,121,163,.62) 52%,
        rgba(51,54,142,.30) 78%,
        rgba(231,23,135,0) 100%) !important;
      box-shadow:
        0 0 12px rgba(41,171,226,.38),
        0 2px 14px rgba(2,166,220,.22) !important;
      animation: none !important;
    }
    @media (max-width: 640px) {
      .ind-hero h1.prism-bar::after {
        width: clamp(96px, 22vw, 130px) !important;
        margin: 14px 0 18px !important;
      }
    }
    /* Delete the awkward blue-on-blue dot under the rule on industry heroes too. */
    .ind-hero h1.prism-bar::before { display: none !important; }
.ind-hero .has-spotlight .trust-row-canonical { margin: 0 0 26px !important; }
.ind-hero .has-spotlight .ind-sub,
    .ind-hero .has-spotlight .dental-sub,
    .ind-hero .has-spotlight .fs-sub { margin-bottom: 28px !important; }

@media (max-width: 1100px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  /* 2026-04-17 mobile-cut fix: was `1fr` which still grew to max-content
     because trust marquee + mockup children had width: max-content. Same
     `minmax(0, ...)` trick used at desktop forces the track to shrink and
     clip child max-content, preventing 597px text overflow at 375px viewport. */
  .ind-hero-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .ind-hero-text { min-width: 0 !important; max-width: 100% !important; }
  .ind-hero-text h1,
  .ind-hero-text .ind-sub,
  .ind-hero-text .trust-row-canonical { max-width: 100% !important; min-width: 0 !important; }
  .ind-hero-text .trust-row-canonical { flex-wrap: wrap !important; }
  /* Foundation refactor 2026-04-17: was `display: none` — hid the entire
     hero mockup (ledger / brokerage panel) on tablets + phones, which
     the ui-ux-pro-max agent flagged as the single biggest mobile-first
     regression on the page. Mockup is the visual proof of the H1 claim.
     Now: stacks below the text column at 1100px and below, scaled to
     fit, still fully visible and legible. */
  .ind-hero-visual {
    display: flex !important;
    margin: 28px auto 0 !important;
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    min-width: 0 !important;
    justify-self: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .ind-hero-inner { min-width: 0 !important; }
  .ind-hero-visual .ind-mockup {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Mobile: tighter ledger type so 2 columns still fit on 390px */
@media (max-width: 520px) {
  .ind-mockup--ledger .im-body {
    padding: 14px 14px 48px;
  }
  .im-ledger {
    gap: 0 10px;
  }
  .im-ledger__label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .im-ledger__count {
    font-size: 15px;
  }
  .im-ledger__row {
    font-size: 9.5px;
    padding: 4px 0;
  }
  .im-ledger__stamp {
    font-size: 9px;
    padding: 4px 8px;
    right: 14px;
    bottom: 10px;
  }
}

@media (max-width: 900px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .case-checklist { grid-template-columns: 1fr; }
  .ind-adv-layout { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .ind-adv-photo-wrap { order: -1; }
  .ind-adv-pullquote { text-align: left; }
  .ind-adv-micro { justify-content: center; }
  .ind-adv-cta { align-items: center; }
  .audience-grid { grid-template-columns: 1fr; max-width: 480px; }
  /* Stacked single-column: drop the reserved title space so short titles
     don't leave a gap above the body (no row to align to on mobile). */
  .audience-card h3 { min-height: 0; }
}

@media (max-width: 1024px) {
  .ind-hero { padding: 40px 24px 40px; }
  .ind-challenges { padding: 56px 24px; }
  .pain-grid { grid-template-columns: 1fr; }
  .ind-solutions { padding: 56px 24px; }
  .ind-case { padding: 56px 24px; }
  .case-glass { padding: 28px 24px; }
  .ind-cta { padding: 64px 24px; }
  .ind-services { padding: 56px 24px; }
  .proof-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ind-img-divider { height: 80px; }
}

@media (max-width: 480px) {
  .proof-inner { grid-template-columns: 1fr 1fr; }
  .ind-hero-ctas { flex-direction: column; }
  .ind-trust-badges{ flex-direction: column; gap: 10px; }
}

@media (max-width: 1024px) {
  .pain-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
  .pain-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pain-card, .pain-card::before, .pain-icon,
      .audience-card, .audience-card::before, .audience-icon,
      .svc-card, .svc-card::before, .svc-card-icon {
        transition: none !important;
        animation: none !important;
      }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES 2026-04-17 — fix solvex row cramming on <768px viewports.
   site.css has solvex-row as grid w/ multi-col desktop layout. At 375px
   wide the default grid produces 52px + 197px columns which crams the
   dossier. Force single-column stack below 768.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  .solvex-row {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  { display: none !important; }
  .solvex-row__main { grid-area: main !important; }
  .solvex-row__main,
  .solvex-row__dossier {
    width: 100% !important;
    max-width: 100% !important;
  }
  .solvex-row__advisor {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .solvex-row__advisor-photo {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  /* Mobile metrics carousel handled in the later @media block (~line 1460).
     Earlier 1-column stack rule was removed 2026-05-04 — it was clobbering
     the flex carousel via !important. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO CYCLE WORD — mobile auto-fit safety bound (2026-06-01).
   The cycling gradient word in industry heroes is sized by the JS auto-fit in
   components/ind/hero.blade.php: each word scales to fit the h1 line, so an
   over-long phrase (e.g. real-estate's "independent-contractor lines." at
   ~405px) shrinks to fit instead of clipping off the right edge on phones.
   This rule is the CSS fallback: it caps the box to the line width before the
   JS runs (and if JS is disabled), so the word can never bleed past the hero.
   With the JS active the locked min-width is always <= 100%, so this max-width
   never fights it.

   NOTE for future edits: a bare `max-width` here WITHOUT the JS change is a
   no-op. lockSize() used to write an inline min-width equal to the widest word,
   which on mobile exceeds the viewport, and per CSS spec min-width beats
   max-width. The auto-fit removed that over-wide lock; this only backstops it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .ind-hero .hero-cycle-wrap { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IND-STATS-STRIP — navy bar with 4 big stat counters (under hero).
   2026-04-17 FIX: component was using Tailwind utilities (grid-cols-4,
   text-4xl, font-extrabold) that may not compile. Native CSS fallback
   here guarantees the section renders white-on-navy regardless.
   ═══════════════════════════════════════════════════════════════════════════ */

.ind-stats-strip {
  position: relative;
  background: var(--navy, #07192E);
  color: #fff;
  /* Foundation refactor 2026-04-17: tightened section padding 56 → 36 to
     reduce vertical weight. The strip is a taxonomy rail, not a hero stat
     block — should feel like navigation, not a shouted manifesto. */
  padding: 36px 24px;
  overflow: hidden;
}
.ind-stats-strip .wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.ind-stats-strip .wrap > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  text-align: center;
}
@media (min-width: 1024px) {
  .ind-stats-strip .wrap > div { grid-template-columns: repeat(4, 1fr); }
}
.ind-stats-strip .font-heading {
  font-family: var(--font-h, "Poppins", system-ui, sans-serif);
  font-weight: 700;
  /* Foundation refactor 2026-04-17: 44px max → 28px max. These are short
     TEXT labels (IRC 3508, Commission, Multi-State, HOA) on most industry
     pages, not large numeric stats. 44px was shouting for the content's
     actual weight. 28px cap reads prominent without screaming. */
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.ind-stats-strip .text-sm {
  font-size: 13px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.ind-stats-strip .aurora-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 40%, rgba(41, 171, 226, 0.18) 0%, transparent 55%),
    radial-gradient(50% 50% at 80% 60%, rgba(249, 115, 22, 0.12) 0%, transparent 55%);
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT POLISH 2026-04-17 — fix N-card grid orphan rows.
   When a pain-grid has exactly 4 cards, default 3-col layout leaves the
   4th card orphaned on its own row. Use :has() to detect and switch to
   2×2 balanced grid. Graceful fallback: browsers w/o :has() keep 3-col.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports selector(:has(*)) {
  @media (min-width: 1024px) {
    .pain-grid:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(2, 1fr);
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
    .pain-grid:has(> :nth-child(2):last-child) {
      grid-template-columns: repeat(2, 1fr);
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
    .audience-grid:has(> :nth-child(2):last-child) {
      grid-template-columns: repeat(2, 1fr);
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
    .audience-grid:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(2, 1fr);
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO STANDARDIZATION 2026-04-17 — uniform visual presence across all 17
   industry heroes regardless of H1 length. Without this rule, heroes with
   3-line H1s (real-estate, technology) are ~108px taller than 2-line H1s
   (construction, manufacturing). min-height sets the floor; tall content
   still expands naturally beyond it.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .ind-hero,
  .ind-hero.navy-grain {
    /* Foundation refactor 2026-04-17: 720 → 600. 720px was dominating the
       above-fold like a hero-video section. 600px reads authoritative but
       lets the content below the fold pull the eye down. */
    min-height: 600px;
    display: flex;
    align-items: center;
  }
  .ind-hero-inner {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATION REBUILD WS-1 — 2030 restraint polish + mobile compaction.
   Added 2026-04-17 as part of WS-1 Commit 1.

   Purpose:
     1. Kill the "coloring book" feel on solvex metrics: unify values to navy,
        replace rainbow outcome badges with one restrained chip + colored dot.
     2. Align metric columns properly (flex column, label flex-grows, badges
        always sit at bottom baseline across all metrics regardless of label
        length).
     3. Compress mobile vertical rhythm — "25 scrolls on mobile" was section
        padding 96px + stacked solvex-rows with 64px gaps + uncompressed pain
        cards. Cut section padding to 48px mobile, tighten solvex-row internal
        spacing, collapse pain-grid to 2-col at 480px+.
   ═══════════════════════════════════════════════════════════════════════════ */

/* === Solvex metric: uniform grid, navy values, restrained badges === */
.solvex-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto 48px;
  padding: 0 16px;
  text-align: center;
  align-items: stretch;
}

.solvex-metric {
  position: relative;
  padding: 20px 12px 0;
  border-top: 1px solid rgba(13, 24, 41, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Per-type tinted values + shimmer gradient restored 2026-04-21.
   Each variant gets its own accent color; the currentColor-based shimmer
   gradient in site{ color: #B45309; }
{ color: #1779B8; }
{ color: #047857; }

.solvex-metric--fear    { border-top-color: rgba(180, 83, 9, 0.35); }
.solvex-metric--proof   { border-top-color: rgba(23, 121, 184, 0.35); }
.solvex-metric--advisor { border-top-color: rgba(16, 185, 129, 0.35); }

.solvex-metric__value {
  font-family: var(--font-h, "Poppins", system-ui, sans-serif);
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.solvex-metric__label {
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #3D5266);
  line-height: 1.5;
  max-width: 28ch;
  margin: 0 auto;
  flex: 1 1 auto; /* pushes badge to consistent bottom baseline */
}
@supports (text-wrap: balance) {
  .solvex-metric__label { text-wrap: balance; }
}

/* === Restrained outcome badge (replaces magenta/green/indigo rainbow). ===
   All badges share identical base. Only the dot color changes by tone. */
.solvex-metric__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 4px 10px;
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy, #07192E);
  background: rgba(13, 24, 41, 0.04);
  border: 1px solid rgba(13, 24, 41, 0.12);
  border-radius: 999px;
  white-space: nowrap;
  margin-top: auto;
}

.solvex-metric__badge-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 6px;
  background: rgba(13, 24, 41, 0.4);
}

/* Tone variants — only the dot colors differ. The chip stays neutral. */
.solvex-metric__badge--risk .solvex-metric__badge-dot{
  background: #F97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}
.solvex-metric__badge--win .solvex-metric__badge-dot{
  background: #15803D;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14);
}
.solvex-metric__badge--neutral .solvex-metric__badge-dot{
  background: #3D5266;
  box-shadow: 0 0 0 3px rgba(61, 82, 102, 0.14);
}

/* === Mobile compaction — "25 scrolls" fix === */
@media (max-width: 767.98px) {
  /* Mobile: horizontal scroll-snap carousel instead of 1-col stack.
     A 4-metric vertical stack ate ~600-700px of mobile scroll. Carousel
     reduces that to ~180px (one card visible, swipe to see the rest).
     2026-05-04: replaces the prior `grid-template-columns: 1fr` rule. */

  /* Clip the carousel at the section boundary. The .solvex-metrics scroll
     container (overflow-x:auto, below) owns the horizontal swipe; the outer
     section just needs to stop painting beyond its bounds so off-screen cards
     don't bleed past the viewport and trigger page-level horizontal scroll.
     Scoped to .solvex-wrap alone — NOT the shared padding rule below — so the
     other sections keep overflow:visible. 2026-06-01. */
  .solvex-wrap {
    overflow-x: hidden;
  }

  .solvex-metrics {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    gap: 12px;
    margin-bottom: 32px;
    padding: 0 16px 12px;
  }
  @supports (scrollbar-width: none) { .solvex-metrics { scrollbar-width: none; } }
  .solvex-metrics::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .solvex-metric {
    flex: 0 0 78%;                /* Each card ~78% of viewport, peeks the next */
    scroll-snap-align: start;
    padding-top: 14px;
    gap: 6px;
  }
  .solvex-metric__value {
    font-size: 36px;
  }

  /* Section padding: default 96px top/bottom -> 48px on mobile */
  .solvex-wrap,
  .ind-challenges,
  .ind-audience,
  section.ind-stats-strip {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Solvex-row internal spacing compaction */
  .solvex-row {
    padding: 24px 16px !important;
    gap: 14px !important;
  }
  .solvex-row__main {
    gap: 10px !important;
  }
  .solvex-row__title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  .solvex-row__body {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
  .solvex-row__dossier {
    gap: 10px !important;
    padding-top: 12px !important;
  }
  .solvex-row__voice {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
  }

  /* Pain grid: 2-col at 480px+, full single-col below */
  .pain-grid {
    gap: 14px !important;
  }
}

@media (min-width: 480px) and (max-width: 767.98px) {
  .pain-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pain-card {
    padding: 18px 16px !important;
  }
  .pain-card__title {
    font-size: 16px !important;
  }
  .pain-card__body {
    font-size: 13.5px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATION REBUILD WS-3 (partial) — solvex-row mobile summary-first.
   Added 2026-04-17.

   Problem: mobile page = 15 scrolls (12,310px at 390×844). Solvex rows
   (5 × ~900px = 4,500px) dominate 37% of mobile length.

   Fix: collapse proof + dossier behind a toggle on mobile. Keep eyebrow +
   title + body visible so user knows what the row is about. Desktop shows
   everything always (toggle hidden).

   Expected: ~4,000px cut from mobile (800px × 5 rows), pushing 15 → ~10 scrolls.
   ═══════════════════════════════════════════════════════════════════════════ */

.solvex-row__more-btn {
  display: none; /* hidden by default — shows only on mobile */
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 14px;
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #07192E);
  background: rgba(13, 24, 41, 0.04);
  border: 1px solid rgba(13, 24, 41, 0.12);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 44px; /* WCAG touch target */
}
.solvex-row__more-btn:hover,
.solvex-row__more-btn:focus-visible {
  background: rgba(13, 24, 41, 0.08);
  border-color: rgba(13, 24, 41, 0.2);
}
.solvex-row__more-btn-chev {
  transition: transform 0.2s var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* When row is open, rotate the chevron + update label via sibling selector */
.solvex-row.is-open .solvex-row__more-btn-chev {
  transform: rotate(180deg);
}
.solvex-row{
  content: " (collapse)";
  font-weight: 400;
  opacity: 0.6;
}

@media (max-width: 767.98px) {
  /* Show the button on mobile */
  .solvex-row__more-btn {
    display: inline-flex;
  }
  /* Collapse the more content by default */
  .solvex-row__more {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                opacity 0.25s ease;
  }
  /* When row is open, expand */
  .solvex-row.is-open .solvex-row__more {
    max-height: 2400px;
    opacity: 1;
    transition: max-height 0.6s var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                opacity 0.35s ease 0.15s;
  }
}

/* Desktop (>= 768px): always show the "more" content, never show the button.
   This is the default structure — nothing to override because .solvex-row__more
   has no max-height constraint outside the mobile media query above. */

/* Card restraint is now enforced at the source (no per-nth-child rainbow).
   See the pain-card + audience-card base rules above — --card-color reads
   from var(--muted) for all cards uniformly. No override block needed. */

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATION REBUILD WS-3 — 2030 scroll-linked rail fill on cards.
   Added 2026-04-17 after 21st.dev / Aceternity / Magic UI deep-dive.

   Pattern source: Rauno.me scroll-linked primitives + 21st.dev scroll-reveal
   family. Chosen over border-beam (Magic UI) and spotlight-cursor (Aceternity)
   because:
     1. Upgrades an element the Golden Card Style already owns (left rail),
        so zero collision with hairline border + ghost watermark.
     2. Reuses animation-timeline: view() infrastructure from WS-1 Commit 1.
        No new APIs, no @property polyfill, no JS listeners.
     3. Works on mobile + desktop + screen readers equivalently (scroll-driven,
        not hover-driven). Spotlight was mobile-invisible; we rejected it.
     4. The empty → filled rail is a signal, not decoration: pulls the reader's
        eye down the section as each card is "read" by the scroll position.

   Behavior:
     - At rest / above fold: rail empty (scaleY: 0)
     - Scrolling card into viewport: rail fills top → bottom (scaleY: 0 → 1)
     - prefers-reduced-motion: rail stays filled (no animation) as today
     - Browsers without animation-timeline: rail stays filled as today

   Accent color: still unified --card-color (muted slate) across all cards
   for consistency with the restraint commit. Rail can be switched to brand
   orange later via data-tone attribute without touching the animation.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  .pain-card::before,
  .audience-card::before {
    transform-origin: top;
    transform: scaleY(0);
    animation: card-rail-fill linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 45%;
  }

  @keyframes card-rail-fill {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pain-card::before,
  .audience-card::before {
    transform: scaleY(1) !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATION REBUILD WS-3 — trust row marquee (Enterprise Gateway pattern).
   Added 2026-04-17 after ui-ux-pro-max skill recommendation:
     pattern="Enterprise Gateway", effect="certificate carousel"

   Behavior:
     - Desktop (>=768px): chips auto-scroll right-to-left in infinite loop,
       pauses on hover. Edge-fade mask at both sides so chips fade out of
       view instead of hard-cutting.
     - Mobile (<768px): static, horizontally overflow-scrollable via touch.
       No auto-scroll (cramped viewport + power cost).
     - prefers-reduced-motion: static, no animation at any viewport.

   Seamless loop trick: render the chips twice (second pass aria-hidden),
   animate track -50% which matches one-copy's width exactly — no jump.
   ═══════════════════════════════════════════════════════════════════════════ */

.trust-row-canonical--marquee {
  overflow: hidden;
  position: relative;
  /* CRITICAL: constrain the container width, else the inner track with
     width: max-content pushes the container past the viewport + breaks
     the hero layout. User saw this as "proof strip running through the
     middle of the hero" when it was overflowing to 1469px at 1280 vw. */
  width: 100%;
  max-width: 100%;
  min-width: 0;  /* override flex-item min-content default */
  /* Edge-fade mask: fade chips in from left, fade out to right */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.trust-row-canonical--marquee .trust-row-canonical__track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

.trust-row-canonical--marquee .trust-row-canonical__dup {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (min-width: 768px) {
  .trust-row-canonical--marquee .trust-row-canonical__track {
    animation: trust-marquee 38s linear infinite;
  }
  .trust-row-canonical--marquee:hover .trust-row-canonical__track,
  .trust-row-canonical--marquee:focus-within .trust-row-canonical__track {
    animation-play-state: paused;
  }
  @keyframes trust-marquee {
    from { transform: translateX(0); }
    /* Translate by exactly half the track width — the second (aria-hidden)
       copy is identical to the first, so at -50% we're back to a state that
       looks identical to 0%. No visible jump. */
    to   { transform: translateX(-50%); }
  }
}

/* Mobile: static, horizontally scrollable via touch */
@media (max-width: 767.98px) {
  .trust-row-canonical--marquee {
    overflow-x: auto;
    overflow-y: hidden;
  }
  @supports (scrollbar-width: none) {
    .trust-row-canonical--marquee { scrollbar-width: none; }
  }
  .trust-row-canonical--marquee::-webkit-scrollbar {
    display: none;
  }
  /* Hide the duplicate chips on mobile — no infinite loop needed */
  .trust-row-canonical--marquee .trust-row-canonical__dup {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-row-canonical--marquee .trust-row-canonical__track {
    animation: none !important;
  }
  .trust-row-canonical--marquee .trust-row-canonical__dup {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .trust-row-canonical--static — DEFAULT 2026-05-19.
   Static glass row, no marquee. Used in service heroes so the partner-logo
   marquee directly below the hero is the only moving band on the fold
   (two stacked marquees was disorienting per user feedback).
   Mirrors the .pr-trust-box pattern on /pricing/.
   ═══════════════════════════════════════════════════════════════════════════ */

.trust-row-canonical--static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin: 18px 0 8px;
}
.trust-row-canonical--static .trust-row-canonical__track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  transform: none !important;
  animation: none !important;
}
.trust-row-canonical--static .trust-chip-c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: none;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
}
.trust-row-canonical--static .trust-chip-c:hover {
  color: #fff;
}
.trust-row-canonical--static .trust-chip-c svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #9A330A;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-row-canonical--static .chip-external-label {
  font-weight: 700;
  color: #fff;
  margin-right: 2px;
}
.trust-row-canonical--static .trust-row-canonical__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
/* Light variant: dark text on light hero (parallel to ondark default) */
.trust-row-canonical--static.trust-row-canonical--light {
  background: rgba(11,31,58,0.04);
  border-color: rgba(11,31,58,0.08);
}
.trust-row-canonical--static{
  color: rgba(11,31,58,0.85);
}
.trust-row-canonical--static{
  color: #0B1F3A;
}
.trust-row-canonical--static{
  color: #0B1F3A;
}
.trust-row-canonical--static.trust-row-canonical--light .trust-row-canonical__sep {
  background: rgba(11,31,58,0.15);
}
/* Mobile: collapse separators, wrap to two rows if needed */
@media (max-width: 640px) {
  .trust-row-canonical--static {
    padding: 6px 10px;
    border-radius: 18px;
    gap: 0 2px;
  }
  .trust-row-canonical--static .trust-chip-c {
    padding: 5px 8px;
    font-size: 12px;
  }
  .trust-row-canonical--static .trust-row-canonical__sep {
    height: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATION REBUILD WS-3 — 2030 CTA band polish.
   Added 2026-04-17.

   Before: flat navy gradient with a white button plopped in the middle.
   Text dense, phone link orphaned below, zero texture, zero motion, zero
   trust reinforcement. Didn't match the polish on the hero marquee +
   scroll-linked cards the rest of the page got.

   After:
     1. Background — navy base + two layered radial glows (warm orange at
        50% 120% below fold, cool navy-2 at 50% -20% above fold) that bloom
        into the edges. Still restrained — glows are <0.15 opacity.
     2. Grain overlay stays (already there via ::before), but desaturated.
     3. Top + bottom hairline with gradient-to-transparent — hints the
        card-rail vocabulary we established on pain-cards without repeating.
     4. CTA button elevated — subtle inner top-highlight, deeper shadow,
        hover lifts 2px + shadow grows.
     5. Trust mini-row below button — NAPEO · SHRM · SOC 2 · 50-State,
        reinforces hero trust marquee. Small (12px), muted (alpha 0.55).
     6. Phone link upgraded — proper secondary action with phone icon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Background upgrade — mesh of navy + warm/cool radial glows */
.ind-cta {
  /* Foundation refactor 2026-04-17: REMOVED border-radius + corrected width.
     Was rendering as a 24px-rounded "card" that crashed visually into the
     flat-edged footer below — rounded corners hitting a hard line. Linear,
     Stripe, Vercel all render bottom CTA bands as full-width flat-edged
     sections that flow into the footer. Doing the same here. */
  background:
    radial-gradient(80% 60% at 50% 120%, rgba(194, 65, 12, 0.14) 0%, transparent 55%),
    radial-gradient(60% 50% at 50% -10%, rgba(41, 171, 226, 0.10) 0%, transparent 60%),
    linear-gradient(135deg, #07192E 0%, #0D2B45 60%, #07192E 100%) !important;
  border-radius: 0 !important;          /* was 24px — kill the rounded card shape */
  margin: 0 !important;                  /* was centered card — now edge-to-edge */
  width: 100% !important;
  padding: clamp(56px, 7vw, 88px) clamp(24px, 4vw, 56px) !important;
  /* Top hairline marks the boundary; no bottom since it flows into footer */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -20px rgba(7, 25, 46, 0.45);
}

/* Desaturate the diagonal grain ::before pattern */
.ind-cta::before {
  opacity: 0.4 !important;
}

.ind-cta h2 {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  letter-spacing: -0.022em !important;
  line-height: 1.12 !important;
  max-width: 18ch;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 20px !important;
}

.ind-cta p {
  font-size: 15.5px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 56ch !important;
  margin-bottom: 32px !important;
}

/* Progressive enhancement: text-wrap balances headlines / pretty smooths
   paragraph orphans. Wrapped in @supports so older browsers (Chrome <114,
   Safari, Firefox) silently fall back to default wrapping — no warning,
   no degraded layout. Downgraded `pretty` to `balance` on the paragraph
   so we get the smaller-engine support window across both rules. */
@supports (text-wrap: balance) {
  .ind-cta h2,
  .ind-cta p { text-wrap: balance; }
}

/* CTA button — elevated, premium feel */
.ind-cta .btn-white-solid {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: #ffffff;
  color: #0D1829;
  border-radius: 10px;
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.005em;
  text-decoration: none;
  /* Layered shadows: inner top highlight + outer lift + accent shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(7, 25, 46, 0.08),
    0 12px 28px -10px rgba(7, 25, 46, 0.45),
    0 8px 20px -12px rgba(194, 65, 12, 0.28);
  transition:
    transform 220ms var(--ease-out, cubic-bezier(.22,1,.36,1)),
    box-shadow 220ms var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.ind-cta .btn-white-solid:hover,
.ind-cta .btn-white-solid:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(7, 25, 46, 0.1),
    0 20px 40px -14px rgba(7, 25, 46, 0.55),
    0 14px 28px -14px rgba(194, 65, 12, 0.38);
}

/* Phone link — secondary action, not orphan text.
   2026-04-17: bumped color .64 → .84 and font-weight 500 → 600 for clearer
   contrast. Was 9.3:1 (AA pass but felt washed out). Now 12.9:1 on navy. */
.ind-cta .phone-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 20px !important;
  padding: 9px 16px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.ind-cta .phone-link::before {
  content: '';
  width: 14px; height: 14px;
  flex: 0 0 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center / contain no-repeat;
}
.ind-cta .phone-link:hover,
.ind-cta .phone-link:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Trust mini-strip below CTA (appended via template update) */
.ind-cta__trust-mini {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ind-cta__trust-mini span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ind-cta__trust-mini span + span::before {
  content: '·';
  margin-right: 18px;
  margin-left: -24px;
  opacity: 0.4;
}

@media (max-width: 767.98px) {
  .ind-cta {
    padding: 48px 20px !important;
    border-radius: 0 !important;  /* full-width edge-to-edge on mobile too */
  }
  .ind-cta h2 {
    font-size: 24px !important;
  }
  .ind-cta__trust-mini {
    font-size: 10px;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Foundation refactor 2026-04-17 — kill the footer rainbow strip.

   site{
  background: linear-gradient(165deg, #0F2541 0%, #091B32 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 20px 40px -16px rgba(0, 0, 0, 0.45),
    0 28px 60px -24px rgba(0, 0, 0, 0.35) !important;
}

.ind-mockup--ledger .im-body {
  position: relative;
  padding: 20px 22px 56px;  /* bottom padding reserves space for stamp */
}

.ind-mockup--ledger .im-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.ind-mockup--ledger .im-title {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
}
.ind-mockup--ledger .im-footer {
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

.im-ledger {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 18px;
  align-items: stretch;
}

.im-ledger::before {
  /* Center divider as a separate column */
  content: '';
  grid-column: 2;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 14%,
    rgba(255, 255, 255, 0.1) 86%,
    transparent 100%);
}

.im-ledger__col {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.im-ledger__col:nth-child(1) { grid-column: 1; }
.im-ledger__col:nth-child(2) { grid-column: 3; }  /* skip the divider column */

.im-ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-ledger__label{
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);  /* was 0.55 — too faint on solid card */
}
.im-ledger__count {
  font-family: var(--font-h, "Poppins", system-ui, sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.im-ledger__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.im-ledger__row {
  padding: 6px 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;              /* was 400 */
  color: rgba(255, 255, 255, 0.88);  /* was 0.68 — now reads clean on solid nav */
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.im-ledger__row:last-child {
  border-bottom: none;
}

/* §3508 DEFENSIBLE stamp — bottom-right pill */
.im-ledger__stamp {
  position: absolute;
  right: 20px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 999px;
  pointer-events: none;
}

footer::before,
.vshr-footer::before,
body footer::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.06) 80%,
    transparent 100%
  ) !important;
  height: 1px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOLVEX ROWS — DESKTOP BASE (ported from HTML benchmark site.css:2412-3049)
   2026-04-21 Phase A.5 — Ryan: "solvex boxes fucked on industry pages"
   Root cause: HTML ref shipped full {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Mobile-only overflow collapse for solvex rows 6+ (2026-05-04).
   Heavy industries (automotive 10 rows, agriculture/education 7-8) used to
   stack all rows vertically on mobile, contributing 6,000+px to scroll
   length. We render the first 5 rows visibly, hide rows 6+ behind a
   "See all N solutions" button on mobile, and let desktop show everything.
   Rows stay in initial DOM either way — preserves SEO/AEO citation surface. */
.solvex-rows__overflow {
  display: contents;        /* Desktop default — overflow rows render inline */
}
.solvex-rows__more-btn {
  display: none;            /* Desktop default — toggle hidden */
}

@media (max-width: 767.98px) {
  .solvex-rows__overflow {
    display: none;          /* Mobile: rows 6+ hidden by default */
  }
  .solvex-rows__overflow.is-open {
    display: contents;      /* Mobile: tapped open — rows render inline */
  }
  .solvex-rows__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px auto 0;
    padding: 14px 24px;
    min-height: 48px;
    background: #FFFFFF;
    color: #07192E;
    border: 1.5px solid rgba(13, 24, 41, .14);
    border-radius: 999px;
    font-family: var(--font-b);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 180ms ease-out, background 180ms ease-out, transform 180ms ease-out;
  }
  .solvex-rows__more-btn:hover,
  .solvex-rows__more-btn:focus-visible {
    border-color: #1479A3;
    background: #F4F8FC;
    outline: none;
  }
  .solvex-rows__more-btn-chev {
    transition: transform 240ms ease-out;
  }
  .solvex-rows__more-btn[aria-expanded="true"] .solvex-rows__more-btn-chev {
    transform: rotate(180deg);
  }
}

.solvex-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main badge";
  gap: 28px;
  align-items: start;
  padding: 28px 32px 28px 34px;
  background: #FFFFFF;
  border: 1px solid rgba(13, 24, 41, .09);
  border-radius: 10px;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(13, 24, 41, .04),
    0 8px 24px -12px rgba(13, 24, 41, .18),
    0 16px 40px -20px rgba(13, 24, 41, .12);
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms ease-out;
  --cat-color: #1779B8;
  --cat-rgb: 23, 121, 184;
}

.solvex-row::before {
  content: '';
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--cat-color) 15%,
    var(--cat-color) 85%,
    transparent 100%
  );
  border-radius: 0 3px 3px 0;
  transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
  z-index: 2;
}

.solvex-row::after {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(var(--cat-rgb), .12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  transition: opacity 180ms ease-out;
}

.solvex-row > * { position: relative; z-index: 1; }

.solvex-row:hover {
  border-color: rgba(var(--cat-rgb), .42);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(13, 24, 41, .05),
    0 14px 32px -14px rgba(var(--cat-rgb), .22),
    0 18px 36px -18px rgba(13, 24, 41, .18);
}
.solvex-row:hover::before { width: 4px; top: 8px; bottom: 8px; }
.solvex-row:hover::after { opacity: 1; }

.solvex-row__main { grid-area: main; min-width: 0; }
.solvex-row__badge{ grid-area: badge; }

.solvex-row__index { display: none; }
.solvex-row__ghost {
  font-family: var(--font-h);
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .85;
  color: var(--cat-color);
  opacity: .16;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.solvex-row:hover .solvex-row__ghost {
  opacity: .24;
  transform: scale(1.04);
}

/* Eyebrow pill chip with topic icon */
.solvex-row__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat-color-text, var(--cat-color));
  line-height: 1;
  margin: 0 0 14px;
  padding: 7px 12px 7px 10px;
  background: rgba(var(--cat-rgb), .09);
  border: 1px solid rgba(var(--cat-rgb), .22);
  border-radius: 6px;
  white-space: nowrap;
}
.solvex-row__eyebrow::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Topic-specific icons — 12 canonical set, via data-topic attribute */
[data-topic="compliance"]::before,
[data-topic="audit"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
[data-topic="payroll"]::before,
[data-topic="money"]::before,
[data-topic="tax"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}
[data-topic="locations"]::before,
[data-topic="multi-loc"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
[data-topic="turnover"]::before,
[data-topic="onboarding"]::before,
[data-topic="hiring"]::before,
[data-topic="recruiting"]::before,
[data-topic="retention"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
[data-topic="seasonal"]::before,
[data-topic="scaling"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
}
[data-topic="wage-hour"]::before,
[data-topic="overtime"]::before,
[data-topic="hours"]::before,
[data-topic="time"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
[data-topic="scheduling"]::before,
[data-topic="calendar"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E");
}
[data-topic="safety"]::before,
[data-topic="osha"]::before,
[data-topic="workers-comp"]::before,
[data-topic="wc"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
[data-topic="credentials"]::before,
[data-topic="licensing"]::before,
[data-topic="documentation"]::before,
[data-topic="docs"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
}
[data-topic="benefits"]::before,
[data-topic="insurance"]::before,
[data-topic="healthcare"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3Cpath d='M3.22 12H9.5l.5-1 2 4 .5-2 .5 1h5.27'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3Cpath d='M3.22 12H9.5l.5-1 2 4 .5-2 .5 1h5.27'/%3E%3C/svg%3E");
}
[data-topic="classification"]::before,
[data-topic="contractors"]::before,
[data-topic="partners"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}
[data-topic="integrations"]::before,
[data-topic="platform"]::before,
[data-topic="systems"]::before,
[data-topic="hris"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

/* Row text elements */
.solvex-row__title {
  font-family: var(--font-h);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 6px;
}

.solvex-row__body {
  font-family: var(--font-b);
  font-size: 14.5px;
  font-weight: 500;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 10px;
  max-width: 62ch;
}

.solvex-row__proof {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.solvex-row__proof svg {
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin-top: 3px;
  stroke: var(--cat-color);
  fill: none;
  stroke-width: 2;
}
.solvex-row__proof strong {
  color: var(--cat-color);
  font-weight: 700;
}

.solvex-row__badge{
  display: inline-flex;
  align-items: center;
  justify-self: end;
  white-space: nowrap;
  font-family: var(--font-b);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cat-color-text, var(--cat-color));
  background: rgba(var(--cat-rgb), .10);
  border: 1px solid rgba(var(--cat-rgb), .22);
  padding: 6px 10px;
  border-radius: 4px;
  line-height: 1.4;
}

/* Color variants — CSS custom props drive accent, glow, border, badge text */
.solvex-row--blue    { --cat-color: #1779B8; --cat-rgb:  23,121,184; --cat-color-text: #115E8F; }
.solvex-row--violet  { --cat-color: #7B21A2; --cat-rgb: 123, 33,162; --cat-color-text: #6B1B8C; }
.solvex-row--magenta { --cat-color: #E8125C; --cat-rgb: 232, 18, 92; --cat-color-text: #9F0E41; }
.solvex-row--emerald { --cat-color: #10B981; --cat-rgb:  16,185,129; --cat-color-text: #047857; }
.solvex-row--amber   { --cat-color: #F59E0B; --cat-rgb: 245,158, 11; --cat-color-text: #B45309; }
.solvex-row--sky     { --cat-color: #0EA5E9; --cat-rgb:  14,165,233; --cat-color-text: #0369A1; }

/* ── v2 Proof Dossier (stakes | advisor | voice) ──────────────────── */
.solvex-row__dossier {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(13, 24, 41, .08);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.solvex-row__stakes {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-b);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: #78350F;
  margin: 0;
}
.solvex-row__stakes::before {
  content: '';
  position: absolute;
  left: 0; top: 1px;
  width: 16px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.solvex-row__stakes strong {
  color: #78350F;
  font-weight: 800;
  background: linear-gradient(180deg, transparent 62%, rgba(245, 158, 11, .22) 62%, rgba(245, 158, 11, .22) 92%, transparent 92%);
  padding: 0 1px;
}

/* v2.2: sr-only zone labels (screen-reader semantics, visually hidden) */
.trust-row-canonical__zone {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.solvex-row__advisor {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  text-decoration: none;
}
.solvex-row__advisor-photo {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center 20%;
  border: 2px solid rgba(var(--cat-rgb), .28);
  box-shadow: 0 2px 8px rgba(13, 24, 41, .08);
  flex-shrink: 0;
}
.solvex-row__advisor-photo::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--cat-rgb), .55);
  pointer-events: none;
  animation: solvex-pulse 2s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes solvex-pulse {
  0%   { transform: scale(.92); opacity: .72; }
  75%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.solvex-row__advisor-meta { min-width: 0; }
.solvex-row__advisor-name {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 2px;
  letter-spacing: -.012em;
}
.solvex-row__advisor-title {
  font-family: var(--font-b);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
  margin: 0 0 5px;
}
.solvex-row__advisor-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-b);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cat-color-text, var(--cat-color));
  text-decoration: none;
  letter-spacing: .01em;
  transition: gap 180ms ease-out;
}
.solvex-row__advisor-cta::after {
  content: '→';
  transition: transform 180ms ease-out;
}
.solvex-row:hover .solvex-row__advisor-cta { gap: 9px; }
.solvex-row:hover .solvex-row__advisor-cta::after { transform: translateX(2px); }

.solvex-row__voice {
  position: relative;
  padding-left: 18px;
  border-left: 2px solid rgba(var(--cat-rgb), .3);
  font-family: var(--font-b);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  margin: 0;
}
.solvex-row__voice cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .005em;
}

/* Section H2 split-headline */
.solvex-head__split {
  display: block;
  font-size: .56em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -.012em;
  margin-top: 12px;
  line-height: 1.35;
}

/* Desktop tablet breakpoint (≤900px) — compress grid but keep the card.
   Mobile <768px handled by .solvex-row__more-btn expand pattern at line 1534. */
@media (max-width: 900px) and (min-width: 768.01px) {
  .solvex-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "badge";
    gap: 14px 18px;
    padding: 22px 22px 22px 26px;
  }
  { justify-self: end; align-self: center; }
  .solvex-row__title { font-size: 17px; }
  .solvex-row__body  { font-size: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .solvex-row,
  .solvex-row::before,
  .solvex-row::after { transition: none !important; }
  .solvex-row:hover { transform: none !important; }
  .solvex-row__advisor-photo::after { animation: none !important; }
}
/* ═══ END SOLVEX ROWS port ════════════════════════════════════════════════ */

/* ═══ COMPLIANCE LANDSCAPE — accordion of all pains ═════════════════════════
   Native <details> elements styled as glass cards on dark section bg.
   Stays in initial HTML for Google + LLM indexing while collapsed.
   Visual treatment matches solvex-row aesthetic: light card on navy,
   amber accent on hover/open, mono eyebrow vocabulary.
*/
.ind-landscape {
  position: relative;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 3.2vw, 48px);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244, 248, 252, 0.04) 0%, transparent 70%),
    linear-gradient(180deg, #0d2b45 0%, #07192e 100%);
  color: #fff;
  overflow: hidden;
}
.ind-landscape::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}
.ind-landscape > * { position: relative; z-index: 1; }

.ind-landscape .sec-head {
  max-width: 1080px;
  margin: 0 auto 40px;
  text-align: center;
}
.ind-landscape .sec-head h2 {
  font-family: var(--font-h);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.ind-landscape__intro {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 14px auto 0;
  max-width: 540px;
}

.ind-landscape__list {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .ind-landscape__list { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (min-width: 1100px) {
  .ind-landscape__list { grid-template-columns: 1fr 1fr 1fr; }
}

.ind-landscape__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.ind-landscape__item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 158, 11, 0.35);
}
.ind-landscape__item[open] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 158, 11, 0.45);
}

.ind-landscape__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ind-landscape__summary::-webkit-details-marker { display: none; }

.ind-landscape__item-title {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: #fff;
  flex: 1;
}

.ind-landscape__chev {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ind-landscape__item:hover .ind-landscape__chev { color: #f59e0b; }
.ind-landscape__item[open] .ind-landscape__chev {
  transform: rotate(180deg);
  color: #f59e0b;
}

.ind-landscape__body {
  padding: 0 20px 18px;
}
.ind-landscape__body p {
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 12px;
}
.ind-landscape__solve-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: #f59e0b;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ind-landscape__solve-link:hover { color: #fbbf24; }

@media (min-width: 768px) {
  .ind-landscape__summary { padding: 20px 22px; }
  .ind-landscape__item-title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ind-landscape__item,
  .ind-landscape__item-title,
  .ind-landscape__chev,
  .ind-landscape__solve-link { transition: none !important; }
}
/* ═══ END COMPLIANCE LANDSCAPE ════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST-CHIP PILL TREATMENT (2026-05-05)

   Was: chips inside {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.trust-row-canonical a.trust-chip-c:hover,
.trust-row-canonical a.trust-chip-c:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  outline: none;
}

/* Light variant (when row is not --ondark) — subtle navy pill on light bg */
.trust-row-canonical:not(.trust-row-canonical--ondark) {
  background: rgba(13, 24, 41, 0.04);
  border-color: rgba(13, 24, 41, 0.10);
}
.trust-row-canonical:not(.trust-row-canonical--ondark) a.trust-chip-c:hover,
.trust-row-canonical:not(.trust-row-canonical--ondark) a.trust-chip-c:focus-visible {
  background: rgba(13, 24, 41, 0.08);
  border-color: rgba(13, 24, 41, 0.18);
}

/* Mobile: tighter padding so all pills fit + scrollable rather than wrapping */
@media (max-width: 767.98px) {
  .trust-row-canonical .trust-chip-c {
    padding: 5px 10px;
    flex-shrink: 0;       /* prevent squish in horizontal scroll */
  }
}

/* Pill polish 2026-05-13: kill the dotted underline that made the
   external-link word ('NAPEO', 'SHRM', 'SOC 2') look low-rent on mobile.
   The underline was a hover-affordance leftover — replaced with a
   subtle weight bump on hover instead. */
.trust-row-canonical a.trust-chip-c,
.trust-row-canonical a.trust-chip-c .chip-external-label {
  text-decoration: none !important;
}
.trust-row-canonical a.trust-chip-c:hover .chip-external-label,
.trust-row-canonical a.trust-chip-c:focus-visible .chip-external-label{
  text-decoration: none;
}
/* Even the typography inside the chip so the linked word and the suffix
   read as one phrase, not two competing tiers. */
.trust-row-canonical .chip-external-label {
  font-weight: 700;
}
.trust-row-canonical .trust-chip-c{
  font-weight: 600;
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   IND-MOCKUP — 3 NEW VARIANTS (2026-05-19 pass 11)

   Adds page-specific signature mockups for the top-3 industry templates
   per audit recommendation. Variants are component-level so a single
   investment unlocks all matching industry slugs.

   .im-cred    — credential card stack (healthcare; EKG line allowed)
   .im-form    — WH-347 form facsimile (construction)
   .im-receipt — POS-style tip reconciliation (hospitality)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CREDENTIAL VARIANT (healthcare) ──────────────────────────────────── */
.ind-mockup--credential .im-body { padding: 14px 18px 8px; }
.im-cred {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.im-cred__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.im-cred__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.im-cred__label {
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.im-cred__value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.im-cred__expire {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.im-cred__expire-label {
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 9.5px; font-weight: 700;
  color: rgba(255, 255, 255, 0.40);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.im-cred__expire-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}
.im-cred__status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.18);
  color: #6FE0AF;
  flex-shrink: 0;
}
.im-cred__row--warn .im-cred__status {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
}
.im-cred__row--warn .im-cred__expire-val {
  color: #FBBF24;
}
.im-cred__row--expired .im-cred__status {
  background: rgba(220, 38, 38, 0.18);
  color: #FCA5A5;
}
/* EKG line — healthcare-only motif (memory: feedback_ekg_healthcare_only) */
.im-cred__ekg {
  display: block;
  width: 100%; height: 32px;
  margin: 14px 0 4px;
  color: rgba(16, 185, 129, 0.65);
  overflow: visible;
}
.im-cred__ekg polyline {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: im-ekg-sweep 3.6s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes im-ekg-sweep {
  0%   { stroke-dashoffset: 600; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -600; }
}
@media (prefers-reduced-motion: reduce) {
  .im-cred__ekg polyline { animation: none !important; stroke-dashoffset: 0; }
}

/* ── FORM VARIANT (construction WH-347 facsimile) ─────────────────────── */
.ind-mockup--form .im-body { padding: 0; }
.im-form {
  background: #FAF8F2; /* aged-paper tone */
  color: #1F2937;
  padding: 14px 16px 16px;
  position: relative;
}
.im-form__masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #1F2937;
  margin-bottom: 8px;
}
.im-form__agency {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 9.5px;
  font-weight: 600;
  color: #1F2937;
  letter-spacing: 0.02em;
}
.im-form__formno {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #1F2937;
  letter-spacing: 0.08em;
}
.im-form__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin-bottom: 10px;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 10px;
  color: #1F2937;
}
.im-form__meta-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.im-form__meta-k {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: #4B5563;
}
.im-form__meta-v { font-weight: 600; }
.im-form__table {
  width: 100%; border-collapse: collapse;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 10.5px;
  color: #1F2937;
}
.im-form__table th,
.im-form__table td {
  text-align: left; padding: 4px 6px;
  border-bottom: 1px solid #D1D5DB;
}
.im-form__table th {
  font-weight: 700; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: #4B5563;
  border-bottom: 1.5px solid #1F2937;
}
.im-form__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.im-form__stamp {
  position: absolute;
  bottom: 12px; right: 12px;
  transform: rotate(-8deg);
  border: 2px solid #B91C1C;
  color: #B91C1C;
  padding: 4px 10px;
  border-radius: 3px;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.78;
}

/* ── RECEIPT VARIANT (hospitality POS) ────────────────────────────────── */
.ind-mockup--receipt .im-body { padding: 14px 16px 16px; }
.im-receipt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #fff;
}
.im-receipt__table {
  width: 100%; border-collapse: collapse;
  font-size: 11.5px;
}
.im-receipt__table th,
.im-receipt__table td {
  text-align: left; padding: 5px 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
}
.im-receipt__table th {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 7px;
}
.im-receipt__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.im-receipt__credit--ok { color: #6FE0AF; font-weight: 700; }
.im-receipt__credit--warn { color: #FBBF24; font-weight: 700; }
.im-receipt__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-receipt__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-receipt__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-receipt__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.im-receipt__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-receipt__check dd { color: #6FE0AF; }

/* ─────────────────────────────────────────────────────────────────────
   .im-equity — cap-table grant ledger (technology)
   ───────────────────────────────────────────────────────────────────── */
.im-equity {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-equity__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-equity__table th,
.im-equity__table td {
  padding: 7px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-equity__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-equity__table .num { text-align: right; font-family: 'JetBrains Mono','SF Mono',Menlo,monospace; }
.im-equity__table tbody tr { transition: background 200ms ease; }
.im-equity__table tbody tr:hover { background: rgba(99, 102, 241, 0.06); }
.im-equity__grant {
  display: inline-block;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}
.im-equity__grant--iso { color: #A5B4FC; background: rgba(99,102,241,0.10); }       /* indigo */
.im-equity__grant--nso { color: #FCD34D; background: rgba(245,158,11,0.10); }       /* amber */
.im-equity__grant--rsu { color: #6FE0AF; background: rgba(16,185,129,0.10); }       /* emerald */
.im-equity__vest {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 64px;
  justify-content: flex-end;
}
.im-equity__vest-meter {
  position: relative;
  width: 36px; height: 5px;
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
  overflow: hidden;
}
.im-equity__vest-meter::after {
  content: ''; position: absolute; inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, #6FE0AF 0%, #34D399 100%);
  border-radius: 3px;
  transition: width 600ms cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 6px rgba(52,211,153,0.45);
}
.im-equity__vest-pct {
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.im-equity__status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.im-equity__status--on-track { color: #6FE0AF; background: rgba(16,185,129,0.12); }
.im-equity__status--warn     { color: #FBBF24; background: rgba(245,158,11,0.14); animation: im-equity-pulse 2.4s ease-in-out infinite; }
.im-equity__status--refresh  { color: #93C5FD; background: rgba(59,130,246,0.14); }
@keyframes im-equity-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(251,191,36,0.20); }
}
@media (prefers-reduced-motion: reduce) {
  .im-equity__status--warn { animation: none; }
  .im-equity__vest-meter::after { transition: none; }
}
.im-equity__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-equity__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-equity__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-equity__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-equity__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-equity__check dd { color: #A5B4FC; }  /* indigo — next vest = scheduled */

/* ─────────────────────────────────────────────────────────────────────
   .im-eld — Driver Hours-of-Service log (transportation)
   ───────────────────────────────────────────────────────────────────── */
.im-eld {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-eld__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-eld__table th,
.im-eld__table td {
  padding: 7px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-eld__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-eld__table .num {
  text-align: right;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-eld__tr { transition: background 220ms ease; }
.im-eld__tr:hover { background: rgba(96, 165, 250, 0.06); }
.im-eld__tr--alert {
  background: rgba(251, 191, 36, 0.06);
}
.im-eld__tr--alert .num:last-of-type { color: #FBBF24; font-weight: 700; }
.im-eld__status {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-eld__status--d   { color: #FCA5A5; background: rgba(239,68,68,0.12); position: relative; }
.im-eld__status--on  { color: #FCD34D; background: rgba(245,158,11,0.12); }
.im-eld__status--sb  { color: #93C5FD; background: rgba(59,130,246,0.12); }
.im-eld__status--off { color: #6FE0AF; background: rgba(16,185,129,0.10); }
.im-eld__status--d::after {
  content: ''; position: absolute; top: 50%; right: -3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #FCA5A5; transform: translateY(-50%);
  animation: im-eld-drive 1.6s ease-in-out infinite;
}
@keyframes im-eld-drive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(252,165,165,0); }
}
@media (prefers-reduced-motion: reduce) {
  .im-eld__status--d::after { animation: none; }
}
.im-eld__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-eld__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-eld__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-eld__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-eld__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-eld__check dd { color: #6FE0AF; }

/* ─────────────────────────────────────────────────────────────────────
   .im-broker — FINRA BrokerCheck registration board (financial-services)
   ───────────────────────────────────────────────────────────────────── */
.im-broker {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-broker__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-broker__table th,
.im-broker__table td {
  padding: 7px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-broker__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-broker__table .num {
  text-align: right;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-broker__table tbody tr:hover { background: rgba(99, 102, 241, 0.06); }
.im-broker__licenses { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.im-broker__lic {
  display: inline-block;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-broker__lic--s7  { color: #93C5FD; background: rgba(59,130,246,0.10); }   /* Series 7 — navy/blue */
.im-broker__lic--s63 { color: #A5B4FC; background: rgba(99,102,241,0.10); }   /* Series 63 — indigo */
.im-broker__lic--s65 { color: #5EEAD4; background: rgba(20,184,166,0.10); }   /* Series 65 — teal */
.im-broker__lic--s66 { color: #C4B5FD; background: rgba(139,92,246,0.10); }   /* Series 66 — violet */
.im-broker__lic--s24 { color: #FCD34D; background: rgba(245,158,11,0.10); }   /* Series 24 — gold */
.im-broker__status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.im-broker__status--current { color: #6FE0AF; background: rgba(16,185,129,0.12); }
.im-broker__status--warn    { color: #FBBF24; background: rgba(245,158,11,0.14); animation: im-broker-pulse 2.4s ease-in-out infinite; }
.im-broker__status--amend   { color: #C4B5FD; background: rgba(139,92,246,0.14); }
.im-broker__status--onboard { color: #93C5FD; background: rgba(59,130,246,0.14); }
@keyframes im-broker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(251,191,36,0.20); }
}
@media (prefers-reduced-motion: reduce) {
  .im-broker__status--warn { animation: none; }
}
.im-broker__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-broker__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-broker__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-broker__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-broker__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-broker__check dd { color: #6FE0AF; }

/* ─────────────────────────────────────────────────────────────────────
   .im-shift — Plant shift-coverage board (manufacturing)
   3-shift roll-up with OSHA 300 flag per shift + e-mod/WC totals.
   ───────────────────────────────────────────────────────────────────── */
.im-shift {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-shift__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-shift__table th,
.im-shift__table td {
  padding: 7px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-shift__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-shift__table .num {
  text-align: right;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-shift__tr:hover { background: rgba(96, 165, 250, 0.06); }
.im-shift__window {
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,0.68);
}
.im-shift__status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.im-shift__status--full  { color: #6FE0AF; background: rgba(16,185,129,0.12); }
.im-shift__status--light { color: #FCD34D; background: rgba(245,158,11,0.12); }
.im-shift__status--short { color: #FCA5A5; background: rgba(239,68,68,0.14); animation: im-shift-warn 2.2s ease-in-out infinite; }
@keyframes im-shift-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(252,165,165,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .im-shift__status--short { animation: none; }
}
.im-shift__osha {
  display: inline-block;
  min-width: 28px;
  padding: 2px 8px;
  text-align: center;
  font-size: 11px; font-weight: 800;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-shift__osha--clean { color: #6FE0AF; background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.35); }
.im-shift__osha--flag  { color: #FCA5A5; background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.45); }
.im-shift__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-shift__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-shift__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-shift__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-shift__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-shift__check dd { color: #6FE0AF; }

/* ─────────────────────────────────────────────────────────────────────
   .im-piece — H-2A piece-rate ticket (agriculture)
   Picker + crop + units + $/unit + gross + AEWR-met flag.
   Aesthetic: rural ticket-book — mono digits, soft green for "AEWR met."
   ───────────────────────────────────────────────────────────────────── */
.im-piece {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-piece__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-piece__table th,
.im-piece__table td {
  padding: 7px 5px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-piece__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-piece__table .num {
  text-align: right;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-piece__table tbody tr:hover { background: rgba(16, 185, 129, 0.05); }
.im-piece__crop {
  font-size: 10.5px;
  color: rgba(255,255,255,0.72);
  font-style: italic;
}
.im-piece__aewr {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.im-piece__aewr--met  { color: #6FE0AF; background: rgba(16,185,129,0.12); }
.im-piece__aewr--top  { color: #FCD34D; background: rgba(245,158,11,0.14); animation: im-piece-up 2.4s ease-in-out infinite; }
@keyframes im-piece-up {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,211,77,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(252,211,77,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .im-piece__aewr--top { animation: none; }
}
.im-piece__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-piece__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-piece__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-piece__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-piece__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-piece__check dd { color: #6FE0AF; }

/* ─────────────────────────────────────────────────────────────────────
   .im-store — Retail multi-store coverage board (retail)
   Store / state / min-wage band / coverage % / ASM-on-shift.
   Wage tiers: low ($7.25 federal) / mid ($12-15 state) / high ($15+ city).
   ───────────────────────────────────────────────────────────────────── */
.im-store {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-store__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-store__table th,
.im-store__table td {
  padding: 7px 5px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-store__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-store__table .num {
  text-align: right;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-store__table tbody tr:hover { background: rgba(96, 165, 250, 0.06); }
.im-store__state {
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,0.68);
  text-transform: uppercase;
}
.im-store__wage {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-store__wage--low  { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.06); }   /* federal $7.25 — neutral */
.im-store__wage--mid  { color: #93C5FD; background: rgba(59,130,246,0.10); }                   /* state $12-15 */
.im-store__wage--high { color: #C4B5FD; background: rgba(139,92,246,0.10); }                   /* city $15+ */
.im-store__cover {
  display: inline-block;
  min-width: 38px;
  padding: 2px 8px;
  text-align: right;
  font-size: 11px; font-weight: 800;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-store__cover--good { color: #6FE0AF; background: rgba(16,185,129,0.10); }
.im-store__cover--mid  { color: #FCD34D; background: rgba(245,158,11,0.10); }
.im-store__cover--low  { color: #FCA5A5; background: rgba(239,68,68,0.12); animation: im-store-low 2.4s ease-in-out infinite; }
@keyframes im-store-low {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(252,165,165,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .im-store__cover--low { animation: none; }
}
.im-store__asm {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.im-store__asm--on  { color: #6FE0AF; background: rgba(16,185,129,0.12); }
.im-store__asm--off { color: #FBBF24; background: rgba(245,158,11,0.14); }
.im-store__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-store__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-store__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-store__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-store__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-store__check dd { color: #6FE0AF; }

/* ─────────────────────────────────────────────────────────────────────
   .im-util — Consultant utilization board (professional-services, nonprofit)
   ───────────────────────────────────────────────────────────────────── */
.im-util {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-util__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-util__table th,
.im-util__table td {
  padding: 7px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-util__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-util__table .num {
  text-align: right;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-util__table tbody tr:hover { background: rgba(99, 102, 241, 0.06); }
.im-util__level {
  font-size: 10.5px;
  color: rgba(255,255,255,0.68);
}
.im-util__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px; font-weight: 800;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
{ color: #34D399; background: rgba(16,185,129,0.14); }
{ color: #6FE0AF; background: rgba(16,185,129,0.10); }
{ color: #FCA5A5; background: rgba(239,68,68,0.14); animation: im-util-bench 2.4s ease-in-out infinite; }
@keyframes im-util-bench {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(252,165,165,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  { animation: none; }
}
.im-util__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-util__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-util__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-util__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-util__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-util__check dd { color: #A5B4FC; }  /* next draw = scheduled */

/* ─────────────────────────────────────────────────────────────────────
   .im-flat — Dealership flat-rate tech board (automotive)
   ───────────────────────────────────────────────────────────────────── */
.im-flat {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.im-flat__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.im-flat__table th,
.im-flat__table td {
  padding: 7px 5px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.im-flat__table th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}
.im-flat__table .num {
  text-align: right;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-flat__table tbody tr:hover { background: rgba(96, 165, 250, 0.06); }
.im-flat__ro { color: rgba(255,255,255,0.65); }
.im-flat__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px; font-weight: 800;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
{ color: #34D399; background: rgba(16,185,129,0.14); }
{ color: #6FE0AF; background: rgba(16,185,129,0.10); }
{ color: #FCA5A5; background: rgba(239,68,68,0.14); animation: im-flat-below 2.4s ease-in-out infinite; }
@keyframes im-flat-below {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(252,165,165,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  { animation: none; }
}
.im-flat__totals {
  margin: 12px 0 0;
  display: grid; gap: 4px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-top: 10px;
}
.im-flat__totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.im-flat__totals dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.im-flat__totals dd {
  font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace;
}
.im-flat__check { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
.im-flat__check dd { color: #6FE0AF; }

/* ── Mobile responsive for all 10 new variants ─────────────────────────── */
@media (max-width: 640px) {
  .im-cred__row { grid-template-columns: 1fr auto; }
  .im-cred__expire { display: none; }
  .im-form__meta { grid-template-columns: 1fr; }
  .im-form__table th:nth-child(3),
  .im-form__table td:nth-child(3) { display: none; }
  .im-receipt__table th:nth-child(3),
  .im-receipt__table td:nth-child(3) { display: none; }
  .im-equity__table th:nth-child(3),
  .im-equity__table td:nth-child(3) { display: none; }
  { width: 28px; }
}

/* ─────────────────────────────────────────────────────────────────────
   .ind-social-proof — industry-page social-proof block padding tighten
   (2026-05-20 P0 polish: was 96px clamp from svc-components .sec rule).
   Needs body.premium specificity + !important to beat the global
   `body.premium main section.sec` !important padding inheritance.
   ───────────────────────────────────────────────────────────────────── */
body.premium main section.ind-social-proof,
body.premium main .ind-social-proof,
.ind-social-proof.sec {
  padding-top: 32px !important;
  padding-bottom: 36px !important;
}
@media (max-width: 768px) {
  body.premium main section.ind-social-proof,
  body.premium main .ind-social-proof,
  .ind-social-proof.sec {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }
}


/* ─── 2026-05-20 MOBILE CTA POLISH ──────────────────────────────────
   Industry/service heroes pass long text like "Talk to a Healthcare
   Specialist" through .btn-blue-solid. Without a nowrap rule the arrow
   icon orphans onto a 2nd line, leaving the button looking broken.
   Reduce font + padding on mobile so the longest common CTA fits in
   one line at 375 (≈287 button width). */
@media (max-width: 480px) {
  .btn-blue-solid,
  .btn-orange-solid,
  .btn-white-solid {
    white-space: nowrap;
    font-size: 14.5px !important;
    letter-spacing: -0.1px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
  }
}