@charset "utf-8";

:root {
  --infiltra-coral: #ff7c7c;
  /* Approved Infiltra Tagline Gradient (Locked): Sunset Amber -> Coral Rose -> Scope Purple -> Deep Purple */
  --infiltra-gradient-tagline: linear-gradient(90deg, #de7a38 0%, #c86684 28%, #9472a8 55%, #7e42b8 100%);
  --infiltra-tagline-amber: #de7a38;
  --infiltra-tagline-coral: #c86684;
  --infiltra-tagline-purple: #9472a8;
  --infiltra-tagline-purple-deep: #7e42b8;
}

html,
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.text-coral {
  color: var(--infiltra-coral);
}

.bg-coral {
  background-color: var(--infiltra-coral);
}

.border-coral {
  border-color: var(--infiltra-coral);
}

.btn-primary {
  background-color: var(--infiltra-coral);
  color: rgb(255, 255, 255);
  transition: 0.25s;
}

.btn-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn-secondary:hover {
  background: rgb(248, 250, 252);
}

.nav-link:hover {
  color: var(--infiltra-coral);
}

.glass {
  backdrop-filter: blur(10px);
}

.grad-hero {
  background: radial-gradient(900px at 10% 10%, rgba(249, 101, 101, 0.12), transparent 55%), radial-gradient(700px at 90% 20%, rgba(2, 6, 23, 0.08), transparent 55%);
}

details>summary {
  list-style: none;
  cursor: pointer;
}

details>summary::-webkit-details-marker {
  display: none;
}

.bg-infiltra-band {
  background: radial-gradient(900px at 20% 20%, rgba(255, 92, 92, 0.14), transparent 60%), radial-gradient(700px at 80% 25%, rgba(15, 23, 42, 0.08), transparent 55%), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
}

.attacker-terminal {
  background: rgb(28, 25, 25);
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 50px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  width: 100%;
  max-width: none;
  margin: 0px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.terminal-header {
  background: rgb(38, 35, 35);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dot {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  margin-right: 5px;
}

.red {
  background: rgb(255, 95, 86);
}

.yellow {
  background: rgb(255, 189, 46);
}

.green {
  background: rgb(39, 201, 63);
}

.terminal-title {
  color: rgb(203, 213, 225);
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 8px;
  letter-spacing: 0.02em;
}

.terminal-body {
  padding: 14px 16px;
  height: 335px;
  overflow-y: auto;
  color: rgb(226, 232, 240);
  font-size: 11px;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.terminal-body::-webkit-scrollbar {
  width: 5px;
}

.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.terminal-line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 3px;
}

.terminal-prefix {
  white-space: nowrap;
  margin-right: 8px;
  flex-shrink: 0;
}

.terminal-message {
  flex-grow: 1;
  word-break: break-word;
  color: #cbd5e1;
}

.tag-red-team {
  color: #f87171;
  font-weight: 700;
}

.tag-user {
  color: #facc15;
  font-weight: 700;
}

.tag-assistant {
  color: #38bdf8;
  font-weight: 700;
}

.tag-exploit {
  color: #ef4444;
  font-weight: 800;
}

.text-user {
  color: #fef08a;
}

.text-assistant {
  color: #e2e8f0;
}

.text-secret {
  color: #fca5a5;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.18);
  padding: 0 4px;
  border-radius: 3px;
  display: inline-block;
}

.exploit-text {
  color: #ff5c5c;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.agent-tag {
  color: rgb(213, 210, 210);
}

/* Turn-by-Turn Exploit Dialogue Dashboard Viewer */
.exploit-viewer {
  background: #131221;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  width: 100%;
  overflow: hidden;
  border: 1px solid #27253e;
}

.exploit-viewer-header {
  background: #4c4c4c57;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #27253e;
}

.exploit-viewer-header-left {
  display: flex;
  align-items: center;
}

.exploit-viewer-title {
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-left: 8px;
}

.exploit-viewer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  padding: 2px 8px;
  border-radius: 999px;
}

.exploit-viewer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

.exploit-viewer-body {
  padding: 12px 14px;
  height: 295px;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.exploit-viewer-body::-webkit-scrollbar {
  width: 5px;
}

.exploit-viewer-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.turn-card {
  background: #1a192c;
  border: 1px solid #28263f;
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.2s ease;
  animation: turnCardFadeIn 0.4s ease-out;
}

@keyframes turnCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.turn-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.badge-attacker {
  background: #d64e6ce8;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.badge-assistant {
  background: #278b6cfc;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.turn-num {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

.turn-text {
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.json-response {
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.json-secret {
  color: #f87171;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.18);
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
}

.exploit-result-card {
  background: rgba(225, 29, 72, 0.09);
  border: 1px solid rgba(225, 29, 72, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
}

.exploit-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e11d48;
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.exploit-result-meta {
  color: #fca5a5;
  font-size: 11px;
  line-height: 1.45;
}

.exploit-result-meta strong {
  color: #ffffff;
}

.modal-enter {
  animation: 0.3s ease-out 0s 1 normal forwards running fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Infiltra 2026 dual-product refresh - additions only; core visual language retained */
:root {
  --infiltra-coral: #ff7c7c;
  --ink: #0f172a;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
}

.product-pair {
  display: grid;
  gap: 1.25rem;
}

@media (min-width:768px) {
  .product-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.product-card {
  position: relative;
  overflow: hidden;
}

.product-card:before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--infiltra-coral);
}

.product-kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f96565;
}

.mini-grid {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

@media (min-width:640px) {
  .mini-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mini-panel {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: .9rem;
  padding: 1rem;
}

.mini-panel strong {
  display: block;
  color: #0f172a;
  margin-bottom: .3rem;
}

.track-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  border-radius: 999px;
  padding: .4rem .58rem;
}

.track-web {
  background: #f1f5f9;
  color: #334155;
}

.track-ai {
  background: #fff1f1;
  color: #d95757;
}

.how-split {
  border-top: 1px solid #eef2f7;
  margin-top: .8rem;
  padding-top: .8rem;
}

.how-split:first-of-type {
  border-top: 0;
  margin-top: .9rem;
  padding-top: 0;
}

.how-copy {
  margin-top: .45rem;
  color: #64748b;
  font-size: .84rem;
  line-height: 1.55;
}

.terminal-switch {
  display: flex;
  gap: .5rem;
  margin: 0 0 .75rem 0;
}

.terminal-switch button {
  border: 1px solid #e2e8f0;
  background: white;
  color: #475569;
  border-radius: 999px;
  padding: .42rem .72rem;
  font-weight: 800;
  font-size: .72rem;
  cursor: pointer;
}

.terminal-switch button.active {
  background: #0f172a;
  border-color: #0f172a;
  color: white;
}

.feature-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff1f1;
  color: #f96565;
  flex: 0 0 auto;
}

.feature-badge svg {
  width: 1.2rem;
  height: 1.2rem;
}

.product-tabs {
  display: inline-flex;
  padding: .35rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.product-tabs button {
  border: 0;
  background: transparent;
  padding: .72rem 1.15rem;
  border-radius: 9999px;
  font-weight: 400 !important;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.product-tabs button.active {
  background: #0f172a;
  color: white;
  font-weight: 400 !important;
}

.pricing-panel[hidden] {
  display: none !important;
}

.price-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.price-card .grow {
  flex: 1;
}

.price-card.recommended {
  border-color: #ff7c7c;
  box-shadow: 0 10px 35px rgba(249, 101, 101, .12);
}

.reco-ribbon {
  display: inline-flex;
  align-self: flex-start;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #db5757;
  border: none;
  font-weight: 900;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .55rem 0;
  color: #475569;
  font-size: .875rem;
  line-height: 1.45;
}

.check-list li:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  background-color: #ff7c7c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath d='M7.7 14.3 3.9 10.6l1.4-1.4 2.4 2.4 6.9-6.9 1.4 1.4-8.3 8.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath d='M7.7 14.3 3.9 10.6l1.4-1.4 2.4 2.4 6.9-6.9 1.4 1.4-8.3 8.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.subnav {
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}

.subnav-inner {
  max-width: 80rem;
  margin: auto;
  padding: .7rem 1.25rem;
  display: flex;
  gap: 1rem;
  overflow: auto;
  white-space: nowrap;
  font-size: .85rem;
}

.subnav a {
  color: #64748b;
  font-weight: 700;
}

.subnav a:hover {
  color: #f96565;
}

.owasp-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.4rem;
}

.owasp-strip span {
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 999px;
  padding: .45rem .72rem;
  color: #475569;
  font-weight: 700;
  font-size: .78rem;
}

.lifecycle {
  display: grid;
  gap: .8rem;
}

@media(min-width:768px) {
  .lifecycle {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.lifecycle-step {
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 1rem;
  padding: 1.35rem 1.15rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lifecycle-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
  border-color: #94a3b8;
}

.lifecycle-step .how-card-num,
.lifecycle-step .num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.lifecycle-step strong {
  display: block;
  color: #0f172a;
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 0.35rem 0;
}

.faq-grid {
  display: grid;
  gap: 1rem;
}

.faq-grid details {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: white;
  padding: 1.1rem 1.25rem;
}

.faq-grid summary {
  font-weight: 800;
  color: #0f172a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-grid summary:after {
  content: "+";
  color: #f96565;
  font-size: 1.25rem;
}

.faq-grid details[open] summary:after {
  content: "−";
}

.faq-grid details p {
  margin: .9rem 0 .2rem;
  color: #64748b;
  line-height: 1.65;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.compare-table th,
.compare-table td {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.compare-table th {
  color: #0f172a;
  background: #f8fafc;
  font-weight: 900;
}

.compare-table td {
  color: #475569;
}

.ai-accent {
  background: linear-gradient(135deg, rgba(255, 124, 124, .11), rgba(255, 255, 255, .82));
}

@media(max-width:767px) {
  .product-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    border-radius: 9999px !important;
    padding: .28rem;
    box-sizing: border-box;
  }

  .product-tabs button {
    flex: 1 1 50%;
    min-width: 0;
    padding: .65rem .35rem;
    font-size: clamp(0.65rem, 2.6vw, 0.82rem);
    white-space: nowrap;
    text-align: center;
    border-radius: 9999px !important;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Safeguards for utility classes used by the refresh but not present in the current compiled sheet */
.w-72 {
  width: 18rem
}

.h-auto {
  height: auto
}

.my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem
}

.mt-7 {
  margin-top: 1.75rem
}

.pb-12 {
  padding-bottom: 3rem
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem
}

.min-h-\[190px\] {
  min-height: 190px
}

.border-white\/20 {
  border-color: rgba(255, 255, 255, .2)
}

.ring-\[\#ffebe6\] {
  --tw-ring-color: #ffebe6
}

.text-\[\#FF5C5C\] {
  color: #FF5C5C
}

.hover\:text-coral:hover {
  color: var(--infiltra-coral)
}

/* Sept 2026 consistency pass: navigation, footer and pricing alignment */
.nav-link {
  white-space: nowrap;
}

.nav-products {
  width: 23rem;
}

.group:focus-within .nav-dropdown-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.group:focus-within .nav-dropdown-caret {
  transform: rotate(180deg);
}

.price-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5rem !important;
  height: 100%;
}

.price-block {
  min-height: 4.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.price-block .price-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.price-card .reco-ribbon {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  margin: 0;
}

.hover\:bg-white\/10:hover {
  background-color: rgba(255, 255, 255, .1);
}

@media (min-width:40rem) {
  .sm\:hidden {
    display: none
  }
}

@media (min-width:48rem) {
  .md\:justify-between {
    justify-content: space-between
  }

  .md\:text-left {
    text-align: left
  }
}

/* The six-item nav doesn't fit between 1024px and 1280px, so the menu button is used until xl */
@media (min-width:80rem) {
  .xl\:flex {
    display: flex
  }

  .xl\:hidden {
    display: none
  }
}

.terminal-rule {
  border-top: 1px dashed rgba(255, 255, 255, .25);
  margin: .5rem 0;
}

/* Cards side by side share rows, so titles, text, panels and links line up whatever the text length */
@media (min-width:48rem) {

  .rows-2>*,
  .rows-3>*,
  .rows-4>*,
  .rows-7>*,
  .rows-8>* {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .rows-2>* {
    grid-row: span 2;
  }

  .rows-3>* {
    grid-row: span 3;
  }

  .rows-4>* {
    grid-row: span 4;
  }



  /* Enterprise-only list fills the rows other plans use for their groups */
  .product-card>a {
    justify-self: start;
  }

  .rows-3>.lifecycle-step {
    min-height: 0;
  }

  /* rows set the height; min-height would pad them unevenly */
}

.price-card>a {
  white-space: nowrap;
}

.price-card>a.btn-primary {
  border: 1px solid transparent;
}

/* same height as the outlined buttons */

/* Pricing cards: grouped feature lists, as on the live pricing page */
.plan-group {
  border-top: 1px solid #eef2f7;
  margin-top: 1.1rem;
  padding-top: 1rem;
}

.plan-group-title {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #475569;
}

.plan-group .check-list {
  margin-top: .35rem;
}

.plan-group .check-list li {
  margin: .45rem 0;
}

.addon-list li:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  background-color: #ff7c7c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath d='M10 4a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H5a1 1 0 1 1 0-2h4V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath d='M10 4a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H5a1 1 0 1 1 0-2h4V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.addon-note {
  display: inline-block;
  margin-top: .2rem;
  font-size: .8rem;
  font-weight: 700;
  color: #e75f5f;
}

.addon-note:hover {
  text-decoration: underline;
}

.addon-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  line-height: 1;
}

.addon-price-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.12rem 0.45rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  line-height: 1.2;
}

.badge-coming-soon {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 400;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 0.1rem 0.38rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
}

.plan-group-optional {
  position: relative;
  border-top: 1px solid #e2e8f0;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.addon-ribbon-green {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-weight: 800;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
}

@media (min-width: 768px) {
  #price-web .price-card .plan-group.span-rest {
    min-height: 22.3rem;
  }
  #price-ai .price-card .plan-group.span-rest {
    min-height: 19.3rem;
  }
}

.reco-ribbon.ribbon-dark {
  background: #0f172a;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.price-card.startup {
  border-color: #0f172a;
}

/* Pricing layout matching original pricing.html v1.0 specifications */
.pricing-container-v1 {
  width: 100%;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .pricing-container-v1 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.pricing-grid-v1,
.gap-8 {
  gap: 2rem !important;
}

.pricing-grid-ai {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .pricing-grid-ai {
    /* Exact WebApp card width + 15%:
       WebApp card = (100% - 3*2rem)/4.
       AI card = 1.15 * WebApp card.
       3 cards + 2 gaps = 3 * 1.15 * (100% - 6rem) / 4 + 4rem = calc(86.25% - 1.175rem) */
    width: calc(86.25% - 1.175rem);
    max-width: 1189px;
  }
}

.p-8 {
  padding: 2rem !important;
}

.max-w-\[1440px\] {
  max-width: 1440px !important;
}

/* Comparison tables, guide articles and the footer Guides column */
.table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
}

.table-wrap .compare-table tr:last-child th,
.table-wrap .compare-table tr:last-child td {
  border-bottom: 0;
}

.compare-table tbody th {
  width: 30%;
}

.compare-table.vs {
  min-width: 680px;
}

.compare-table.vs tbody th {
  width: 22%;
}

.compare-table.vs thead th:nth-child(2) {
  color: #0f172a;
  font-weight: 700;
}

.compare-table.vs tbody td:nth-child(2) {
  color: #0f172a;
  font-weight: 600;
}

.article {
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.75;
}

.article h2 {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  margin: 2.6rem 0 .8rem;
  scroll-margin-top: 6rem;
}

.article h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 1.6rem 0 .4rem;
}

.article p {
  margin: .9rem 0;
}

.article ul,
.article ol {
  margin: .9rem 0;
  padding-left: 1.4rem;
}

.article ul {
  list-style: disc;
}

.article ol {
  list-style: decimal;
}

.article li {
  margin: .45rem 0;
  padding-left: .2rem;
}

.article li::marker {
  color: #f96565;
}

.article a {
  color: #e75f5f;
  font-weight: 600;
}

.article a:hover {
  text-decoration: underline;
}

.article strong {
  color: #0f172a;
}

.article .table-wrap {
  margin: 1.5rem 0;
  font-size: .95rem;
}

.article .faq-grid details p {
  font-size: 1rem;
}

.toc {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 1rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: .5rem;
}

.toc ol {
  margin: .5rem 0 0;
}

.toc a {
  color: #334155;
}

.faq-grid details p a {
  color: #e75f5f;
  font-weight: 600;
}

@media (min-width:64rem) {
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }
}

/* Guides hub, source lists and wide tables */
.compare-table.wide {
  min-width: 720px;
}

.article .sources {
  font-size: .92rem;
}

.article .sources li {
  margin: .35rem 0;
}

.guide-card>a:last-child {
  justify-self: start;
}

@media (min-width:48rem) {
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 1.2
  }
}

/* ISM callout, Resources page (download cards and walkthrough video) */
.ism-callout {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.ism-callout-inner {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

@media (min-width:48rem) {
  .ism-callout-inner {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }
}

.callout-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width:48rem) {
  .callout-tag {
    align-self: center;
  }
}

@media (min-width:48rem) {
  .rows-5>* {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    grid-row: span 5;
  }
}

section[id] {
  scroll-margin-top: 4.5rem;
}

/* Resources page: the live site's layout and colours (video, reports and whitepapers), then guides by region */
.res-page {
  --s50: oklch(98.4% 0.003 247.858);
  --s100: oklch(96.8% 0.007 247.896);
  --s200: oklch(92.9% 0.013 255.508);
  --s300: oklch(86.9% 0.022 252.894);
  --s400: oklch(70.4% 0.04 256.788);
  --s500: oklch(55.4% 0.046 257.417);
  --s600: oklch(44.6% 0.043 257.281);
  --s700: oklch(37.2% 0.044 257.287);
  --s800: oklch(27.9% 0.041 260.031);
  --s900: oklch(20.8% 0.042 265.755);
  --s950: oklch(12.9% 0.042 264.695);
}

.res-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.res-h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  color: var(--s900);
  letter-spacing: -0.025em;
}

.res-h2 {
  font-size: 1.65rem;
  line-height: 2rem;
  font-weight: 800;
  color: var(--s900);
}

@media (min-width:48rem) {

  .res-h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .res-h2 {
    font-size: 1.95rem;
    line-height: 2.25rem;
  }
}

.res-lead {
  margin-top: .75rem;
  color: var(--s600);
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width:48rem) {
  .res-lead {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.res-intro {
  margin-top: .75rem;
  color: var(--s600);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.res-eyebrow {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--s500);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Walkthrough video */
.res-hero {
  padding: 3rem 0;
  background: #fff;
  border-bottom: 1px solid oklch(92.9% 0.013 255.508 / .8);
}

.res-video-wrap {
  max-width: 36rem;
  margin: 2rem auto 0;
}

.res-term {
  border-radius: 1rem;
  background: #0c1017;
  border: 1px solid var(--s800);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  overflow: hidden;
  text-align: left;
}

.res-term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .625rem .875rem;
  background: #141923;
  border-bottom: 1px solid oklch(27.9% 0.041 260.031 / .9);
  user-select: none;
}

.res-term-left,
.res-term-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.res-dot {
  width: .625rem;
  height: .625rem;
  border-radius: 999px;
}

.res-dot.r {
  background: #ff5f56;
}

.res-dot.y {
  background: #ffbd2e;
}

.res-dot.g {
  background: #27c93f;
}

.res-term-title {
  display: none;
  margin-left: .5rem;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--s300);
}

.res-ready {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: oklch(76.5% 0.177 163.223);
  background: oklch(69.6% 0.17 162.48 / .15);
  border: 1px solid oklch(69.6% 0.17 162.48 / .3);
}

.res-ready-dot {
  width: .375rem;
  height: .375rem;
  border-radius: 999px;
  background: oklch(76.5% 0.177 163.223);
  animation: res-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

.res-fp {
  display: none;
  font-size: 11px;
  color: var(--s500);
}

@media (min-width:40rem) {

  .res-term-title,
  .res-fp {
    display: inline;
  }
}

.res-screen {
  position: relative;
  aspect-ratio: 16/9;
  background: #090d14;
  overflow: hidden;
}

.res-embed {
  position: relative;
  width: 100%;
  height: 100%;
}

.res-embed iframe,
.vlb-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.res-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: opacity .3s;
}

.res-screen:hover .res-cover {
  opacity: 1;
}

.res-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: oklch(12.9% 0.042 264.695 / .5);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  transition: background-color .3s;
}

.res-screen:hover .res-overlay {
  background: oklch(12.9% 0.042 264.695 / .4);
}

.res-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: .75rem;
  background: #cc0000;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(204, 0, 0, .6);
  animation: res-play-pulse 2s infinite;
  transition: background-color .3s;
}

.res-play:hover {
  background: #b30000;
}

.res-play svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: .125rem;
  fill: #fff;
}

@media (min-width:40rem) {
  .res-play {
    width: 4rem;
    height: 2.75rem;
  }

  .res-play svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.res-play-pill {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .625rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  border: 1px solid oklch(37.2% 0.044 257.287 / .8);
  background: oklch(20.8% 0.042 265.755 / .9);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .025em;
  transition: border-color .15s;
}

.res-play-pill:hover {
  border-color: #ff7c7c;
}

@media (min-width:40rem) {
  .res-play-pill {
    font-size: .75rem;
    line-height: 1rem;
  }
}

.res-ping {
  width: .375rem;
  height: .375rem;
  border-radius: 999px;
  background: #ff7c7c;
  animation: res-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

.res-term-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .875rem;
  background: #141923;
  border-top: 1px solid oklch(27.9% 0.041 260.031 / .9);
  font-size: 11px;
  color: var(--s400);
}

.res-cmd {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  white-space: nowrap;
}

.res-cmd span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--s300);
}

.res-prompt {
  color: #ff7c7c;
  font-weight: 700;
}

.res-popout {
  flex-shrink: 0;
  margin-left: .5rem;
  padding: 0;
  border: 0;
  background: none;
  color: #ff7c7c;
  cursor: pointer;
  font: inherit;
}

.res-popout:hover {
  text-decoration: underline;
}

@keyframes res-play-pulse {
  0% {
    transform: scale(.96);
    box-shadow: 0 0 0 0 rgba(204, 0, 0, .55);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 18px rgba(204, 0, 0, 0);
  }

  100% {
    transform: scale(.96);
    box-shadow: 0 0 0 0 rgba(204, 0, 0, 0);
  }
}

@keyframes res-ping {

  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes res-pulse {
  50% {
    opacity: .5;
  }
}

/* Report, whitepaper and guide cards */
.res-library {
  padding: 4rem 0;
  background: var(--s50);
}

.res-guides {
  padding: 4rem 0;
  background: #fff;
}

.res-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width:64rem) {
  .res-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width:48rem) {
  .res-grid-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:64rem) {
  .res-grid-guides {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.res-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--s200);
  background: #fff;
  scroll-margin-top: 6rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  transition: border-color .3s, box-shadow .3s;
}

@media (min-width:40rem) {
  .res-card {
    padding: 1.75rem;
  }
}

@media (min-width:48rem) {
  .res-grid>.res-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
}

.res-card:hover {
  border-color: var(--s300);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

.acc-amber {
  --accent: oklch(82.8% 0.189 84.429);
  --accent-soft: oklch(87.9% 0.169 91.605);
  --accent-bg: oklch(82.8% 0.189 84.429 / .2);
  --accent-line: oklch(82.8% 0.189 84.429 / .6);
  --spine: oklch(82.8% 0.189 84.429 / .1);
  --dossier: linear-gradient(to bottom right, #221c16, #14120e, #090805);
}

.acc-coral {
  --accent: #ff7c7c;
  --accent-soft: #ff7c7c;
  --accent-bg: rgb(255 124 124 / .2);
  --accent-line: rgb(255 124 124 / .6);
  --spine: rgb(255 255 255 / .1);
  --dossier: linear-gradient(to bottom right, #1b212f, #101520, #080b11);
}

.acc-cyan {
  --accent: oklch(78.9% 0.154 211.53);
  --accent-soft: oklch(86.5% 0.127 207.078);
  --accent-bg: oklch(78.9% 0.154 211.53 / .2);
  --accent-line: oklch(78.9% 0.154 211.53 / .6);
  --spine: oklch(78.9% 0.154 211.53 / .1);
  --dossier: linear-gradient(to bottom right, #192231, #0f1724, #070b12);
}

.dossier {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  padding: 1.25rem;
  overflow: hidden;
  border-radius: .75rem;
  border: 1px solid oklch(37.2% 0.044 257.287 / .8);
  background: var(--dossier);
  box-shadow: inset 4px 0 8px -2px rgba(0, 0, 0, .5);
  transition: border-color .3s;
}

.res-card:hover .dossier {
  border-color: var(--accent-line);
}

.dossier::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 16px 16px;
  background-image: linear-gradient(to right, #33415515 1px, transparent 1px), linear-gradient(to bottom, #33415515 1px, transparent 1px);
}

.dossier::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: .5rem;
  pointer-events: none;
  background: linear-gradient(to right, rgb(0 0 0 / .5), var(--spine), transparent);
}

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

.dossier-top {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.dossier-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--accent);
}

.dossier-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.dossier-body {
  flex: 1;
  margin: .625rem 0;
}

.dossier-kicker {
  margin-bottom: .25rem;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--s400);
}

.dossier-title {
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.dossier-title a {
  color: inherit;
  text-decoration: none;
}

.dossier-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.dossier-sub {
  margin-top: .25rem;
  font-size: 11px;
  color: var(--s300);
}

.dossier-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-top: .625rem;
  border-top: 1px solid oklch(37.2% 0.044 257.287 / .6);
}

.dossier-pill {
  padding: .125rem .5rem;
  border-radius: .25rem;
  font-size: 10px;
  background: var(--s800);
  color: var(--s300);
}

.dossier-pill.accent {
  font-weight: 700;
  background: var(--accent-bg);
  color: var(--accent-soft);
}

.res-card-desc {
  flex: 1;
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.625;
  color: var(--s600);
}

.res-card-action {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--s100);
}

.res-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .65rem 1.25rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #1e293b;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .03);
  transition: all .2s ease;
  text-decoration: none;
}

.res-card:hover .res-btn {
  border-color: #94a3b8;
}

.res-btn:hover {
  background: #f8fafc;
  border-color: #0f172a;
  color: #0f172a;
  box-shadow: 0 2px 6px -1px rgb(0 0 0 / .07);
}

.res-btn svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  transition: transform .15s ease, color .15s ease;
}

.res-btn:hover svg.dl {
  transform: translateY(.125rem);
}

.res-btn:hover svg.go {
  transform: translateX(.25rem);
}

/* Guide tabs */
.guide-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.guide-tab-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.guide-tab-caption {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s400);
}

.guide-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.guide-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--s200);
  background: #fff;
  color: var(--s600);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}

.guide-tab:hover {
  border-color: var(--infiltra-coral);
  color: var(--s900);
}

.guide-tab:focus-visible {
  outline: 2px solid var(--infiltra-coral);
  outline-offset: 2px;
}

.guide-tab.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.guide-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--s100);
  color: var(--s600);
  font-size: .72rem;
  font-weight: 800;
}

.guide-tab.is-active .guide-count {
  background: rgb(255 255 255 / .16);
  color: #fff;
}

.guide-panel {
  margin-top: 2rem;
}

.guide-panel+.guide-panel {
  margin-top: 3rem;
}

.guide-panel:not(.is-active) {
  display: none;
}

.guide-panel-sub {
  color: var(--s600);
  font-size: 1rem;
  line-height: 1.6;
}

.guide-panel .res-grid {
  margin-top: 1.25rem;
}

/* News */
.res-news {
  padding: 4rem 0;
  background: var(--s50);
}

.res-news-sub {
  max-width: 42rem;
  margin-top: .5rem;
  color: var(--s600);
}

.res-news-card {
  display: grid;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--s100);
  background: #fff;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}

@media (min-width:48rem) {
  .res-news-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.res-news-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

@media (min-width:48rem) {
  .res-news-body {
    padding: 2.5rem;
  }
}

.res-news-kicker {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--s500);
}

.res-news-title {
  margin-top: .5rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 900;
  color: var(--s900);
}

.res-news-body p {
  margin-top: 1rem;
  color: var(--s600);
}

.res-news-media {
  position: relative;
  min-height: 400px;
}

.res-news-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video lightbox */
.vlb {
  position: fixed;
  inset: 0;
  z-index: 105;
}

.vlb[hidden] {
  display: none;
}

.vlb-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(12.9% 0.042 264.695 / .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.vlb-scroll {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
}

.vlb-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 1rem;
}

@media (min-width:40rem) {
  .vlb-center {
    padding: 1.5rem;
  }
}

.vlb-dialog {
  position: relative;
  width: 100%;
  max-width: 56rem;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid oklch(37.2% 0.044 257.287 / .8);
  background: #0c1017;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  animation: res-modal-in .25s cubic-bezier(.16, 1, .3, 1) forwards;
}

.vlb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: #141923;
  border-bottom: 1px solid var(--s800);
}

.vlb-bar .res-dot {
  width: .75rem;
  height: .75rem;
}

.vlb-title {
  margin-left: .5rem;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--s300);
}

.vlb-close {
  padding: .375rem;
  border: 0;
  border-radius: .5rem;
  background: none;
  color: var(--s400);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}

.vlb-close:hover {
  color: #fff;
  background: var(--s800);
}

.vlb-close svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.vlb-player {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}

.vlb-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.5rem;
  background: #141923;
  border-top: 1px solid var(--s800);
}

@media (min-width:40rem) {
  .vlb-foot {
    flex-direction: row;
  }
}

.vlb-foot p {
  font-size: .75rem;
  line-height: 1rem;
  color: var(--s400);
}

.vlb-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.vlb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .625rem 1rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}

.vlb-cta svg {
  flex-shrink: 0;
  width: .875rem;
  height: .875rem;
}

.vlb-cta.alt {
  background: var(--s800);
  color: #fff;
  transition: background-color .15s;
}

.vlb-cta.alt:hover {
  background: var(--s700);
}

@keyframes res-modal-in {
  from {
    opacity: 0;
    transform: scale(.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {

  .res-play,
  .res-ping,
  .res-ready-dot,
  .vlb-dialog {
    animation: none;
  }
}

/* Guide tables: fit the article column on tablets and desktops; scroll sideways only on phones */
@media (min-width:48rem) {
  .article .compare-table.wide {
    min-width: 0;
  }
}

/* Hero Scope Coverage Chips */
.hero-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-decoration: none;
}

.hero-scope-chip:hover {
  background: #f8fafc;
  color: #0f172a;
}

/* Hero Headline & Subtext Breathing Room */
.hero-title {
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
}

.hero-highlight {
  display: inline-block;
  margin-top: 0.65rem;
  background: var(--infiltra-gradient-tagline) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

.hero-subtext {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  line-height: 1.55 !important;
  font-size: 1.2rem !important;
  color: #475569 !important;
  max-width: 52rem !important;
  font-weight: 400;
}

.hero-actions-wrap {
  margin-top: 0 !important;
  margin-bottom: 3.5rem !important;
}

.hero-btn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn:hover {
  transform: translateY(-1px);
}

/* =========================================================================
   Modern Application Split Section: Chatbot Left | Text Right
   ========================================================================= */

.modern-app-split-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2.75rem;
}

@media (min-width: 1024px) {
  .modern-app-split-wrap {
    grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr);
    gap: 3.5rem;
    align-items: center;
  }
}

.modern-app-chat-col {
  width: 100%;
}

@media (max-width: 1023px) {
  .modern-app-chat-col {
    order: 2;
  }

  .modern-app-text-col {
    order: 1;
  }
}

.modern-app-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.modern-app-title {
  font-size: clamp(1.85rem, 2.6vw, 2.45rem);
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.modern-app-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 0.85rem;
}

.modern-app-journey {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 1.25rem;
}

.modern-app-journey strong {
  color: #0f172a;
  font-weight: 700;
}

.modern-app-punchline-wrap {
  padding-top: 0.85rem;
  border-top: 1px solid #f1f5f9;
  width: 100%;
}

.modern-app-punchline {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.45;
  margin: 0;
}

/* Real-World Use Case: Authentic Chat Window */
.chat-window-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  position: relative;
}

.chat-window-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.65rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.chat-header-bot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chat-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1.5px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.chat-avatar-img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.chat-online-badge {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #ffffff;
}

.chat-header-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.chat-header-status {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
}

.chat-window-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
}

.chat-tag-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #f59e0b;
}

.chat-window-body {
  padding: 1.25rem 1.35rem 3.25rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-msg {
  display: flex;
  flex-direction: column;
}

.chat-msg-bot {
  align-items: flex-start;
  max-width: 85%;
}

.chat-bubble-bot {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
  padding: 0.75rem 1.15rem;
  border-radius: 1.15rem;
  border-top-left-radius: 0.25rem;
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.chat-msg-user {
  align-items: flex-end;
  max-width: 90%;
  align-self: flex-end;
}

.chat-msg-meta {
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
}

.chat-user-label {
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chat-time {
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.72rem;
}

.chat-bubble-user {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #14532d;
  padding: 0.75rem 1.15rem;
  border-radius: 1.15rem;
  border-top-right-radius: 0.25rem;
  font-size: 0.86rem;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.07);
}


/* Scope Header Track (Yellow WebApp vs Purple RedTeaming) */
.flow-scope-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  max-width: 100%;
  margin: 1.5rem auto 1rem;
}

@media (min-width: 768px) {
  .flow-scope-track {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .flow-scope-track {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.scope-col-header {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.scope-col-header.web-scope {
  border: none !important;
  background: #f1f5f9 !important;
  color: #334155;
  box-shadow: none !important;
}

.scope-col-header.ai-scope {
  border: none !important;
  background: #fff7ed !important;
  color: #c2410c;
  box-shadow: none !important;
}

.scope-badge-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.scope-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}

.web-scope .scope-dot {
  background: #475569;
  box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.2);
}

.ai-scope .scope-dot {
  background: linear-gradient(135deg, #de7a38, #9472a8);
  box-shadow: 0 0 0 2px rgba(224, 131, 67, 0.25);
}

.scope-text {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.scope-sub {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.8;
}

/* 4+2 Flowchart Canvas & Grid System */
.flowchart-grid-container {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 2.25rem;
}

/* SVG Edge Overlay Layer (Desktop & Tablet Grid) */
.flow-svg-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

@media (min-width: 768px) {
  .flow-svg-overlay {
    display: block;
  }
}

.flow-edge-path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
}

.flow-edge-path.edge-web {
  stroke: #475569;
  stroke-width: 1.4;
}

.flow-edge-path.edge-bridge {
  stroke: #e08343;
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
}

.flow-edge-path.edge-ai {
  stroke: #c88176;
  stroke-width: 1.4;
}

.flow-svg-dot {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Flowchart Grid Rows */
.flow-grid-row-1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}

.flow-grid-row-2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .flowchart-grid-container {
    padding: 0 1.5rem;
  }

  .flow-scope-track {
    padding: 0 1.5rem;
  }

  .flow-grid-row-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.25rem;
    column-gap: 1.5rem;
    margin-bottom: 2.25rem;
  }

  .flow-grid-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .flow-grid-row-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.75rem;
  }

  .flow-grid-row-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .flow-grid-row-2 .flow-card[data-step="5"] {
    grid-column: 3;
  }

  .flow-grid-row-2 .flow-card[data-step="6"] {
    grid-column: 4;
  }
}

/* Mobile Vertical Flow Connectors */
.flow-mobile-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.45rem 0;
}

.flow-mobile-arrow-svg {
  width: 18px;
  height: 28px;
}

@media (min-width: 768px) {
  .flow-mobile-connector {
    display: none;
  }
}

/* Card Styling in 4+2 Grid (No top borders, clean uniform borders) */
.flow-card {
  position: relative;
  background: #ffffff;
  border-radius: 0.85rem;
  padding: 0.75rem 0.85rem 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 120px;
}

.flow-card.web {
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #475569 0%, #64748b 55%, #94a3b8 100%) border-box !important;
  box-shadow: 0 2px 10px rgba(71, 85, 105, 0.06);
}

.flow-card.web:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(71, 85, 105, 0.16);
}

.flow-card.ai {
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #de7a38, #e08343 65%, #c88176 80%, #9472a8) border-box !important;
  box-shadow: 0 2px 10px rgba(222, 122, 56, 0.06);
}

.flow-card.ai:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(222, 122, 56, 0.2);
}

/* React Flow Handles (Desktop Only) */
.flow-handle {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
}

@media (min-width: 768px) {
  .flow-handle {
    display: block;
  }
}

.flow-card.web .flow-handle-in {
  left: -5px;
  background: #334155;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #94a3b8;
}

.flow-card.web .flow-handle-out {
  right: -5px;
  background: #0f172a;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #64748b;
}

.flow-card.ai .flow-handle-in {
  left: -5px;
  background: #e08343;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #fed7aa;
}

.flow-card.ai .flow-handle-out {
  right: -5px;
  background: #9472a8;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #e9d5ff;
}

/* Card Internal Details */
.flow-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.flow-step-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  line-height: 1.2;
  transform: translateY(-2px);
}

.flow-card.web .flow-step-badge {
  background: #f1f5f9;
  color: #0f172a;
}

.flow-card.ai .flow-step-badge {
  background: #fff7ed;
  color: #c2410c;
}

.flow-owasp-badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
}

.flow-card.web .flow-owasp-badge {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}

.flow-card.ai .flow-owasp-badge {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  color: #9472a8;
}

.flow-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.flow-icon-wrap {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flow-card.web .flow-icon-wrap {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.flow-card.ai .flow-icon-wrap {
  background: linear-gradient(135deg, #fff7ed 0%, #faf5ff 100%);
  border: 1px solid #fed7aa;
  color: #ea580c;
}

.flow-icon-wrap svg {
  width: 1rem;
  height: 1rem;
}

.flow-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.flow-journey-quote {
  font-size: 0.74rem;
  line-height: 1.4;
  padding: 0;
  margin-bottom: 0.5rem;
  font-style: italic;
}

.flow-card.web .flow-journey-quote {
  background: transparent;
  border-left: none;
  color: #475569;
}

.flow-card.ai .flow-journey-quote {
  background: transparent;
  border-left: none;
  color: #9a3412;
}

.flow-risks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.73rem;
  color: #334155;
}

.flow-risks-list li {
  position: relative;
  padding-left: 0.8rem;
  line-height: 1.35;
  font-weight: 500;
}

.flow-risks-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
}

.flow-card.web .flow-risks-list li:before {
  background: #0f172a;
}

.flow-card.ai .flow-risks-list li:before {
  background: #e08343;
}

/* =========================================================================
   OVERHAULED: "What Organizations Are Grappling With" Section & CTA
   ========================================================================= */
.grapple-section {
  padding: 5rem 0 4.5rem;
}

.grapple-section:before {
  display: none;
}

.grapple-section>* {
  position: relative;
}

.grapple-panel {
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
  padding: 3rem 2rem 2.5rem;
  border-radius: 1.75rem;
  background: #0d121f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 60px -15px rgba(2, 6, 23, 0.7);
}

.grapple-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px at 10% 10%, rgba(249, 101, 101, 0.16), transparent 60%), radial-gradient(700px at 90% 90%, rgba(59, 130, 246, 0.08), transparent 60%);
}

.grapple-panel>* {
  position: relative;
}

.grapple-kicker {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f87171;
}

.grapple-title {
  text-align: center;
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 900;
  margin-top: 0.35rem;
}

.grapple-subtitle {
  text-align: center;
  color: #94a3b8;
  font-size: 0.95rem;
  max-width: 38rem;
  margin: 0.5rem auto 0;
  line-height: 1.5;
}

.grapple-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .grapple-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grapple-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grapple-card {
  position: relative;
  background: radial-gradient(circle at 50% 15%, #0d1527 0%, #060911 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  padding: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 30px -6px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.grapple-card:hover {
  background: radial-gradient(circle at 50% 15%, #131c33 0%, #070a14 100%);
  transform: translateY(-2px);
  border-color: rgba(222, 122, 56, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 25px rgba(222, 122, 56, 0.28), 0 0 45px rgba(148, 114, 168, 0.2), 0 16px 36px -6px rgba(0, 0, 0, 0.8);
}

.grapple-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.grapple-icon-box {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  background: rgba(249, 101, 101, 0.12);
  border: 1px solid rgba(249, 101, 101, 0.25);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grapple-icon-box svg {
  width: 1.2rem;
  height: 1.2rem;
}

.grapple-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.grapple-card-title {
  color: #f1f5f9;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}

.grapple-card-desc {
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.5;
  margin-top: 0.45rem;
}

/* Grapple Bottom CTA Box */
.grapple-cta-box {
  position: relative;
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1.15rem;
  background: radial-gradient(circle at 50% 15%, #18121d 0%, #080912 100%);
  border: 1px solid rgba(222, 122, 56, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(222, 122, 56, 0.22), 0 0 50px rgba(148, 114, 168, 0.16), 0 16px 36px -8px rgba(0, 0, 0, 0.75);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  text-align: center;
}

.grapple-cta-box:hover {
  transform: translateY(-1px);
  border-color: rgba(222, 122, 56, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 32px rgba(222, 122, 56, 0.32), 0 0 60px rgba(148, 114, 168, 0.24), 0 20px 40px -8px rgba(0, 0, 0, 0.85);
}

@media (min-width: 768px) {
  .grapple-cta-box {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.grapple-cta-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
}

.grapple-cta-sub {
  color: #cbd5e1;
  font-size: 0.88rem;
  margin-top: 0.25rem;
}

.grapple-cta-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.grapple-cta-actions .btn-primary {
  border-radius: 0.5rem !important;
  /* Slightly rounded */
}

.grapple-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.15rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.grapple-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.grapple-guides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.grapple-guides span {
  margin-right: 0.35rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grapple-chip {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 700;
  transition: all 0.2s;
}

.grapple-chip:hover {
  border-color: #f87171;
  color: #ffffff;
  background: rgba(249, 101, 101, 0.1);
}

/* Maintain comfortable side margins on large and xlarge views so the view does not stretch too wide */
@media (min-width: 1024px) {
  .max-w-7xl {
    max-width: min(1200px, calc(100% - 3.5rem));
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .max-w-7xl {
    max-width: min(1280px, calc(100% - 5rem));
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: min(1320px, calc(100% - 6rem));
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Home hero: Side-by-side capability cards (Hidden for now per user request) */
.hero-capabilities-grid {
  display: none !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .hero-capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero-cap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  transition: all 0.25s ease;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.hero-cap-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.12);
}

.hero-subtext {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #475569;
  max-width: 44rem;
}

.hero-cap-card.ai {
  border-color: #fde2e2;
  background: linear-gradient(145deg, rgba(255, 124, 124, 0.09) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.hero-cap-card.ai:hover {
  border-color: #ff8e8e;
}

.hero-cap-card.web {
  border: 1px solid #cbd5e1;
  background: #ffffff;
}

.hero-cap-card.web:hover {
  border-color: #94a3b8;
}

.hero-cap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.hero-cap-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.hero-cap-icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-cap-card.ai .hero-cap-icon {
  background: #ffebeb;
  color: #f96565;
}

.hero-cap-card.web .hero-cap-icon {
  background: #f1f5f9;
  color: #334155;
}

.hero-cap-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.hero-cap-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.hero-cap-arrow {
  color: #94a3b8;
  font-size: 1.1rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.hero-cap-card:hover .hero-cap-arrow {
  transform: translateX(3px);
  color: var(--infiltra-coral);
}

.hero-cap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.hero-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.hero-cap-chip svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.hero-cap-card.ai .hero-cap-chip {
  background: #ffffff;
  border-color: #fecaca;
  color: #b91c1c;
  font-weight: 700;
}

.hero-cap-footer {
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.hero-cap-card.ai .hero-cap-footer {
  color: #f96565;
  border-top-color: rgba(254, 226, 226, 0.8);
}

.hero-cap-card.web .hero-cap-footer {
  color: #64748b;
}

/* Home closing band: the brand line */
.demo-tagline {
  color: #ff7c7c;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Home hero spacing */
.hero-content-wrap {
  padding-top: 1.925rem;
  padding-bottom: 1.925rem;
}

@media (min-width: 768px) {
  .hero-content-wrap {
    padding-top: 1.925rem;
    padding-bottom: 2.275rem;
  }
}

@media (min-width: 1024px) {
  .hero-content-wrap {
    padding-top: 1.925rem;
    padding-bottom: 2.45rem;
  }
}

/* Home hero headline */
.hero-title {
  font-size: 2.15rem;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: min(2.75rem, calc(3.6vw - 4px));
  }
}

.hero-highlight {
  display: block;
  font-size: min(2.2rem, 0.82em);
  white-space: nowrap;
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .hero-highlight {
    font-size: clamp(1.15rem, 5.2vw, 1.75rem);
    white-space: nowrap;
  }
}

/* =========================================================================
   Very Light Gray Hero Section
   ========================================================================= */

.hero-light-gray {
  position: relative;
  background-color: #ffffff;
  /* Crisp white base */
  background-image:
    radial-gradient(1000px circle at 5% 15%, rgba(255, 124, 124, 0.055), transparent 60%),
    linear-gradient(90deg, rgba(255, 124, 124, 0.03) 0%, rgba(255, 124, 124, 0.01) 30%, rgba(255, 255, 255, 0) 55%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
  padding-top: 0.95rem;
  padding-bottom: 1.75rem;
}

@media (min-width: 768px) {
  .hero-light-gray {
    padding-top: 0.95rem;
    padding-bottom: 2.1rem;
  }
}

/* =========================================================================
   Unified Obsidian Black Glassmorphic Sections (Loops, Grapple & Demo)
   ========================================================================= */

.platform-loops-section,
.grapple-section,
.demo-closing-section {
  position: relative;
  background-color: #060911;
  background-image:
    radial-gradient(circle at 50% 15%, #0d1527 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(56, 189, 248, 0.08), transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 65%, rgba(222, 122, 56, 0.09), transparent 60%),
    radial-gradient(ellipse 55% 45% at 15% 65%, rgba(126, 66, 184, 0.09), transparent 60%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.platform-loops-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

@media (min-width: 768px) {
  .platform-loops-section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}

.platform-loops-content {
  position: relative;
  z-index: 2;
}

.platform-loops-subtext {
  color: #cbd5e1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.loop-card-outer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.loop-kicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.loop-kicker.web {
  color: #38bdf8;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.loop-kicker.ai {
  color: #fb923c;
  text-shadow: 0 0 16px rgba(222, 122, 56, 0.4);
}

/* Loop Ring Container - Scaled slightly smaller */
.loop-ring-wrap {
  position: relative;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

@media (min-width: 640px) {
  .loop-ring-wrap {
    width: 300px;
    height: 300px;
  }
}

.loop-ring-wrap.web {
  box-shadow: 0 0 35px -5px rgba(56, 189, 248, 0.28), inset 0 0 25px rgba(56, 189, 248, 0.15);
}

.loop-ring-wrap.ai {
  box-shadow: 0 0 35px -5px rgba(222, 122, 56, 0.28), inset 0 0 25px rgba(222, 122, 56, 0.15);
}

.loop-ring-wrap:hover {
  transform: scale(1.025);
}

.loop-ring-wrap.web:hover {
  box-shadow: 0 0 50px -2px rgba(56, 189, 248, 0.45), inset 0 0 30px rgba(56, 189, 248, 0.25);
}

.loop-ring-wrap.ai:hover {
  box-shadow: 0 0 50px -2px rgba(222, 122, 56, 0.45), inset 0 0 30px rgba(222, 122, 56, 0.25);
}

/* Outer Glow Ring Background */
.loop-ambient-glow {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.65;
  filter: blur(20px);
  z-index: 1;
}

.loop-ring-wrap.web .loop-ambient-glow {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, transparent 70%);
}

.loop-ring-wrap.ai .loop-ambient-glow {
  background: radial-gradient(circle, rgba(222, 122, 56, 0.35) 0%, rgba(148, 114, 168, 0.25) 50%, transparent 70%);
}

/* Animated Conic Gradient Ring */
.loop-ring-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.loop-ring-track.web {
  background: conic-gradient(from 0deg, #38bdf8, #6366f1 35%, #3b82f6 70%, #0284c7 90%, #38bdf8 100%);
  animation: loopSpin 12s linear infinite;
}

.loop-ring-track.ai {
  background: conic-gradient(from 0deg, #de7a38, #c86684 30%, #9472a8 60%, #7e42b8 85%, #de7a38 100%);
  animation: loopSpin 12s linear infinite;
}

/* Orbiting Dot Indicator */
.loop-orbit {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

.loop-orbit.web {
  animation: loopSpin 8s linear infinite;
}

.loop-orbit.ai {
  animation: loopSpin 8s linear infinite reverse;
}

.loop-orbit-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.loop-orbit.web .loop-orbit-marker {
  box-shadow: 0 0 14px 3px #38bdf8, 0 0 28px rgba(56, 189, 248, 0.8);
}

.loop-orbit.ai .loop-orbit-marker {
  box-shadow: 0 0 14px 3px #fb923c, 0 0 28px rgba(222, 122, 56, 0.8);
}

/* Inner Circle Card (Obsidian Dark Theme) */
.loop-inner-circle {
  position: relative;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #0d1527 0%, #060911 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem 1rem;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 8px 30px rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.loop-ring-wrap.web .loop-inner-circle {
  background: radial-gradient(circle at 50% 30%, #0c1626 0%, #060911 100%);
}

.loop-ring-wrap.ai .loop-inner-circle {
  background: radial-gradient(circle at 50% 30%, #160e18 0%, #070912 100%);
}

/* Inside Typography */
.loop-role-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.loop-role-label.web {
  color: #38bdf8;
}

.loop-role-label.ai {
  color: #fb923c;
}

.loop-main-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.45rem;
}

@media (min-width: 640px) {
  .loop-main-title {
    font-size: 1.65rem;
    margin-bottom: 0.5rem;
  }
}

.loop-scope-desc {
  font-size: 0.74rem;
  color: #94a3b8;
  max-width: 195px;
  line-height: 1.4;
  margin-bottom: 0.85rem;
}

.loop-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.loop-action-link.web {
  color: #38bdf8;
}

.loop-action-link.ai {
  color: #fb923c;
}

.loop-action-link:hover {
  text-decoration: underline;
  gap: 0.55rem;
  filter: brightness(1.2);
}

/* Connecting Bridge (Chevrons Pulse) */
.loop-bridge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.25rem 0;
}

.loop-chevrons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.chevron-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid rgba(255, 255, 255, 0.15);
  animation: chevronPulse 1.8s ease-in-out infinite;
}

.chevron-arrow:nth-child(1) {
  animation-delay: 0s;
}

.chevron-arrow:nth-child(2) {
  animation-delay: 0.2s;
}

.chevron-arrow:nth-child(3) {
  animation-delay: 0.4s;
}

.chevron-arrow:nth-child(4) {
  animation-delay: 0.6s;
}

.chevron-arrow:nth-child(5) {
  animation-delay: 0.8s;
}

.chevron-arrow:nth-child(6) {
  animation-delay: 1.0s;
}

@keyframes chevronPulse {

  0%,
  100% {
    border-left-color: rgba(255, 255, 255, 0.15);
    transform: scale(1);
  }

  50% {
    border-left-color: #ff7c7c;
    transform: scale(1.3);
    filter: drop-shadow(0 0 6px rgba(255, 124, 124, 0.8));
  }
}

.loop-bridge-pill {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

@keyframes loopSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   How It Works: 2-Way Capability Toggle & Track Styles
   ========================================================================== */
.how-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2.75rem;
}

.how-toggle-pill {
  display: inline-flex;
  background: #f1f5f9;
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  gap: 0.35rem;
}

.how-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.22s ease;
}

.how-tab:hover {
  color: #0f172a;
}

.how-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.how-tab.active.ai-active {
  color: #c86684 !important;
  box-shadow: 0 2px 12px rgba(200, 102, 132, 0.15);
  border: 1.5px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #de7a38 0%, #c86684 40%, #c86684 75%, #c86684 100%) border-box !important;
}

.how-tab.active.ai-active svg {
  color: #de7a38 !important;
}

.how-tab.active.ai-active span {
  background: linear-gradient(135deg, #de7a38 0%, #c86684 60%, #c86684 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.how-track-panel {
  display: none;
  animation: howFadeIn 0.3s ease;
}

.how-track-panel.active {
  display: block;
}

@keyframes howFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.how-track-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .how-track-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .how-track-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.how-track-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1.65rem 1.4rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.how-track-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.how-track-card.web-card:hover {
  border-color: #94a3b8;
}

.how-track-card.ai-card:hover {
  border-color: #c86684;
  box-shadow: 0 10px 24px -4px rgba(200, 102, 132, 0.18), 0 0 0 1px rgba(222, 122, 56, 0.15);
}

.how-card-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  background: #0f172a;
  color: #ffffff;
}

.web-card .how-card-num {
  background: #0f172a;
  color: #ffffff;
}

.ai-card .how-card-num {
  background: linear-gradient(135deg, #de7a38 0%, #c86684 40%, #c86684 75%, #c86684 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(200, 102, 132, 0.35);
}

.how-card-title,
.ai-card .how-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.how-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.challenge-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
}

.how-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.9rem;
  border-top: 1px solid #f1f5f9;
}

.how-pill-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.ai-card .how-pill-tag {
  background: linear-gradient(135deg, rgba(222, 122, 56, 0.08) 0%, rgba(200, 102, 132, 0.1) 100%);
  color: #c86684;
  border: 1px solid rgba(200, 102, 132, 0.3);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ai-card .how-pill-tag:hover {
  border-color: rgba(200, 102, 132, 0.55);
  background: linear-gradient(135deg, rgba(222, 122, 56, 0.14) 0%, rgba(200, 102, 132, 0.18) 100%);
}

/* ==========================================================================
   Feature Set: 3 Bento Pillars
   ========================================================================== */
.bento-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .bento-pillars-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bento-pillar-card {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1.5px solid #e2e8f0;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bento-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.1);
}

.bento-pillar-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.pillar-web:before {
  background: linear-gradient(90deg, #334155, #64748b);
}

.pillar-ai:before {
  background: var(--infiltra-gradient-tagline, linear-gradient(90deg, #de7a38 0%, #c86684 28%, #9472a8 55%, #7e42b8 100%));
}

.pillar-enterprise:before {
  background: linear-gradient(90deg, #0284c7, #10b981);
}

.pillar-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pillar-icon-box {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0;
}

.pillar-web .pillar-icon-box {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

.pillar-ai .pillar-icon-box {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #ffedd5;
}

.pillar-enterprise .pillar-icon-box {
  background: #f0fdf4;
  color: #059669;
  border: 1px solid #dcfce7;
}

.pillar-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 0;
}

.pillar-summary {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #64748b;
  margin-bottom: 1.75rem;
}

.pillar-features-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f5f9;
}

.pillar-feature-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.pillar-feature-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.pillar-web .pillar-feature-dot {
  background: #475569;
}

.pillar-ai .pillar-feature-dot {
  background: #ea580c;
}

.pillar-enterprise .pillar-feature-dot {
  background: #10b981;
}

.pillar-feature-item h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.15rem;
}

.pillar-feature-item p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
  margin: 0;
}

/* ==========================================================================
   What Our Customers Say: Executive 2-Column Testimonial Showcase
   ========================================================================== */
.testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

.testi-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.testi-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(222, 122, 56, 0.15);
}

.testi-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.85rem;
}

.testi-company-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.45rem 0.95rem;
  border-radius: 0.75rem;
}

.testi-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.testi-company-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.015em;
}

.testi-impact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  width: fit-content;
}

.testi-quote-wrap {
  position: relative;
  flex-grow: 1;
  margin-bottom: 1.75rem;
}

.testi-quote-content {
  position: relative;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
}

@media (min-width: 768px) {
  .testi-quote-content {
    font-size: 1.08rem;
  }
}

.testi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f5f9;
  gap: 1rem;
}

.testi-author-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testi-avatar-monogram {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25);
  flex-shrink: 0;
}

.testi-avatar-monogram.mi {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 2px 6px rgba(3, 105, 161, 0.25);
}

.testi-author-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.testi-author-role {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 0.15rem;
}

.testi-stars {
  display: flex;
  gap: 0.2rem;
  color: #f59e0b;
  flex-shrink: 0;
}

/* =========================================================================
   OVERHAULED: Closing Demo / Intelligent Offense Section (Glassmorphism)
   ========================================================================= */
.demo-closing-section {
  padding: 5.5rem 0 5rem;
}

.demo-closing-section::before {
  display: none;
}

.demo-closing-section>* {
  position: relative;
}

.demo-glass-card {
  position: relative;
  background: radial-gradient(circle at 50% 15%, #0d1527 0%, #060911 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2.25rem 2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 25px 60px -15px rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.demo-stage-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s ease;
}

.demo-stage-item:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 124, 124, 0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.demo-stage-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ff7c7c;
  box-shadow: 0 0 10px rgba(255, 124, 124, 0.7);
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.demo-stage-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.demo-stage-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  background: rgba(255, 124, 124, 0.12);
  color: #ff9999;
  border: 1px solid rgba(255, 124, 124, 0.22);
}

.demo-stage-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 0.25rem;
  line-height: 1.45;
}

.demo-trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
}

.demo-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1;
}

.demo-trust-check {
  width: 0.875rem;
  height: 0.875rem;
  color: #34d399;
  flex-shrink: 0;
  position: relative;
  top: -0.5px;
}

/* ==========================================================================
   About Infiltra: Executive Founder Profile Cards
   ========================================================================== */
.founder-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.founder-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 28px -6px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(222, 122, 56, 0.15);
}

.founder-avatar-wrap {
  position: relative;
  width: 4.75rem;
  height: 4.75rem;
  margin-bottom: 0.75rem;
}

.founder-avatar-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, rgba(255, 124, 124, 0.8) 0%, rgba(222, 122, 56, 0.6) 50%, rgba(100, 116, 139, 0.35) 100%);
  box-shadow: 0 3px 10px rgba(222, 122, 56, 0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.founder-card:hover .founder-avatar-ring {
  box-shadow: 0 6px 18px rgba(222, 122, 56, 0.25);
  transform: scale(1.03);
}

.founder-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f8fafc;
}

.founder-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.founder-role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  padding: 0.15rem 0.65rem;
  border-radius: 9999px;
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

.founder-exp-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.founder-bio {
  font-size: 0.825rem;
  line-height: 1.45;
  color: #475569;
  margin-top: 0.55rem;
  flex-grow: 1;
}

.founder-pedigree-box {
  width: 100%;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
}

.founder-pedigree-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 0.35rem;
  display: block;
}

.founder-pedigree-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.founder-pill-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.founder-card:hover .founder-pill-tag {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* =========================================================================
   Executive Mobile Navigation Drawer
   ========================================================================= */

.mobile-nav-panel {
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.1);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-inner {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-nav-group-title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.mobile-platform-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-platform-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
}

.mobile-platform-card:hover,
.mobile-platform-card:active {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
}

.mobile-platform-icon-wrap {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.mobile-platform-icon-wrap.web {
  background: #ecfeff;
  color: #0891b2;
  border: 1px solid #cffafe;
}

.mobile-platform-icon-wrap.ai {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #ffedd5;
}

.mobile-platform-title {
  font-size: 0.925rem;
  font-weight: 400;
  color: #0f172a;
  line-height: 1.25;
}

.mobile-platform-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.2rem;
  line-height: 1.35;
}

.mobile-nav-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
}

.mobile-nav-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none !important;
}

.mobile-nav-link-item:hover,
.mobile-nav-link-item:active {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}

.mobile-cta-box {
  background: #f8fafc;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mobile-cta-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background-color: var(--infiltra-coral, #ff7c7c);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.925rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255, 124, 124, 0.25);
  transition: all 0.2s ease;
}

.mobile-cta-btn-primary:active {
  transform: scale(0.99);
}

.mobile-cta-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b !important;
  font-weight: 600;
  font-size: 0.925rem;
  padding: 0.7rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.mobile-cta-btn-secondary:active {
  background: #f1f5f9;
}

.mobile-cta-login-footer {
  text-align: center;
  font-size: 0.825rem;
  color: #64748b;
  margin-top: 0.35rem;
}

.mobile-cta-login-link {
  color: #0f172a;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* =========================================================================
   Top Navbar Action Buttons (Desktop Display & Styling)
   ========================================================================= */

.nav-action-login {
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  /* Same font size as rest of nav menu */
  font-weight: 600;
  /* Same font-semibold weight as nav links */
  color: #334155;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.nav-action-login:hover {
  color: var(--infiltra-coral, #ff7c7c) !important;
}

.nav-action-login .login-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background-color: var(--infiltra-coral, #ff7c7c);
  box-shadow: 0 0 5px 1px rgba(255, 124, 124, 0.7), 0 0 1px rgba(255, 124, 124, 0.9);
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-action-login:hover .login-dot {
  transform: scale(1.2);
  box-shadow: 0 0 8px 1.5px rgba(255, 124, 124, 0.9);
}

.nav-action-demo {
  display: none;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav-action-demo:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
}

.nav-action-primary {
  display: none !important;
}

@media (min-width: 1024px) {
  .nav-action-login {
    display: inline-flex !important;
  }

  .nav-action-primary {
    display: inline-flex !important;
  }

  .nav-action-demo {
    display: inline-flex !important;
  }
}

/* =========================================================================
   High-Tech Parallelogram Badge / Chip
   ========================================================================= */

.badge-parallelogram {
  display: inline-flex;
  align-items: center;
  position: relative;
  transform: skewX(-22deg);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--infiltra-coral, #ff7c7c);
  padding: 0.4rem 1.65rem;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.badge-parallelogram:hover {
  transform: skewX(-22deg) translateY(-1px);
  border-color: #cbd5e1;
  border-left-color: var(--infiltra-coral, #ff7c7c);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 124, 124, 0.25);
}

.badge-parallelogram-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transform: skewX(22deg);
  /* Perfectly counter-skew to keep text & dot upright */
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .badge-parallelogram-inner {
    font-size: 0.875rem;
  }
}

.badge-parallelogram-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--infiltra-coral, #ff7c7c);
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px rgba(255, 124, 124, 0.22);
  animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badge-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}

.badge-parallelogram.dark {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3.5px solid var(--infiltra-coral, #ff7c7c);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.badge-parallelogram.dark .badge-parallelogram-inner {
  color: #f1f5f9;
}

/* =========================================================================
   Continuous Lifecycle Validation Card Footer Fix
   ========================================================================= */
.demo-card-footer {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #94a3b8;
  gap: 0.75rem;
}

.demo-card-compliance {
  color: #64748b;
  font-weight: 500;
}

/* =========================================================================
   Executive Trust & Safety Section
   ========================================================================= */
.trust-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.75rem;
}

@media (min-width: 768px) {
  .trust-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .trust-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.85rem 1.65rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.trust-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.08);
}

.trust-icon-box {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.trust-icon-box.emerald {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.trust-icon-box.blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.trust-icon-box.orange {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #ffedd5;
}

.trust-kicker-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
  align-self: flex-start;
}

.trust-kicker-tag.emerald {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.trust-kicker-tag.blue {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.trust-kicker-tag.orange {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #ffedd5;
}

.trust-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.trust-card-desc {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1.35rem;
  flex-grow: 1;
}

.trust-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #f1f5f9;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trust-check-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.trust-check-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.trust-check-icon.emerald {
  color: #10b981;
}

.trust-check-icon.blue {
  color: #3b82f6;
}

.trust-check-icon.orange {
  color: #ea580c;
}

/* Compliance Badges Assurance Strip */
.trust-assurance-strip {
  margin-top: 3rem;
  padding: 1.25rem 1.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.25rem;
}

.trust-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}

.trust-badge-pill svg {
  width: 1rem;
  height: 1rem;
  color: #059669;
  flex-shrink: 0;
}

/* =========================================================================
   Elevated Enterprise Footer Layout (Single Line per Link Guaranteed)
   ========================================================================= */
.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

@media (min-width: 640px) {
  .site-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer-grid {
    grid-template-columns: 2.4fr 1.65fr 1fr 1.55fr;
    gap: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .site-footer-grid {
    grid-template-columns: 2.6fr 1.75fr 1fr 1.65fr;
    gap: 3.5rem;
  }
}

.footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-link {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #475569;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-link:hover {
  color: var(--infiltra-coral, #ff7c7c);
  transform: translateX(2px);
}

footer ul li a {
  white-space: nowrap;
}

/* =========================================================================
   Unified Navigation Dropdowns & Stacking Context
   ========================================================================= */

.relative.group {
  position: relative;
}

nav .relative.group:hover {
  z-index: 100 !important;
}

/* Unified Dropdown Wrapper Base */
.nav-dropdown-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 0.5rem;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

/* Active Dropdown: Shown on Hover OR when .is-open is present */
nav .relative.group:hover .nav-dropdown-wrapper,
nav .relative.group.is-open .nav-dropdown-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0px) !important;
  z-index: 110 !important;
}

nav .relative.group:hover .nav-dropdown-caret,
nav .relative.group.is-open .nav-dropdown-caret {
  transform: rotate(180deg) !important;
}

/* Groups that are neither hovered nor .is-open are strictly hidden */
nav .relative.group:not(:hover):not(.is-open) .nav-dropdown-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(4px) !important;
}

nav .relative.group:not(:hover):not(.is-open) .nav-dropdown-caret {
  transform: rotate(0deg) !important;
}

/* Nav Dropdown Menu Container (Generous width to prevent text wrapping) */
.nav-dropdown-menu {
  width: 380px !important;
  max-width: calc(100vw - 2rem) !important;
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
  padding: 0.5rem !important;
}

/* Individual Dropdown Item */
.nav-dropdown-item {
  display: block !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 0.625rem !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background-color: #f8fafc !important;
  color: var(--infiltra-coral, #ff7c7c) !important;
}

/* Dropdown Item Title (Smooth Coral Hover) */
.nav-dropdown-title {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #0f172a;
  line-height: 1.35 !important;
  transition: color 0.18s ease !important;
}

.nav-dropdown-item:hover .nav-dropdown-title,
.nav-dropdown-item:focus .nav-dropdown-title,
.nav-dropdown-title:hover {
  color: var(--infiltra-coral, #ff7c7c) !important;
}

/* Dropdown Item Description (Always single line) */
.nav-dropdown-desc {
  display: block !important;
  margin-top: 0.2rem !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.nav-dropdown-item:hover .nav-dropdown-desc {
  color: #64748b !important;
}

/* =========================================================================
   Google Calendar Booking Modal Styles
   ========================================================================= */
#bookingModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bookingModal.hidden,
#contactModal.hidden {
  display: none !important;
}

.booking-modal-backdrop,
#bookingModal .booking-modal-backdrop,
#contactModal .booking-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: opacity 0.25s ease;
  z-index: 1;
}

#contactModal .fixed.z-10 {
  z-index: 20 !important;
}

#contactModal .modal-enter {
  border-top: 4px solid #ff7c7c !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

#contactModal .modal-enter>div:first-child {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

#bookingModal .booking-modal-container {
  position: relative;
  z-index: 10;
  width: 95%;
  max-width: 1060px;
  height: 88vh;
  max-height: 860px;
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#bookingModal .booking-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#bookingModal .booking-modal-close:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

#bookingModal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  flex: 1 1 auto;
}

.nav-action-demo {
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}

.mobile-cta-btn-secondary {
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

/* ==========================================================================
   Exploit Proof Card (Hero Finding Showcase)
   ========================================================================== */
.exploit-proof-card {
  background: #0f172a;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  color: #e2e8f0;
  font-family: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.exploit-proof-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.45);
}

.exploit-card-header {
  background: #090d16;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.exploit-severity-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: rgba(244, 63, 94, 0.18);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
  text-transform: uppercase;
}

.exploit-card-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.exploit-meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.exploit-vuln-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.exploit-endpoint-code {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.55rem;
  border-radius: 0.375rem;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.exploit-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  white-space: nowrap;
}

.exploit-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #34d399;
  box-shadow: 0 0 6px 1px rgba(52, 211, 153, 0.6);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

.exploit-steps-trail {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
}

.exploit-trail-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.exploit-step-marker {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.exploit-step-marker.done {
  background: #334155;
  color: #f1f5f9;
}

.exploit-step-marker.exploit {
  background: #ea580c;
  color: #ffffff;
}

.exploit-step-marker.verified {
  background: #059669;
  color: #ffffff;
}

.exploit-step-content {
  flex: 1;
}

.exploit-step-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
}

.exploit-step-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.1rem;
}

.exploit-step-sub code {
  color: #38bdf8;
  font-size: 0.72rem;
}

.exploit-code-box {
  background: #020617;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.exploit-code-header {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.4rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exploit-code-pre {
  margin: 0;
  padding: 0.75rem 0.85rem;
  font-size: 0.76rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.45;
  color: #cbd5e1;
}

.code-key {
  color: #38bdf8;
}

.code-val {
  color: #fcd34d;
}

.exploit-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.exploit-retest-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.exploit-retest-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7c7c;
}

/* Modern Comparison Matrix & Hero Assurance Strip */
.hero-assurance-bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 1.25rem;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hero-assurance-bar:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.08);
}

.modern-compare-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  overflow-x: auto;
}

.modern-compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.modern-compare-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 0.86rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

.modern-compare-table thead th.col-infiltra {
  background: #fff5f5;
  color: #0f172a;
  font-weight: 800;
  font-size: 0.92rem;
  border-left: 1px solid #fecaca;
  border-right: 1px solid #fecaca;
  border-bottom: 1px solid #fecaca;
}

.modern-compare-table tbody tr {
  transition: background-color 0.15s ease;
}

.modern-compare-table tbody th,
.modern-compare-table tbody td {
  padding: 1.2rem 1.4rem;
  vertical-align: top;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.modern-compare-table tbody tr:last-child th,
.modern-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.modern-compare-table tbody tr:hover {
  background-color: #f8fafc;
}

.modern-compare-table tbody th {
  font-weight: 700;
  color: #0f172a;
  width: 20%;
}

.modern-compare-table tbody td.col-infiltra {
  background: #fff8f8;
  color: #0f172a;
  border-left: 1px solid #fee2e2;
  border-right: 1px solid #fee2e2;
  border-bottom: 1px solid #fee2e2;
  width: 36%;
}

.modern-compare-table tbody tr:hover td.col-infiltra {
  background-color: #fff1f1;
}

.modern-compare-table tbody tr:last-child td.col-infiltra {
  border-bottom: none;
}

.modern-compare-table tbody td.col-other {
  color: #475569;
  width: 22%;
}

/* Hero Feature Capsule Dock */
.hero-feature-dock-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.hero-feature-dock {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.35rem 0.65rem;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

.hero-dock-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.hero-dock-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.hero-dock-divider {
  width: 1px;
  height: 16px;
  background: #e2e8f0;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .hero-feature-dock {
    border-radius: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    padding: 0.65rem;
    width: 100%;
    max-width: 540px;
  }

  .hero-dock-divider {
    display: none;
  }

  .hero-dock-item {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .hero-feature-dock {
    grid-template-columns: 1fr;
  }
}

/* Grad Hero Section Spacing */
.grad-hero {
  position: relative;
}

.grad-hero-inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .grad-hero-inner {
    padding-top: 4.75rem !important;
    padding-bottom: 4rem !important;
  }
}

/* =========================================================================
   What Is AI Pentesting Section - Spec Card Styling
   ========================================================================= */
.ai-pentest-spec-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.07), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  position: relative;
}

.ai-pentest-spec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #f1f5f9;
}

.ai-pentest-spec-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.spec-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.spec-feature-item {
  display: flex;
  gap: 0.9rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  transition: all 0.2s ease;
}

.spec-feature-item:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}


.spec-feature-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spec-feature-icon.auth {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
}

.spec-feature-icon.reasoning {
  background: #fff1f2;
  color: #f96565;
  border: 1px solid #ffe4e6;
}

.spec-feature-icon.exploit {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #d1fae5;
}

.spec-feature-heading {
  font-size: 0.925rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.spec-feature-desc {
  font-size: 0.825rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

.spec-feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.spec-micro-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  line-height: 1.35;
}

.spec-micro-badge.auth {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.spec-micro-badge.reasoning {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}

.spec-micro-badge.exploit {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

/* =========================================================================
   Vector Graphic Image Glow Frame (What Is AI Pentesting & AI Red Teaming)
   ========================================================================= */
.vector-image-glow-wrap {
  position: relative;
  border-radius: 1.25rem;
  transition: transform 0.3s ease;
}

.vector-image-ambient-glow {
  position: absolute;
  inset: -2px;
  border-radius: 1.35rem;
  background: radial-gradient(circle at 50% 50%, rgba(249, 101, 101, 0.35) 0%, rgba(249, 115, 22, 0.2) 50%, transparent 100%);
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.35s ease, filter 0.35s ease;
  z-index: 0;
}

.vector-image-glow-wrap:hover .vector-image-ambient-glow {
  opacity: 0.85;
  filter: blur(12px);
}

.vector-image-frame {
  position: relative;
  z-index: 1;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(249, 101, 101, 0.45);
  background: #080d19;
  box-shadow: 0 0 10px 1px rgba(249, 101, 101, 0.22), 0 8px 24px -4px rgba(15, 23, 42, 0.12);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vector-image-glow-wrap:hover .vector-image-frame {
  border-color: rgba(249, 101, 101, 0.7);
  box-shadow: 0 0 16px 2px rgba(249, 101, 101, 0.35), 0 12px 28px -4px rgba(15, 23, 42, 0.16);
}

.vector-image-content {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 1.2rem;
  transition: transform 0.4s ease;
}

.vector-image-glow-wrap:hover .vector-image-content {
  transform: scale(1.015);
}

/* =========================================================================
   Footer City Locations with Landmark Icons (Centered Above City Name)
   ========================================================================= */
.footer-city-locations {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.75rem;
  margin-top: 1rem;
}

.footer-city-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  transition: transform 0.2s ease;
}

.footer-city-card:hover {
  transform: translateY(-1px);
}

.footer-city-icon-wrapper {
  height: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 0.35rem;
}

.footer-city-icon-sfo {
  height: 22px;
  width: auto;
  max-width: 52px;
  object-fit: contain;
  display: block;
}

.footer-city-icon-mel {
  height: 28px;
  width: auto;
  max-width: 36px;
  object-fit: contain;
  display: block;
}

.footer-city-name {
  font-size: 0.725rem;
  font-weight: 500;
  color: #64748b;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* =========================================================================
   Pricing Page Buttons
   ========================================================================= */
.btn-primary-outline {
  display: inline-block;
  width: 100%;
  border: 2px solid #ff7c7c;
  color: #ff7c7c;
  background-color: transparent;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.7rem 1.25rem;
  border-radius: 9999px;
  text-align: center;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary-outline:hover {
  background-color: #ff7c7c;
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-enterprise {
  display: inline-block;
  width: 100%;
  background-color: #343d53;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.7rem 1.25rem;
  border-radius: 9999px;
  text-align: center;
  transition: all 0.25s ease;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-enterprise:hover {
  background-color: #1e293b;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ==========================================================================
   Modern FAQ Hub Styles
   ========================================================================== */
.faq-search-box {
  position: relative;
  width: 100%;
}

.faq-search-input {
  width: 100%;
  padding: 0.95rem 2.85rem 0.95rem 3rem;
  border-radius: 9999px;
  border: 1.5px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #de7a38, #e08343 65%, #c88176 80%, #9472a8) border-box !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  font-size: 0.95rem;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.faq-search-input:hover {
  box-shadow: 0 6px 22px rgba(222, 122, 56, 0.08), 0 4px 18px rgba(15, 23, 42, 0.05);
}

.faq-search-input:focus {
  border: 1.5px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #de7a38, #e08343 65%, #c88176 80%, #9472a8) border-box !important;
  box-shadow: 0 0 0 3px rgba(222, 122, 56, 0.2), 0 4px 18px rgba(15, 23, 42, 0.08);
}

.faq-search-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  width: 1.25rem;
  height: 1.25rem;
}

.faq-search-clear {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  padding: 0.35rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.faq-search-clear:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.faq-category-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}

.faq-category-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.faq-category-btn:hover {
  border-color: #cbd5e1;
  color: #0f172a;
  background: #f8fafc;
  transform: translateY(-1px);
}

.faq-category-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.15);
}

.faq-category-count {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 700;
  transition: all 0.2s ease;
}

.faq-category-btn.active .faq-category-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.faq-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0 0.25rem;
}

.faq-counter-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
}

.faq-toggle-all-btn {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f96565;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
}

.faq-toggle-all-btn:hover {
  background: rgba(249, 101, 101, 0.08);
  color: #e04848;
}

.faq-card {
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  background: #ffffff;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  margin-bottom: 0.85rem;
}

.faq-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.faq-card[open] {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.faq-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  user-select: none;
  padding: 0;
  margin: 0;
}

.faq-card summary::-webkit-details-marker {
  display: none;
}

.faq-card summary:after {
  content: none !important;
}

.faq-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.faq-micro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #475569;
}

.faq-micro-badge.badge-ai {
  background: rgba(255, 124, 124, 0.12);
  color: #d93838;
}

.faq-micro-badge.badge-web {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.faq-micro-badge.badge-sec {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

.faq-micro-badge.badge-price {
  background: rgba(168, 85, 247, 0.1);
  color: #6b21a8;
}

.faq-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

.faq-icon-bubble {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-card:hover .faq-icon-bubble {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #ff7c7c;
}

.faq-card[open] .faq-icon-bubble {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  transform: rotate(180deg);
}

.faq-answer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.7;
}

.faq-answer p {
  margin: 0 0 0.5rem 0;
  color: inherit;
  line-height: inherit;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: #f96565;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.faq-answer a:hover {
  text-decoration: underline;
  color: #e04848;
}

.faq-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 1.25rem;
  margin-top: 1rem;
}

.faq-empty-state-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f1f5f9;
}

@media (max-width: 640px) {
  .faq-card {
    padding: 1.15rem 1.15rem;
  }
  .faq-card-title {
    font-size: 0.98rem;
  }
  .faq-category-bar {
    gap: 0.35rem;
  }
  .faq-category-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.76rem;
  }
}

/* ==========================================================================
   News & Updates Page Styles (Blog & Date/Time Cards)
   ========================================================================== */
.news-page {
  background-color: #f8fafc;
  min-height: 80vh;
}

.news-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 3.5rem 0 2.5rem;
}

.news-category-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.news-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
  cursor: pointer;
}

.news-filter-btn:hover {
  color: #0f172a;
  border-color: #cbd5e1;
  background: #f8fafc;
}

.news-filter-btn.active {
  color: #ffffff;
  background: #0f172a;
  border-color: #0f172a;
}

.news-filter-btn .filter-count {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
}

.news-filter-btn.active .filter-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Featured Article Card */
.news-featured-card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 2.5rem;
}

@media (min-width: 48rem) {
  .news-featured-card {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.news-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.news-featured-body {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 64rem) {
  .news-featured-body {
    padding: 3rem;
  }
}

.news-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.8125rem;
  color: #64748b;
  margin-bottom: 0.85rem;
}

.news-pill-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff1f1;
  color: #e04848;
}

.news-pill-tag.blue {
  background: #eff6ff;
  color: #2563eb;
}

.news-pill-tag.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.news-pill-tag.emerald {
  background: #ecfdf5;
  color: #059669;
}

.news-date-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #64748b;
}

.news-featured-title {
  font-size: 1.65rem;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}

@media (min-width: 64rem) {
  .news-featured-title {
    font-size: 2rem;
  }
}

.news-featured-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 1.5rem;
}

.news-author-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f5f9;
}

.news-author-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #0f172a;
}

.news-featured-media {
  position: relative;
  min-height: 280px;
  background: #f1f5f9;
}

.news-featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* News Cards Grid */
.news-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-bottom: 3.5rem;
}

@media (min-width: 48rem) {
  .news-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .news-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Individual Blog / News Card */
.news-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.news-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.08);
}

.news-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  margin: 0.65rem 0 0.5rem;
  letter-spacing: -0.01em;
}

.news-card-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #64748b;
  flex: 1 1 auto;
}

.news-card-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.news-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  padding: 0.15rem 0.5rem;
  border-radius: 0.375rem;
}

/* ==========================================================================
   Resources Page 3-Tab Architecture & Founder-Led Video Grid Styles
   ========================================================================== */
.resource-main-tabs {
  display: inline-flex;
  padding: .35rem;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  max-width: 100%;
}

.resource-main-tabs button {
  border: 0;
  background: transparent;
  padding: .7rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.resource-main-tabs button:hover {
  color: #0f172a;
}

.resource-main-tabs button.active {
  background: #0f172a;
  color: white !important;
}

@media(max-width: 767px) {
  .resource-main-tabs {
    display: flex;
    width: 100%;
    padding: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .resource-main-tabs button {
    flex: 1 1 auto;
    padding: .6rem .65rem;
    font-size: 0.78rem;
    gap: 0.35rem;
  }
}

.res-tab-panel[hidden] {
  display: none !important;
}

/* Founder Videos Grid */
.founder-video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .founder-video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .founder-video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.founder-video-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.founder-video-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.08);
}

.founder-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
}

.founder-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  opacity: 0.85;
}

.founder-video-card:hover .founder-video-thumb img {
  transform: scale(1.03);
  opacity: 0.95;
}

.founder-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.founder-video-card:hover .founder-video-play-btn {
  background: #f96565;
  border-color: #f96565;
  transform: translate(-50%, -50%) scale(1.1);
}

.founder-video-duration {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.founder-video-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.founder-video-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.founder-video-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: #fff1f1;
  color: #e04848;
}

.founder-video-badge.blue {
  background: #eff6ff;
  color: #2563eb;
}

.founder-video-badge.slate {
  background: #f1f5f9;
  color: #475569;
}

.founder-video-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

.founder-video-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #64748b;
  margin-bottom: 0.85rem;
  flex: 1 1 auto;
}

.founder-video-speaker {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f8fafc;
}

/* Sample Reports CTA Banner */
.sample-reports-banner {
  margin-top: 3rem;
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

@media (min-width: 48rem) {
  .sample-reports-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 3rem;
  }
}

/* ==========================================================================
   Compliance Region Flags & Badges
   ========================================================================== */
.guide-flag {
  display: inline-block;
  width: 1.25rem;
  height: 0.95rem;
  border-radius: 0.18rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14);
  flex-shrink: 0;
  vertical-align: middle;
}

.guide-tab.is-active .guide-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.guide-flag-global {
  box-shadow: none !important;
  color: #0284c7;
  width: 1.15rem;
  height: 1.15rem;
}

.guide-tab.is-active .guide-flag-global {
  color: #38bdf8;
}

.dossier-flag {
  display: inline-block;
  width: 1.1rem;
  height: 0.82rem;
  border-radius: 0.15rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  margin-right: 0.4rem;
  vertical-align: -0.1rem;
  flex-shrink: 0;
}

.dossier-flag-global {
  box-shadow: none !important;
  color: #0284c7;
  width: 0.95rem;
  height: 0.95rem;
  margin-right: 0.4rem;
  vertical-align: -0.12rem;
}

/* ==========================================================================
   Infiltra Guide Design Template & Components
   ========================================================================== */

/* Guide Hero & Header */
.guide-hero-wrap h1,
.grad-hero h1,
.guide-hero-title {
  font-size: 1.6rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
}

@media (min-width: 48rem) {
  .guide-hero-wrap h1,
  .grad-hero h1,
  .guide-hero-title {
    font-size: 1.85rem !important;
    line-height: 1.22 !important;
  }
}

@media (min-width: 64rem) {
  .guide-hero-wrap h1,
  .grad-hero h1,
  .guide-hero-title {
    font-size: 2.1rem !important;
    line-height: 1.2 !important;
  }
}

.guide-hero-wrap {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1000px at 15% 15%, rgba(249, 101, 101, 0.08), transparent 60%),
              radial-gradient(800px at 85% 20%, rgba(15, 23, 42, 0.04), transparent 55%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}

.guide-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 1rem;
}

.guide-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.guide-breadcrumb a:hover {
  color: #f96565;
}

.guide-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.guide-topic-pill .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #f96565;
}

.guide-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}

.guide-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.guide-meta-item svg {
  width: 1rem;
  height: 1rem;
  color: #94a3b8;
}

/* Executive Summary Box - Uniform 1px border (No colored left border) */
.guide-summary-card {
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 1.75rem 2rem;
  margin-top: 2rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.guide-summary-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guide-summary-header svg {
  color: #f96565;
  width: 1.25rem;
  height: 1.25rem;
}

.guide-summary-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.guide-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.55;
}

.guide-summary-item-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #f96565;
  margin-top: 0.5rem;
  flex-shrink: 0;
}

/* Modern Table of Contents Box */
.guide-toc-box {
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
}

.guide-toc-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0f172a;
  margin-bottom: 1rem;
}

.guide-toc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 48rem) {
  .guide-toc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1.5rem;
  }
}

.guide-toc-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}

.guide-toc-link:hover {
  color: #0f172a;
  background: #ffffff;
}

.guide-toc-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f96565;
  background: rgba(249, 101, 101, 0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
}

/* Unified Guide Risk Card (Clean, uniform 1px border all around) */
.guide-risk-card {
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  background: #ffffff;
  padding: 2rem;
  margin-bottom: 2.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.guide-risk-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transform: translateY(-1px);
}

.guide-risk-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}

@media (min-width: 48rem) {
  .guide-risk-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.guide-risk-tags {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.guide-risk-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 0.4rem;
  background: #0f172a;
  color: #ffffff;
}

.guide-risk-badge.badge-coral {
  background: rgba(249, 101, 101, 0.12);
  color: #d93838;
  border: 1px solid rgba(249, 101, 101, 0.25);
}

.guide-risk-badge.badge-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.guide-risk-badge.badge-purple {
  background: rgba(147, 51, 234, 0.12);
  color: #7e22ce;
  border: 1px solid rgba(147, 51, 234, 0.25);
}

.guide-risk-badge.badge-cyan {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.guide-risk-severity {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #475569;
}

.guide-risk-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0;
}

/* Labeled Sub-Sections within Risk Cards */
.guide-subsections-grid {
  display: grid;
  gap: 1.5rem;
}

.guide-subhead-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.45rem;
}

.guide-subhead-pill svg {
  width: 0.85rem;
  height: 0.85rem;
  color: #94a3b8;
}

.guide-subhead-pill.accent-coral {
  color: #d93838;
}
.guide-subhead-pill.accent-coral svg {
  color: #f96565;
}

.guide-subhead-pill.accent-blue {
  color: #0284c7;
}
.guide-subhead-pill.accent-blue svg {
  color: #0284c7;
}

.guide-subhead-pill.accent-purple {
  color: #7e22ce;
}
.guide-subhead-pill.accent-purple svg {
  color: #9333ea;
}

.guide-subhead-pill.accent-emerald {
  color: #047857;
}
.guide-subhead-pill.accent-emerald svg {
  color: #10b981;
}

.guide-text-desc {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.65;
  margin: 0;
}

/* Attack / Code Box */
.guide-payload-box {
  border-radius: 0.85rem;
  background: #0f172a;
  border: 1px solid #1e293b;
  padding: 1rem 1.25rem;
  margin-top: 0.65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  color: #f1f5f9;
  line-height: 1.6;
  overflow-x: auto;
}

.guide-payload-box .prompt-tag {
  color: #f96565;
  font-weight: 700;
}

.guide-payload-box .comment {
  color: #64748b;
}

.guide-payload-box .highlight {
  color: #38bdf8;
}

/* Infiltra Autonomous Test Callout inside Card */
.guide-infiltra-test-box {
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 1rem 1.25rem;
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.guide-infiltra-test-box svg {
  color: #f96565;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.guide-infiltra-test-box p {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

/* Modern Checklist Grid (11-Step MCP / 7-Step Agent) */
.guide-step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

@media (min-width: 48rem) {
  .guide-step-grid.two-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

.guide-step-card {
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  background: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.2s ease;
}

.guide-step-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.guide-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.guide-step-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 800;
  color: #f96565;
  background: rgba(249, 101, 101, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
}

.guide-step-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
}

.guide-step-body {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.guide-step-criterion {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  line-height: 1.45;
}

/* Timeline Cards for Regulations */
.guide-timeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

@media (min-width: 48rem) {
  .guide-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.guide-timeline-card {
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  background: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.guide-timeline-date {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0284c7;
  background: #e0f2fe;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  align-self: flex-start;
}

.guide-timeline-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.guide-timeline-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* Sources Grid */
.guide-sources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .guide-sources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.guide-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.guide-source-card:hover {
  border-color: #f96565;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.guide-source-card svg {
  width: 1rem;
  height: 1rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.guide-source-card:hover svg {
  color: #f96565;
}

/* Insights Dashboard & Scan History Images Drop Shadow */
.insight-img-shadow {
  border: none !important;
  outline: none !important;
  filter: drop-shadow(10px 14px 18px rgba(0, 0, 0, 0.14));
  transition: filter 0.3s ease;
}

.insight-img-shadow:hover {
  filter: drop-shadow(14px 18px 24px rgba(0, 0, 0, 0.20));
}