@font-face {
  font-family: 'Anonoymous Pro';
  src: url('fonts/AnonymousPro-Bold.ttf') format('ttf'),
       url('fonts/AnonymousPro-BoldItalic.ttf') format('ttf'),
       url('fonts/AnonymousPro-Italic.ttf') format('ttf'),
       url('fonts/AnonymousPro-Regular.ttf') format('ttf'),
       url('fonts/Anonymous_Pro.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Anonymous Pro', serif;
}

.anonymous-pro-regular {
  font-family: "Anonymous Pro", serif;
  font-weight: 400;
  font-style: normal;
}

.anonymous-pro-bold {
  font-family: "Anonymous Pro", serif;
  font-weight: 700;
  font-style: normal;
}

.anonymous-pro-regular-italic {
  font-family: "Anonymous Pro", serif;
  font-weight: 400;
  font-style: italic;
}

.anonymous-pro-bold-italic {
  font-family: "Anonymous Pro", serif;
  font-weight: 700;
  font-style: italic;
}

.message {
  padding: 10px;
}

.success {
  background-color: #dfd;
  color: #155724;
}

.error {
  background-color: #ffefef;
  color: #ba2121;
}

.info {
  background-color: #e0f2f7;
  color: #26a69a;
}

.warning {
  background-color: #ffc;
  color: #8a6d3b;
}

.delete-button {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #da190b;
}

.errorlist {
  width: 100%;
  align-items: left;
  text-align: left;
  color: #E94F37;
  font-size: 0.9em;
  margin-top: 0.2em;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: white black;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 1px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: black;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 8px;
  border: 2px solid black;
}

html {
  scrollbar-width: thin;
  scrollbar-color: white black;
}

html::-webkit-scrollbar {
  width: 1px;
}

html::-webkit-scrollbar-track {
  background: black;
}

html::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 8px;
  border: 2px solid black;
}

#calendar {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.support-article {
  color: #1a202c;
}

.dark .support-article {
  color: #f3f4f6;
}

.support-article h1 {
  font-size: 1.5rem;
  font-weight: 700;
  padding-left: 1rem;
  padding-right: 1rem;
}

.support-article h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.support-article h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.support-article p {
  margin: 1rem;
  text-align: left;
}

.support-article ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

.support-article ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
  margin-left: 2rem;
  margin-bottom: 1rem;
  text-align: left;
}

.support-article table {
  /* width: 100%; */
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  text-align: left;
  display: block;
  overflow-x: auto;
}

.support-article th {
  background-color: #f3f4f6;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
}

.support-article td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
}

.support-article blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1rem;
  font-style: italic;
  color: #666;
}

.support-article code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: monospace;
}

@media (max-width: 639.98px) {
  .support-article {
    font-size: 0.75rem; /* Tailwind text-xs */
    line-height: 1.2;
  }

  /* Ensure common body elements inherit the smaller size */
  .support-article p,
  .support-article li,
  .support-article td,
  .support-article th,
  .support-article a,
  .support-article small,
  .support-article blockquote {
    font-size: 1em; /* inherit container (0.75rem) */
  }

  /* Optional: keep inline code from looking oversized next to xs text */
  .support-article code {
    font-size: 0.75rem; /* align with text-xs */
  }
}

/* Feature card — unified + accentable (no extra file blocks) */
.feature-card {
  /* per-card accent; defaults to blue if not set inline */
  --accent: #3b82f6;
  --accent-rgb: 59,130,246;

  position: relative;
  overflow: hidden;
  z-index: 1;

  background-color: #1f2937;
  border-radius: 0.5rem;

  /* subtle inner hairline + lift */
  box-shadow:
    0 0 0 1px rgba(148,163,184,0.18) inset,
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,.25);

  transform: translateZ(0) scale(1);
  transition:
    transform 200ms cubic-bezier(.2,.8,.2,1),
    box-shadow 200ms cubic-bezier(.2,.8,.2,1),
    filter 200ms ease, opacity 200ms ease;
  will-change: transform, box-shadow;
}

/* corner accent glow (uses --accent / --accent-rgb) */
.feature-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  background:
    radial-gradient(110px 110px at 100% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    radial-gradient(120px 120px at   0% 100%, rgba(var(--accent-rgb), 0.06), transparent 60%);
  transition: opacity 220ms ease, filter 220ms ease;
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.35) inset,
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 25px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.35),
    0 8px 22px rgba(var(--accent-rgb), 0.10);
}

.feature-card:hover::after,
.feature-card:focus-within::after {
  opacity: 1;
  filter: saturate(1.05);
}

/* keyboard nav ring on the wrapping link (.group) */
.group:focus-visible .feature-card {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.45) inset,
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 10px 26px rgba(var(--accent-rgb), 0.12),
    0 2px 6px rgba(0,0,0,0.35);
}

/* make the small icon inherit the accent (overrides old inline color) */
.feature-card > div.mt-1 { color: var(--accent) !important; }

.feature-card img,
.feature-card svg {
  opacity: .6;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: box-shadow 200ms ease; }
  .feature-card:hover, .feature-card:focus-visible { transform: none; }
}


.feature-card h2 {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    90deg,
    #fff 0%,
    #e6e6e6 20%,
    #fff 40%,
    #fff 60%,
    #ccc 80%,
    #fff 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position 0.3s ease;
}

.feature-card:hover h2 {
  animation: h2-shimmer 3.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card:hover h2 {
    animation: none;
    background-position: 0 0;
  }
}

@keyframes h2-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.feature-card .crosshair {
  --recoil-x: -10px;
  --recoil-y: -6px;
  --recoil-rot: -2deg;
  --recoil-scale: 4.5;
  --recoil-total: 540ms;

  transform: translate3d(0,0,0) rotate(0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

.feature-card .crosshair.recoiling {
  animation: crosshair-recoil var(--recoil-total) cubic-bezier(.2,.7,.2,1) both;
}

@keyframes crosshair-recoil {
  0% {
    transform: translate3d(0,0,0) rotate(0) scale(1);
  }
  24% {
    transform: translate3d(var(--recoil-x), var(--recoil-y), 0)
               rotate(var(--recoil-rot))
               scale(var(--recoil-scale));
  }
  100% {
    transform: translate3d(0,0,0) rotate(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card .crosshair,
  .feature-card .crosshair.recoiling {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

#schild-spark-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 50;
}
#schild-spark-overlay svg { display: block; width: 100%; height: auto; }

.schild-afterglow {
  position: absolute;
  right: 12px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(129,140,248,.28), rgba(129,140,248,0));
  opacity: 0;
  transition: opacity .7s ease;
}

@media (prefers-reduced-motion: reduce) {
  #schild-spark-overlay, .schild-afterglow { display: none !important; }
}

.feature-card {
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
}
.feature-card > * {
  position: relative;
  z-index: 1;
}


.bp-card {
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
}
.bp-card > * {
  position: relative;
  z-index: 1;
}

.bp-card .crosshair {
  position: absolute;
  z-index: 2;
}

.bp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(0deg, rgba(96,165,250,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(96,165,250,0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.34) 1px, transparent 1px);
  background-size:
    10px 10px, 10px 10px,
    50px 50px, 50px 50px;
  background-position:
    0 0, 0 0,
    0 0, 0 0;
  transform: scale(1.05);
  opacity: 0;
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(.22,.61,.36,1);
}

.bp-card:hover::before,
.bp-card:focus-within::before,
.bp-card.reveal::before {
  opacity: 0.55;
  transform: scale(1.0);
}

.bp-card.reveal-click::before {
  opacity: .38;
  transition-duration: 220ms;
}

.bp-card.reveal,
.bp-card:hover,
.bp-card:focus-within {
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.25),
    0 6px 24px rgba(0,0,0,0.28);
}

.bp-card svg {
  will-change: opacity, transform;
}
.bp-card svg.sketch-draw path,
.bp-card svg.sketch-draw circle,
.bp-card svg.sketch-draw rect,
.bp-card svg.sketch-draw line,
.bp-card svg.sketch-draw polyline,
.bp-card svg.sketch-draw polygon {
  animation: schild-sketch 900ms ease-out forwards;
}

@keyframes schild-sketch {
  from { stroke-dashoffset: var(--path-len, 60); opacity: 0.6; }
  60%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-card::before,
  .bp-card svg.sketch-draw path,
  .bp-card svg.sketch-draw circle,
  .bp-card svg.sketch-draw rect,
  .bp-card svg.sketch-draw line,
  .bp-card svg.sketch-draw polyline,
  .bp-card svg.sketch-draw polygon {
    animation: none !important;
    transition: none !important;
  }
  .bp-card::before {
    opacity: 0.18;
    transform: none;
  }
}

.tp-header {
  will-change: transform;
  transform: translate3d(0, var(--tp-parallax, 0px), 0);
}

.tp-card {
  will-change: transform, box-shadow;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease;
  transform-origin: center center;
}
.tp-card.snap-focus {
  transform: scale(1.02);
  box-shadow:
    0 0 0 1px rgba(148,163,184,.25),
    0 10px 30px rgba(0,0,0,.30);
}

.tp-card.snap-focus .crosshair {
  transform-origin: 90% 10%;
  transform: scale(1.12);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .tp-header {
    transform: none !important;
  }
  .tp-card {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .tp-card .crosshair {
    transform: none !important;
  }
}

.feature-card > *:not(.crosshair) {
  position: relative;
  z-index: 1;
}

.feature-card .crosshair {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  margin: 10px 10px 0 0 !important;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  transform-origin: 90% 10%;
}

@media (prefers-reduced-motion: reduce) {
  #data-pricing-table tr { opacity: 1 !important; transform: none !important; }
}

#data-pricing-table tr.__cascade-hidden {
  opacity: 0;
  transform: translateY(8px);
}

@keyframes cascadeRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#data-pricing-table tr.__cascade-revealed {
  animation: cascadeRowIn 320ms cubic-bezier(.2,.7,.2,1) both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  #hero-pricing h1, #hero-pricing h2, #hero-pricing .hero-shimmer {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

#hero-pricing .hero-shimmer {
  display: block;
  height: 3px;
  width: 180px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  background-size: 200% 100%;
  margin-top: 8px;
  will-change: background-position, opacity;
}
@keyframes heroShimmerOnce {
  0%   { background-position: 200% 0; opacity: 0; }
  10%  { opacity: 1; }
  100% { background-position: -200% 0; opacity: 1; }
}

@keyframes heroFadeUpMd {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeUpSm {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-curtain] .curtain-inner { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-curtain]::after { display: none !important; }
}

[data-curtain] {
  position: relative;
  overflow: hidden;
}

[data-curtain] .curtain-inner {
  opacity: 0;
  transform: translateY(10px);
  will-change: clip-path, opacity, transform;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

[data-curtain]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.04)
  );
  transform: translateY(0%);
  opacity: 0;
  pointer-events: none;
}

[data-curtain].is-revealing .curtain-inner {
  animation: curtainOpen 540ms cubic-bezier(.2,.7,.2,1) forwards,
             contentSettle 540ms cubic-bezier(.2,.7,.2,1) forwards;
}
[data-curtain].is-revealing::after {
  animation: wipeMove 420ms cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes curtainOpen {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes contentSettle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wipeMove {
  0%   { opacity: .9; transform: translateY(0%); }
  100% { opacity: 0;  transform: translateY(100%); }
}

@supports (-webkit-hyphens:none) {
  [data-curtain] .curtain-inner {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  [data-curtain].is-revealing .curtain-inner {
    animation-name: curtainOpen, contentSettle;
  }
}

#data-pricing-table td:last-child .microbar {
  height: 4px;
  margin-top: 6px;
  border-radius: 9999px;
  background: rgba(148,163,184,.25);
  overflow: hidden;
}
#data-pricing-table td:last-child .microbar-fill {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
  background: linear-gradient(90deg, #93c5fd, #c4b5fd, #fbcfe8);
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  #data-pricing-table td:last-child .microbar-fill {
    transition: none !important;
    transform: none !important;
  }
}

.org-diagram {
  display: flex;
  justify-content: center;
  min-height: 400px;
}

.org-map {
  width: 100%;
  max-width: 600px;
}

.node {
  fill: #1e293b;
  stroke: #64748b;
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.3s, stroke 0.3s;
}

.node.main {
  fill: #334155;
  stroke: #94a3b8;
  stroke-width: 3;
}

.node:hover {
  fill: #475569;
  stroke: #e2e8f0;
}

.link {
  stroke: #64748b;
  stroke-width: 2;
}

.node-label {
  font-size: 12px;
  text-anchor: middle;
  fill: #93c5fd;
  pointer-events: none;
  font-family: sans-serif;
}

#flow-path {
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  animation: path-draw 2.2s ease-out forwards, path-glow 3s ease-in-out infinite 2.2s;
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.35));
}
@keyframes path-draw { to { stroke-dashoffset: 0; } }
@keyframes path-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(167,139,250,0.35)); }
  50% { filter: drop-shadow(0 0 12px rgba(52,211,153,0.5)); }
}

#op-captions .op-cap { opacity: 0.5; transition: opacity .35s ease; }
#op-captions .op-cap-active { opacity: 1; }

.op-node circle { transform-origin: center; }
.op-node.pulse circle { animation: node-pulse .8s ease; }
@keyframes node-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #flow-path, #packet { animation: none !important; }
}

@keyframes path-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(192,192,192,0.35)); }
  50% { filter: drop-shadow(0 0 12px rgba(230,230,230,0.6)); }
}

#op-captions .op-cap { opacity: 0.55; transition: opacity .25s ease, color .25s ease; }
#op-captions .op-cap.op-cap-active { opacity: 1; color: #e5e7eb; }

.op-node { transition: transform .25s ease, filter .25s ease; }
.op-node circle { transform-origin: center; }
.op-node.pulse circle { animation: node-pulse .6s ease; }
@keyframes node-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.op-node.active circle { fill: #e6e6e6; }

#flow-path {
  stroke-dasharray: 1100;
  stroke-dashoffset: 0;
  animation: path-glow 3s ease-in-out infinite;
}
@keyframes path-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(224,224,224,0.3)); }
  50%     { filter: drop-shadow(0 0 12px rgba(245,245,245,0.5)); }
}

#ops-flow-svg text {
  fill: #bfdbfe !important;
  font-weight: 600;
}

.asset .ping {
  transform-origin: center;
  transition: opacity .25s ease;
}
.asset.pinging .ping {
  animation: asset-ping 1200ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes asset-ping {
  0%   { r: 0;   opacity: .55; }
  80%  { r: 56;  opacity: .15; }
  100% { r: 64;  opacity: 0; }
}

.asset.pinging use {
  animation: asset-pop 380ms cubic-bezier(.2,.7,.2,1);
}
@keyframes asset-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .asset .ping,
  .asset.pinging .ping,
  .asset.pinging use {
    animation: none !important;
    transition: none !important;
  }
}

#user-graph .ug-node circle.core {
  r: 5;
  fill: #e5e7eb;
  stroke: none;
}
#user-graph .ug-node circle.ring {
  r: 14;
  stroke: url(#ugGrad);
  fill: none;
  opacity: .9;
}
#user-graph .ug-node circle.ping {
  r: 0;
  stroke: url(#ugGrad);
  fill: none;
  opacity: 0;
}

.ug-node.active circle.ping {
  animation: ug-ping 1100ms cubic-bezier(.2,.7,.2,1) forwards;
}
.ug-node.active circle.ring {
  animation: ug-pop 380ms cubic-bezier(.2,.7,.2,1);
}

@keyframes ug-ping {
  0%   { r: 0;   opacity: .55; }
  80%  { r: 34;  opacity: .15; }
  100% { r: 40;  opacity: 0; }
}
@keyframes ug-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ug-node.active circle.ping,
  .ug-node.active circle.ring {
    animation: none !important;
  }
}

.ops-dash {
  stroke-dasharray: 10 10;
  animation: ops-dash-move 2.2s linear infinite;
}
@keyframes ops-dash-move {
  to { stroke-dashoffset: -20; }
}

.node.active circle {
  stroke: rgba(59,130,246,0.9);
  fill: rgba(96,165,250,0.20);
  animation: node-pulse 1.3s ease-in-out infinite;
}

@keyframes node-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ops-dash { animation: none; }
  .node.active circle { animation: none; }
}

#ingest-viewport{
  overflow: hidden;
}

#ingest-rows{
  position: relative;
  height: calc(var(--row-h,44px) * 10);
}

.ingest-row{
  position: absolute;
  left: 0; right: 0;
  height: var(--row-h,44px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  padding: 0 12px;
  will-change: transform;
  min-width: 0;
}

.ingest-row:last-child{ border-bottom: 0; }

.ingest-row:nth-child(odd) {
  background: linear-gradient(to right, rgba(31,41,55,0.34), rgba(17,24,39,0.18));
}

.ingest-row > div:first-child {
  flex: 0 0 auto;
  min-width: 64px;
}

.ingest-row > div:nth-child(2) {
  flex: 1 1 auto;
  min-width: 100px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ingest-row > div:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: fit-content;
  text-align: right;
}

.ingest-row.leaving {
  opacity: 0;
  filter: blur(2px);
  transition: transform 420ms ease, opacity 420ms ease, filter 420ms ease;
}


@media (max-width: 640px) {
  .ingest-row {
    grid-template-columns: 88px 1fr minmax(0, 40%);
    gap: 8px;
    row-gap: 12px;
    font-size: 0.85rem;
  }
  .ingest-row > div:first-child {
    min-width: 64px;
  }
  .ingest-row > div:nth-child(2) {
    min-width: 100px;
  }
  .ingest-row > div:last-child {
    min-width: 0;
    white-space: normal;
    text-align: right;
    justify-self: end;
    max-width: 100%;
    padding-bottom: 4px;
  }
  .ingest-row > div:last-child .pill {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    line-height: 1.1rem;
    padding: 4px 8px;
  }
}

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.pill-complete     { background: rgba(34,197,94,0.15);  color: #86efac; border-color: rgba(34,197,94,0.35); }
.pill-incomplete   { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.35); }
.pill-accepted     { background: rgba(59,130,246,0.15); color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.pill-declined     { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.pill-submitted    { background: rgba(99,102,241,0.15); color: #c7d2fe; border-color: rgba(99,102,241,0.35); }

.pill-loaded       { background: rgba(59,130,246,0.15); color: #bfdbfe; border-color: rgba(59,130,246,0.35); }
.pill-departed     { background: rgba(96,165,250,0.15); color: #bfdbfe; border-color: rgba(96,165,250,0.35); }
.pill-enroute      { background: rgba(14,165,233,0.15); color: #93c5fd; border-color: rgba(14,165,233,0.35); }
.pill-stopped      { background: rgba(148,163,184,0.15); color: #cbd5e1; border-color: rgba(148,163,184,0.35); }
.pill-delayed      { background: rgba(245,158,11,0.15); color: #fbbf24; border-color: rgba(245,158,11,0.35); }
.pill-arrived      { background: rgba(34,197,94,0.15); color: #86efac; border-color: rgba(34,197,94,0.35); }
.pill-delivered    { background: rgba(16,185,129,0.15); color: #a7f3d0; border-color: rgba(16,185,129,0.35); }
.pill-other        { background: rgba(148,163,184,0.12); color: #e5e7eb; border-color: rgba(148,163,184,0.35); }

.pill-vip_met      { background: rgba(6,182,212,0.15);  color: #99f6e4; border-color: rgba(6,182,212,0.35); }
.pill-secured      { background: rgba(16,185,129,0.15); color: #a7f3d0; border-color: rgba(16,185,129,0.35); }

@media (prefers-reduced-motion: reduce) {
  .ingest-row { transition: none !important; }
}

#ingest-viewport{
  overflow: clip;
  overflow: hidden;

  border-radius: 0.375rem;

  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);

  contain: paint;
  isolation: isolate;

  transform: translateZ(0);
  will-change: transform;
}

#ingest-rows{
  transform: translateZ(0);
}

.pricing-sash {
  --ps-angle: 45deg;
  --ps-thickness: 10px;
  --ps-offset: 48px;
  --ps-a: #4f46e5;
  --ps-b: #eab308;

  background-image:
    linear-gradient(
      var(--ps-angle),
      transparent 0,
      transparent calc(var(--ps-offset) - (var(--ps-thickness) / 2)),
      var(--ps-a)   calc(var(--ps-offset) - (var(--ps-thickness) / 2)),
      var(--ps-b)   calc(var(--ps-offset) + (var(--ps-thickness) / 2)),
      transparent   calc(var(--ps-offset) + (var(--ps-thickness) / 2)),
      transparent 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: inherit;
}

.pricing-sash:hover {
  --ps-offset: 56px;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-sash:hover { --ps-offset: 48px; }
}

.ps-indigo-yellow   { --ps-a: #4f46e5; --ps-b: #eab308; }
.ps-emerald-magenta { --ps-a: #059669; --ps-b: #db2777; }
.ps-sky-rose        { --ps-a: #0284c7; --ps-b: #f43f5e; }

.ps-thin  { --ps-thickness: 6px; }
.ps-thick { --ps-thickness: 14px; }

@keyframes caret-blink { 0%,49% {opacity:1} 50%,100% {opacity:0} }
.typed-caret::after {
  content: "";
  display: inline-block;
  width: 0.6ch;
  border-right: 2px solid currentColor;
  margin-left: 2px;
  animation: caret-blink 1s step-end infinite;
  transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
  .typed-caret::after { animation: none; }
}

#cli-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.25rem; 
}

.mac-btn{
  width:12px; height:12px; border-radius:9999px; position:relative; line-height:0;
  display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 2px 1px rgba(255,255,255,.25);
  margin-right: 5px;
}
.mac-close   { background:#ff5f57; }
.mac-minimize{ background:#ffbd2e; }
.mac-zoom    { background:#28c840; }

.mac-glyph{ width:8px; height:8px; display:block; opacity:0; transition:opacity .12s ease-in-out; }
.mac-btn:hover .mac-glyph{ opacity:.9; }

.mac-glyph line{
  stroke: rgba(0,0,0,.60);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (prefers-reduced-motion: reduce){
  .mac-glyph{ transition:none; }
}

/* --- Section captions (title + description) --- */
.section-cap{
  --cap-bg: rgba(2, 6, 23, 0.55);
  --cap-br: rgba(203, 213, 225, 0.42);
  --cap-tx: #e5e7eb; 
  --cap-ac: #60a5fa;
  background: linear-gradient(180deg, rgba(2,6,23,.6), rgba(2,6,23,.35));
  color: var(--cap-tx);
  border: 1px solid var(--cap-br);
  border-radius: .875rem;
  padding: .75rem 1rem .8rem 1rem;
  box-shadow: 0 10px 28px rgba(2,6,23,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.section-cap__title{
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 .25rem 0;
}

.section-cap__desc{
  font-size: .95rem;
  line-height: 1.25rem;
  color: #cbd5e1; /* slate-300 */
  margin: 0;
}

/* Subtle accent bar under the title */
.section-cap__title{
  position: relative;
  padding-bottom: 2px;
}
.section-cap__title::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100px; height: 2px;
  background: linear-gradient(90deg, #ffffff, var(--cap-ac), #ffffff);
  opacity: .65;
  border-radius: 2px;
}

/* Reveal effect */
.fx-section{
  opacity: 0;
  transform: translateY(8px) scale(.985);
  filter: blur(4px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.fx-section.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  .fx-section{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* Base section themes (no JS)
   Usage: wrap a section with .sec and a theme (.sec-blue | .sec-emerald | .sec-violet)
   and add .sec-card to the card container.
*/
.sec { --tint: 59,130,246; }              /* default = blue-500 (fallback) */
.sec-blue    { --tint: 59,130,246; }      /* blue-500 */
.sec-emerald { --tint: 16,185,129; }      /* emerald-500 */
.sec-violet  { --tint: 139,92,246; }      /* violet-500 */

.sec .section-cap{
  --cap-ac: rgb(var(--tint));                           /* underline accent */
  --cap-br: rgba(var(--tint), 0.36);                    /* soft tinted border */
  box-shadow:
    0 10px 28px rgba(2,6,23,0.46),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 14px 30px -18px rgba(var(--tint), 0.28);          /* gentle tinted drop */
}
.sec .section-cap__title::after{
  background: linear-gradient(90deg, #fff, rgb(var(--tint)), #fff);
  opacity: 0.62;
}

.sec .sec-card{
  position: relative;
  border: 1px solid rgba(var(--tint), 0.16);
  box-shadow:
    0 10px 28px rgba(2,6,23,0.45),
    0 20px 44px -22px rgba(var(--tint), 0.32);
  background-image:
    linear-gradient(180deg, rgba(var(--tint), 0.06), transparent 42%);
  background-blend-mode: screen;
}

.sec-emerald #ingest-viewport{ border-color: rgba(var(--tint), 0.28) !important; }
.sec-blue    #ingest-viewport{ border-color: rgba(var(--tint), 0.24) !important; }
.sec-violet  #ingest-viewport{ border-color: rgba(var(--tint), 0.24) !important; }

#ops-flow.sec-blue .sec-card{
  box-shadow:
    /* ambient depth */
    0 14px 36px rgba(2, 6, 23, 0.55),
    /* primary blue glow (slightly stronger + wider) */
    0 34px 72px -20px rgba(59, 130, 246, 0.54),
    /* mid-range lift to make the color read */
    0 8px 26px -14px rgba(59, 130, 246, 0.38);
}

#ops-flow.sec-blue .section-cap{
  box-shadow:
    0 12px 30px rgba(2, 6, 23, 0.50),
    0 20px 44px -18px rgba(59, 130, 246, 0.42);
}

#ops-ingest.sec-emerald .sec-card{
  box-shadow:
    /* ambient depth */
    0 14px 36px rgba(2, 6, 23, 0.55),
    /* primary emerald glow (slightly stronger + wider) */
    0 34px 72px -20px rgba(16, 185, 129, 0.52),
    /* mid-range lift to make the color read */
    0 8px 26px -14px rgba(16, 185, 129, 0.36);
}

.sec.sec-violet .sec-card{
  box-shadow:
    /* ambient depth */
    0 14px 36px rgba(2, 6, 23, 0.55),
    /* primary violet glow (slightly stronger + wider) */
    0 34px 72px -20px rgba(139, 92, 246, 0.54),
    /* mid-range lift to make the color read */
    0 8px 26px -14px rgba(139, 92, 246, 0.38);
}

.sec.sec-violet .section-cap{
  box-shadow:
    0 12px 30px rgba(2, 6, 23, 0.50),
    0 20px 44px -18px rgba(139, 92, 246, 0.42);
}

.sec.sec-violet { 
  /* switch from violet-500 (139,92,246) to a lighter violet-400 */
  --tint: 167, 139, 250;
}

/* Caption: a hair brighter border/underline */
.sec.sec-violet .section-cap{
  --cap-br: rgba(167,139,250,0.48);   /* was ~0.36 */
}
.sec.sec-violet .section-cap__title::after{
  opacity: 0.72;                      /* was ~0.62 */
}

.sec.sec-violet .sec-card{
  border-color: rgba(167,139,250,0.26);  /* subtle ring bump */
  background-image:
    linear-gradient(180deg, rgba(167,139,250,0.12), transparent 50%),
    linear-gradient(0deg,   rgba(167,139,250,0.06), rgba(167,139,250,0) 70%);
  background-blend-mode: screen;
}

/* ===== Section-level differentiation ===== */
.feature-section {
  position: relative;
  /* Sensible defaults in case a section forgets to set these */
  --section-accent: #22c55e;
  --section-accent-rgb: 34, 197, 94;
}

/* Animated accent underline on the section header link */
.feature-section .tp-header a {
  position: relative;
  display: inline-block;
}
.feature-section .tp-header a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg,
    rgba(var(--section-accent-rgb), 0.9),
    rgba(var(--section-accent-rgb), 0.15));
  transform-origin: left;
  transform: scaleX(.28);
  transition: transform .35s ease;
}
.feature-section:hover .tp-header a::after,
.feature-section:focus-within .tp-header a::after {
  transform: scaleX(1);
}

/* Feature card — unified + accentable (no extra file blocks) */
.feature-card {
  /* per-card accent; defaults to blue if not set inline */
  --accent: #3b82f6;
  --accent-rgb: 59,130,246;

  position: relative;
  overflow: hidden;
  z-index: 1;

  background-color: #1f2937;
  border-radius: 0.5rem;

  /* subtle inner hairline + lift */
  box-shadow:
    0 0 0 1px rgba(148,163,184,0.18) inset,
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,.25);

  transform: translateZ(0) scale(1);
  transition:
    transform 200ms cubic-bezier(.2,.8,.2,1),
    box-shadow 200ms cubic-bezier(.2,.8,.2,1),
    filter 200ms ease, opacity 200ms ease;
  will-change: transform, box-shadow;
}

/* corner accent glow (uses --accent / --accent-rgb) */
.feature-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  background:
    radial-gradient(110px 110px at 100% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    radial-gradient(120px 120px at   0% 100%, rgba(var(--accent-rgb), 0.06), transparent 60%);
  transition: opacity 220ms ease, filter 220ms ease;
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.35) inset,
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 25px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.35),
    0 8px 22px rgba(var(--accent-rgb), 0.10);
}

.feature-card:hover::after,
.feature-card:focus-within::after {
  opacity: 1;
  filter: saturate(1.05);
}

/* keyboard nav ring on the wrapping link (.group) */
.group:focus-visible .feature-card {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.45) inset,
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 10px 26px rgba(var(--accent-rgb), 0.12),
    0 2px 6px rgba(0,0,0,0.35);
}

/* make the small icon inherit the accent (overrides old inline color) */
.feature-card > div.mt-1 { color: var(--accent) !important; }

.feature-card img,
.feature-card svg {
  opacity: .6;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: box-shadow 200ms ease; }
  .feature-card:hover, .feature-card:focus-visible { transform: none; }
}


.feature-card h2 {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    90deg,
    #fff 0%,
    #e6e6e6 20%,
    #fff 40%,
    #fff 60%,
    #ccc 80%,
    #fff 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position 0.3s ease;
}

.feature-card:hover h2 {
  animation: h2-shimmer 3.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card:hover h2 {
    animation: none;
    background-position: 0 0;
  }
}

@keyframes h2-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.feature-card .crosshair {
  --recoil-x: -10px;
  --recoil-y: -6px;
  --recoil-rot: -2deg;
  --recoil-scale: 4.5;
  --recoil-total: 540ms;

  transform: translate3d(0,0,0) rotate(0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

.feature-card .crosshair.recoiling {
  animation: crosshair-recoil var(--recoil-total) cubic-bezier(.2,.7,.2,1) both;
}

@keyframes crosshair-recoil {
  0% {
    transform: translate3d(0,0,0) rotate(0) scale(1);
  }
  24% {
    transform: translate3d(var(--recoil-x), var(--recoil-y), 0)
               rotate(var(--recoil-rot))
               scale(var(--recoil-scale));
  }
  100% {
    transform: translate3d(0,0,0) rotate(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card .crosshair,
  .feature-card .crosshair.recoiling {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

#schild-spark-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 50;
}
#schild-spark-overlay svg { display: block; width: 100%; height: auto; }

.schild-afterglow {
  position: absolute;
  right: 12px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(129,140,248,.28), rgba(129,140,248,0));
  opacity: 0;
  transition: opacity .7s ease;
}

@media (prefers-reduced-motion: reduce) {
  #schild-spark-overlay, .schild-afterglow { display: none !important; }
}

.feature-card {
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
}
.feature-card > * {
  position: relative;
  z-index: 1;
}


.bp-card {
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
}
.bp-card > * {
  position: relative;
  z-index: 1;
}

.bp-card .crosshair {
  position: absolute;
  z-index: 2;
}

.bp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(0deg, rgba(96,165,250,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(96,165,250,0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.34) 1px, transparent 1px);
  background-size:
    10px 10px, 10px 10px,
    50px 50px, 50px 50px;
  background-position:
    0 0, 0 0,
    0 0, 0 0;
  transform: scale(1.05);
  opacity: 0;
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(.22,.61,.36,1);
}

.bp-card:hover::before,
.bp-card:focus-within::before,
.bp-card.reveal::before {
  opacity: 0.55;
  transform: scale(1.0);
}

.bp-card.reveal-click::before {
  opacity: .38;
  transition-duration: 220ms;
}

.bp-card.reveal,
.bp-card:hover,
.bp-card:focus-within {
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.25),
    0 6px 24px rgba(0,0,0,0.28);
}

.bp-card svg {
  will-change: opacity, transform;
}
.bp-card svg.sketch-draw path,
.bp-card svg.sketch-draw circle,
.bp-card svg.sketch-draw rect,
.bp-card svg.sketch-draw line,
.bp-card svg.sketch-draw polyline,
.bp-card svg.sketch-draw polygon {
  animation: schild-sketch 900ms ease-out forwards;
}

@keyframes schild-sketch {
  from { stroke-dashoffset: var(--path-len, 60); opacity: 0.6; }
  60%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-card::before,
  .bp-card svg.sketch-draw path,
  .bp-card svg.sketch-draw circle,
  .bp-card svg.sketch-draw rect,
  .bp-card svg.sketch-draw line,
  .bp-card svg.sketch-draw polyline,
  .bp-card svg.sketch-draw polygon {
    animation: none !important;
    transition: none !important;
  }
  .bp-card::before {
    opacity: 0.18;
    transform: none;
  }
}

.tp-header {
  will-change: transform;
  transform: translate3d(0, var(--tp-parallax, 0px), 0);
}

.tp-card {
  will-change: transform, box-shadow;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease;
  transform-origin: center center;
}
.tp-card.snap-focus {
  transform: scale(1.02);
  box-shadow:
    0 0 0 1px rgba(148,163,184,.25),
    0 10px 30px rgba(0,0,0,.30);
}

.tp-card.snap-focus .crosshair {
  transform-origin: 90% 10%;
  transform: scale(1.12);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .tp-header {
    transform: none !important;
  }
  .tp-card {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .tp-card .crosshair {
    transform: none !important;
  }
}

.feature-card > *:not(.crosshair) {
  position: relative;
  z-index: 1;
}

.feature-card .crosshair {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  margin: 10px 10px 0 0 !important;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  transform-origin: 90% 10%;
}

@media (prefers-reduced-motion: reduce) {
  #data-pricing-table tr { opacity: 1 !important; transform: none !important; }
}

#data-pricing-table tr.__cascade-hidden {
  opacity: 0;
  transform: translateY(8px);
}

@keyframes cascadeRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#data-pricing-table tr.__cascade-revealed {
  animation: cascadeRowIn 320ms cubic-bezier(.2,.7,.2,1) both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  #hero-pricing h1, #hero-pricing h2, #hero-pricing .hero-shimmer {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

#hero-pricing .hero-shimmer {
  display: block;
  height: 3px;
  width: 180px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  background-size: 200% 100%;
  margin-top: 8px;
  will-change: background-position, opacity;
}

/* Ambient particles behind the Pricing hero */
#hero-pricing { position: relative; }
#hero-pricing > *:not(canvas) { position: relative; z-index: 1; }

.pricing-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;              /* stays behind headings/shimmer */
  pointer-events: none;
  opacity: .45;            /* keep it subtle */
}

@media (prefers-reduced-motion: reduce) {
  .pricing-particles { opacity: .45; }    /* still visible, but no animation */
}

@keyframes heroShimmerOnce {
  0%   { background-position: 200% 0; opacity: 0; }
  10%  { opacity: 1; }
  100% { background-position: -200% 0; opacity: 1; }
}

@keyframes heroFadeUpMd {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeUpSm {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-curtain] .curtain-inner { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-curtain]::after { display: none !important; }
}

[data-curtain] {
  position: relative;
  overflow: hidden;
}

[data-curtain] .curtain-inner {
  opacity: 0;
  transform: translateY(10px);
  will-change: clip-path, opacity, transform;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

[data-curtain]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.04)
  );
  transform: translateY(0%);
  opacity: 0;
  pointer-events: none;
}

[data-curtain].is-revealing .curtain-inner {
  animation: curtainOpen 540ms cubic-bezier(.2,.7,.2,1) forwards,
             contentSettle 540ms cubic-bezier(.2,.7,.2,1) forwards;
}
[data-curtain].is-revealing::after {
  animation: wipeMove 420ms cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes curtainOpen {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes contentSettle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wipeMove {
  0%   { opacity: .9; transform: translateY(0%); }
  100% { opacity: 0;  transform: translateY(100%); }
}

@supports (-webkit-hyphens:none) {
  [data-curtain] .curtain-inner {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  [data-curtain].is-revealing .curtain-inner {
    animation-name: curtainOpen, contentSettle;
  }
}

#data-pricing-table td:last-child .microbar {
  height: 4px;
  margin-top: 6px;
  border-radius: 9999px;
  background: rgba(148,163,184,.25);
  overflow: hidden;
}
#data-pricing-table td:last-child .microbar-fill {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
  background: linear-gradient(90deg, #93c5fd, #c4b5fd, #fbcfe8);
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  #data-pricing-table td:last-child .microbar-fill {
    transition: none !important;
    transform: none !important;
  }
}

.org-diagram {
  display: flex;
  justify-content: center;
  min-height: 400px;
}

.org-map {
  width: 100%;
  max-width: 600px;
}

.node {
  fill: #1e293b;
  stroke: #64748b;
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.3s, stroke 0.3s;
}

.node.main {
  fill: #334155;
  stroke: #94a3b8;
  stroke-width: 3;
}

.node:hover {
  fill: #475569;
  stroke: #e2e8f0;
}

.link {
  stroke: #64748b;
  stroke-width: 2;
}

.node-label {
  font-size: 12px;
  text-anchor: middle;
  fill: #93c5fd;
  pointer-events: none;
  font-family: sans-serif;
}

#flow-path {
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  animation: path-draw 2.2s ease-out forwards, path-glow 3s ease-in-out infinite 2.2s;
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.35));
}
@keyframes path-draw { to { stroke-dashoffset: 0; } }
@keyframes path-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(167,139,250,0.35)); }
  50% { filter: drop-shadow(0 0 12px rgba(52,211,153,0.5)); }
}

#op-captions .op-cap { opacity: 0.5; transition: opacity .35s ease; }
#op-captions .op-cap-active { opacity: 1; }

.op-node circle { transform-origin: center; }
.op-node.pulse circle { animation: node-pulse .8s ease; }
@keyframes node-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #flow-path, #packet { animation: none !important; }
}

@keyframes path-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(192,192,192,0.35)); }
  50% { filter: drop-shadow(0 0 12px rgba(230,230,230,0.6)); }
}

#op-captions .op-cap { opacity: 0.55; transition: opacity .25s ease, color .25s ease; }
#op-captions .op-cap.op-cap-active { opacity: 1; color: #e5e7eb; }

.op-node { transition: transform .25s ease, filter .25s ease; }
.op-node circle { transform-origin: center; }
.op-node.pulse circle { animation: node-pulse .6s ease; }
@keyframes node-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.op-node.active circle { fill: #e6e6e6; }

#flow-path {
  stroke-dasharray: 1100;
  stroke-dashoffset: 0;
  animation: path-glow 3s ease-in-out infinite;
}
@keyframes path-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(224,224,224,0.3)); }
  50%     { filter: drop-shadow(0 0 12px rgba(245,245,245,0.5)); }
}

#ops-flow-svg text {
  fill: #bfdbfe !important;
  font-weight: 600;
}

.asset .ping {
  transform-origin: center;
  transition: opacity .25s ease;
}
.asset.pinging .ping {
  animation: asset-ping 1200ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes asset-ping {
  0%   { r: 0;   opacity: .55; }
  80%  { r: 56;  opacity: .15; }
  100% { r: 64;  opacity: 0; }
}

.asset.pinging use {
  animation: asset-pop 380ms cubic-bezier(.2,.7,.2,1);
}
@keyframes asset-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .asset .ping,
  .asset.pinging .ping,
  .asset.pinging use {
    animation: none !important;
    transition: none !important;
  }
}

#user-graph .ug-node circle.core {
  r: 5;
  fill: #e5e7eb;
  stroke: none;
}
#user-graph .ug-node circle.ring {
  r: 14;
  stroke: url(#ugGrad);
  fill: none;
  opacity: .9;
}
#user-graph .ug-node circle.ping {
  r: 0;
  stroke: url(#ugGrad);
  fill: none;
  opacity: 0;
}

.ug-node.active circle.ping {
  animation: ug-ping 1100ms cubic-bezier(.2,.7,.2,1) forwards;
}
.ug-node.active circle.ring {
  animation: ug-pop 380ms cubic-bezier(.2,.7,.2,1);
}

@keyframes ug-ping {
  0%   { r: 0;   opacity: .55; }
  80%  { r: 34;  opacity: .15; }
  100% { r: 40;  opacity: 0; }
}
@keyframes ug-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ug-node.active circle.ping,
  .ug-node.active circle.ring {
    animation: none !important;
  }
}

.ops-dash {
  stroke-dasharray: 10 10;
  animation: ops-dash-move 2.2s linear infinite;
}
@keyframes ops-dash-move {
  to { stroke-dashoffset: -20; }
}

.node.active circle {
  stroke: rgba(59,130,246,0.9);
  fill: rgba(96,165,250,0.20);
  animation: node-pulse 1.3s ease-in-out infinite;
}

@keyframes node-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ops-dash { animation: none; }
  .node.active circle { animation: none; }
}

#ingest-viewport{
  overflow: hidden;
}

#ingest-rows{
  position: relative;
  height: calc(var(--row-h,44px) * 10);
}

.ingest-row{
  position: absolute;
  left: 0; right: 0;
  height: var(--row-h,44px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  padding: 0 12px;
  will-change: transform;
  min-width: 0;
}

.ingest-row:last-child{ border-bottom: 0; }

.ingest-row:nth-child(odd) {
  background: linear-gradient(to right, rgba(31,41,55,0.34), rgba(17,24,39,0.18));
}

.ingest-row > div:first-child {
  flex: 0 0 auto;
  min-width: 64px;
}

.ingest-row > div:nth-child(2) {
  flex: 1 1 auto;
  min-width: 100px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ingest-row > div:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: fit-content;
  text-align: right;
}

.ingest-row.leaving {
  opacity: 0;
  filter: blur(2px);
  transition: transform 420ms ease, opacity 420ms ease, filter 420ms ease;
}


@media (max-width: 640px) {
  .ingest-row {
    grid-template-columns: 88px 1fr minmax(0, 40%);
    gap: 8px;
    row-gap: 12px;
    font-size: 0.85rem;
  }
  .ingest-row > div:first-child {
    min-width: 64px;
  }
  .ingest-row > div:nth-child(2) {
    min-width: 100px;
  }
  .ingest-row > div:last-child {
    min-width: 0;
    white-space: normal;
    text-align: right;
    justify-self: end;
    max-width: 100%;
    padding-bottom: 4px;
  }
  .ingest-row > div:last-child .pill {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    line-height: 1.1rem;
    padding: 4px 8px;
  }
}

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.pill-complete     { background: rgba(34,197,94,0.15);  color: #86efac; border-color: rgba(34,197,94,0.35); }
.pill-incomplete   { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.35); }
.pill-accepted     { background: rgba(59,130,246,0.15); color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.pill-declined     { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.pill-submitted    { background: rgba(99,102,241,0.15); color: #c7d2fe; border-color: rgba(99,102,241,0.35); }

.pill-loaded       { background: rgba(59,130,246,0.15); color: #bfdbfe; border-color: rgba(59,130,246,0.35); }
.pill-departed     { background: rgba(96,165,250,0.15); color: #bfdbfe; border-color: rgba(96,165,250,0.35); }
.pill-enroute      { background: rgba(14,165,233,0.15); color: #93c5fd; border-color: rgba(14,165,233,0.35); }
.pill-stopped      { background: rgba(148,163,184,0.15); color: #cbd5e1; border-color: rgba(148,163,184,0.35); }
.pill-delayed      { background: rgba(245,158,11,0.15); color: #fbbf24; border-color: rgba(245,158,11,0.35); }
.pill-arrived      { background: rgba(34,197,94,0.15); color: #86efac; border-color: rgba(34,197,94,0.35); }
.pill-delivered    { background: rgba(16,185,129,0.15); color: #a7f3d0; border-color: rgba(16,185,129,0.35); }
.pill-other        { background: rgba(148,163,184,0.12); color: #e5e7eb; border-color: rgba(148,163,184,0.35); }

.pill-vip_met      { background: rgba(6,182,212,0.15);  color: #99f6e4; border-color: rgba(6,182,212,0.35); }
.pill-secured      { background: rgba(16,185,129,0.15); color: #a7f3d0; border-color: rgba(16,185,129,0.35); }

@media (prefers-reduced-motion: reduce) {
  .ingest-row { transition: none !important; }
}

#ingest-viewport{
  overflow: clip;
  overflow: hidden;

  border-radius: 0.375rem;

  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);

  contain: paint;
  isolation: isolate;

  transform: translateZ(0);
  will-change: transform;
}

#ingest-rows{
  transform: translateZ(0);
}

.pricing-sash {
  --ps-angle: 45deg;
  --ps-thickness: 10px;
  --ps-offset: 48px;
  --ps-a: #4f46e5;
  --ps-b: #eab308;

  background-image:
    linear-gradient(
      var(--ps-angle),
      transparent 0,
      transparent calc(var(--ps-offset) - (var(--ps-thickness) / 2)),
      var(--ps-a)   calc(var(--ps-offset) - (var(--ps-thickness) / 2)),
      var(--ps-b)   calc(var(--ps-offset) + (var(--ps-thickness) / 2)),
      transparent   calc(var(--ps-offset) + (var(--ps-thickness) / 2)),
      transparent 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: inherit;
}

.pricing-sash:hover {
  --ps-offset: 56px;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-sash:hover { --ps-offset: 48px; }
}

.ps-indigo-yellow   { --ps-a: #4f46e5; --ps-b: #eab308; }
.ps-emerald-magenta { --ps-a: #059669; --ps-b: #db2777; }
.ps-sky-rose        { --ps-a: #0284c7; --ps-b: #f43f5e; }

.ps-thin  { --ps-thickness: 6px; }
.ps-thick { --ps-thickness: 14px; }

@keyframes caret-blink { 0%,49% {opacity:1} 50%,100% {opacity:0} }
.typed-caret::after {
  content: "";
  display: inline-block;
  width: 0.6ch;
  border-right: 2px solid currentColor;
  margin-left: 2px;
  animation: caret-blink 1s step-end infinite;
  transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
  .typed-caret::after { animation: none; }
}

#cli-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.25rem; 
}

.mac-btn{
  width:12px; height:12px; border-radius:9999px; position:relative; line-height:0;
  display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 2px 1px rgba(255,255,255,.25);
  margin-right: 5px;
}
.mac-close   { background:#ff5f57; }
.mac-minimize{ background:#ffbd2e; }
.mac-zoom    { background:#28c840; }

.mac-glyph{ width:8px; height:8px; display:block; opacity:0; transition:opacity .12s ease-in-out; }
.mac-btn:hover .mac-glyph{ opacity:.9; }

.mac-glyph line{
  stroke: rgba(0,0,0,.60);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (prefers-reduced-motion: reduce){
  .mac-glyph{ transition:none; }
}

/* --- Section captions (title + description) --- */
.section-cap{
  --cap-bg: rgba(2, 6, 23, 0.55);
  --cap-br: rgba(203, 213, 225, 0.42);
  --cap-tx: #e5e7eb; 
  --cap-ac: #60a5fa;
  background: linear-gradient(180deg, rgba(2,6,23,.6), rgba(2,6,23,.35));
  color: var(--cap-tx);
  border: 1px solid var(--cap-br);
  border-radius: .875rem;
  padding: .75rem 1rem .8rem 1rem;
  box-shadow: 0 10px 28px rgba(2,6,23,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.section-cap__title{
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 .25rem 0;
}

.section-cap__desc{
  font-size: .95rem;
  line-height: 1.25rem;
  color: #cbd5e1; /* slate-300 */
  margin: 0;
}

/* Subtle accent bar under the title */
.section-cap__title{
  position: relative;
  padding-bottom: 2px;
}
.section-cap__title::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100px; height: 2px;
  background: linear-gradient(90deg, #ffffff, var(--cap-ac), #ffffff);
  opacity: .65;
  border-radius: 2px;
}

/* Reveal effect */
.fx-section{
  opacity: 0;
  transform: translateY(8px) scale(.985);
  filter: blur(4px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.fx-section.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  .fx-section{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* Base section themes (no JS)
   Usage: wrap a section with .sec and a theme (.sec-blue | .sec-emerald | .sec-violet)
   and add .sec-card to the card container.
*/
.sec { --tint: 59,130,246; }              /* default = blue-500 (fallback) */
.sec-blue    { --tint: 59,130,246; }      /* blue-500 */
.sec-emerald { --tint: 16,185,129; }      /* emerald-500 */
.sec-violet  { --tint: 139,92,246; }      /* violet-500 */

.sec .section-cap{
  --cap-ac: rgb(var(--tint));                           /* underline accent */
  --cap-br: rgba(var(--tint), 0.36);                    /* soft tinted border */
  box-shadow:
    0 10px 28px rgba(2,6,23,0.46),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 14px 30px -18px rgba(var(--tint), 0.28);          /* gentle tinted drop */
}
.sec .section-cap__title::after{
  background: linear-gradient(90deg, #fff, rgb(var(--tint)), #fff);
  opacity: 0.62;
}

.sec .sec-card{
  position: relative;
  border: 1px solid rgba(var(--tint), 0.16);
  box-shadow:
    0 10px 28px rgba(2,6,23,0.45),
    0 20px 44px -22px rgba(var(--tint), 0.32);
  background-image:
    linear-gradient(180deg, rgba(var(--tint), 0.06), transparent 42%);
  background-blend-mode: screen;
}

.sec-emerald #ingest-viewport{ border-color: rgba(var(--tint), 0.28) !important; }
.sec-blue    #ingest-viewport{ border-color: rgba(var(--tint), 0.24) !important; }
.sec-violet  #ingest-viewport{ border-color: rgba(var(--tint), 0.24) !important; }

#ops-flow.sec-blue .sec-card{
  box-shadow:
    /* ambient depth */
    0 14px 36px rgba(2, 6, 23, 0.55),
    /* primary blue glow (slightly stronger + wider) */
    0 34px 72px -20px rgba(59, 130, 246, 0.54),
    /* mid-range lift to make the color read */
    0 8px 26px -14px rgba(59, 130, 246, 0.38);
}

#ops-flow.sec-blue .section-cap{
  box-shadow:
    0 12px 30px rgba(2, 6, 23, 0.50),
    0 20px 44px -18px rgba(59, 130, 246, 0.42);
}

#ops-ingest.sec-emerald .sec-card{
  box-shadow:
    /* ambient depth */
    0 14px 36px rgba(2, 6, 23, 0.55),
    /* primary emerald glow (slightly stronger + wider) */
    0 34px 72px -20px rgba(16, 185, 129, 0.52),
    /* mid-range lift to make the color read */
    0 8px 26px -14px rgba(16, 185, 129, 0.36);
}

.sec.sec-violet .sec-card{
  box-shadow:
    /* ambient depth */
    0 14px 36px rgba(2, 6, 23, 0.55),
    /* primary violet glow (slightly stronger + wider) */
    0 34px 72px -20px rgba(139, 92, 246, 0.54),
    /* mid-range lift to make the color read */
    0 8px 26px -14px rgba(139, 92, 246, 0.38);
}

.sec.sec-violet .section-cap{
  box-shadow:
    0 12px 30px rgba(2, 6, 23, 0.50),
    0 20px 44px -18px rgba(139, 92, 246, 0.42);
}

.sec.sec-violet { 
  /* switch from violet-500 (139,92,246) to a lighter violet-400 */
  --tint: 167, 139, 250;
}

/* Caption: a hair brighter border/underline */
.sec.sec-violet .section-cap{
  --cap-br: rgba(167,139,250,0.48);   /* was ~0.36 */
}
.sec.sec-violet .section-cap__title::after{
  opacity: 0.72;                      /* was ~0.62 */
}

.sec.sec-violet .sec-card{
  border-color: rgba(167,139,250,0.26);  /* subtle ring bump */
  background-image:
    linear-gradient(180deg, rgba(167,139,250,0.12), transparent 50%),
    linear-gradient(0deg,   rgba(167,139,250,0.06), rgba(167,139,250,0) 70%);
  background-blend-mode: screen;
}

.feature-section .feature-card {
  position: relative;
  border: 1px solid transparent;
  /* Gradient border trick: two backgrounds, one clipped to padding (body), one to border (accent) */
  background:
    linear-gradient(#1f2937, #1f2937) padding-box,
    linear-gradient(140deg,
      rgba(var(--accent-rgb), .55),
      rgba(255,255,255, .08)) border-box;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(0,0,0,0.30);
}
.feature-section .feature-card:hover,
.feature-section .feature-card.reveal,
.feature-section .feature-card:focus-within {
  background:
    linear-gradient(#1f2937, #1f2937) padding-box,
    linear-gradient(140deg,
      rgba(var(--accent-rgb), .9),
      rgba(255,255,255, .18)) border-box;
  transform: translateY(-2px) scale(1.015);
}

/* Crosshair glow only inside feature sections */
.feature-section .feature-card .crosshair {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .45));
  transition: filter .25s ease;
}
.feature-section .feature-card:hover .crosshair,
.feature-section .feature-card.reveal .crosshair {
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .65));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .feature-section .tp-header a::after { transition: none; }
  .feature-section .feature-card { transition: none; }
}

.feature-card.is-recommended{
  /* tiny tilt, gentle lift (composes with existing transitions) */
  transform: perspective(700px) rotateX(1.4deg) translateY(0) scale(1);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb,59,130,246), 0.28) inset,
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 26px rgba(0,0,0,0.42),
    0 18px 52px -22px rgba(var(--accent-rgb,59,130,246), 0.42);
}

/* Ambient halo (low frequency pulse) */
.feature-card.is-recommended::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(120% 90% at 50% -10%,
      rgba(var(--accent-rgb,59,130,246), .20), transparent 60%),
    radial-gradient(90% 80% at 50% 110%,
      rgba(var(--accent-rgb,59,130,246), .12), transparent 60%);
  opacity:.55;
  filter:saturate(1);
  animation: recoGlow 12s ease-in-out infinite;
}

/* Crisper glow + snap flat on hover/focus */
.feature-card.is-recommended:hover,
.feature-card.is-recommended:focus-within{
  transform: translateY(-2px) scale(1.02) rotateX(0deg);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb,59,130,246), 0.40) inset,
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 14px 34px rgba(0,0,0,0.48),
    0 28px 64px -24px rgba(var(--accent-rgb,59,130,246), 0.56);
}
.feature-card.is-recommended:hover::before,
.feature-card.is-recommended:focus-within::before{
  animation-play-state: paused;
  opacity:.95;
  filter:saturate(1.25);
}

/* “Recommended” pill badge */
.reco-badge{
  position:absolute;
  z-index:1;
  padding:4px 10px;
  font-size:.70rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:#e5e7eb;
  background:
    linear-gradient(90deg,
      rgba(var(--accent-rgb,59,130,246), .35),
      rgba(var(--accent-rgb,59,130,246), .65));
  border:1px solid rgba(var(--accent-rgb,59,130,246), .45);
  border-radius:9999px;
  box-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 0 18px rgba(var(--accent-rgb,59,130,246), .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.feature-card.is-recommended:hover .reco-badge,
.feature-card.is-recommended:focus-within .reco-badge{
  border-color: rgba(var(--accent-rgb,59,130,246), .65);
  box-shadow:
    0 3px 12px rgba(0,0,0,.42),
    0 0 22px rgba(var(--accent-rgb,59,130,246), .35);
}

/* Pulse loop */
@keyframes recoGlow{
  0%,100% { opacity:.50; filter:saturate(1); transform: scale(1); }
  50%     { opacity:.82; filter:saturate(1.18); transform: scale(1.015); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .feature-card.is-recommended{ transform: none; }
  .feature-card.is-recommended::before{ animation:none !important; opacity:.45; }
}


.wm-feature{
  --wm-accent: #eab308;
  --wm-accent-rgb: 234,179,8;

  --wm-glow-ambient: 0.50;
  --wm-glow-accent: 0.35;
  --wm-hover-glow-ambient: 0.55;
  --wm-hover-glow-accent: 0.45;

  --wm-top-radial-alpha: 0.14;
  --wm-top-radial-height: 220px;
  --wm-grid-alpha: 0.045;
  --wm-wash-alpha: 0.06;
}

.wm-feature .screenshot-container {
  border: 1px solid transparent;
  isolation: isolate;
  background:
    /* body */
    linear-gradient(#1f2937, #1f2937) padding-box,
    /* gradient border */
    linear-gradient(140deg,
      rgba(var(--wm-accent-rgb), .55),
      rgba(255,255,255, .08)) border-box;
  box-shadow:
    0 0 24px rgba(2,6,23, calc(var(--wm-glow-ambient) * .15)),
    0 0 44px 12px rgba(var(--wm-accent-rgb), calc(var(--wm-glow-accent) * .17));
}

.wm-feature .screenshot-container::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px var(--wm-top-radial-height) at 50% 0%,
      rgba(var(--wm-accent-rgb), var(--wm-top-radial-alpha)), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255, var(--wm-grid-alpha)),
      rgba(255,255,255, var(--wm-grid-alpha)) 1px,
      transparent 1px,
      transparent 26px
    ),
    linear-gradient(180deg,
      rgba(var(--wm-accent-rgb), var(--wm-wash-alpha)),
      transparent 40%);
}


.shimmer-text{
  /* tweak per element: --shimmer-speed */
  --shimmer-speed: 3.5s;

  display: inline-block;
  background-image: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 22%,
    rgba(255,255,255,0.95) 50%,
    currentColor 78%,
    currentColor 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: h2-shimmer var(--shimmer-speed) linear infinite;
  will-change: background-position;
}

@media (prefers-reduced-motion: reduce){
  .shimmer-text{
    animation: none !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: currentColor !important;
  }
}
@media (forced-colors: active){
  .shimmer-text{
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: currentColor;
  }
}

/* Reusable feature page H1 with accent underline (uses --section-accent vars) */
.feature-h1{
  --h1-accent: var(--section-accent, #eab308);
  --h1-accent-rgb: var(--section-accent-rgb, 234,179,8);
  position: relative;
  color: #f1f5f9;             /* slate-100 */
  letter-spacing: .2px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(var(--h1-accent-rgb), .22); /* soft tinted glow */
}
.feature-h1::after{
  content:"";
  display:block;
  height:3px;
  width:min(220px, 48%);
  margin: 10px auto 0;        /* centers by default */
  border-radius: 9999px;
  background: linear-gradient(90deg, #fff, var(--h1-accent), #fff);
  opacity:.75;
}
.feature-h1[data-align="left"]::after{ margin-left:0; margin-right:0; } /* optional */

/* gentle hover brighten (no motion preference respected) */
@media (hover:hover){
  .feature-h1::after{ transition: opacity .25s ease, transform .28s ease; }
  .feature-h1:hover::after{ opacity:.95; transform: scaleX(1.02); }
}
@media (prefers-reduced-motion: reduce){
  .feature-h1::after{ transition:none; }
}

/* Signup header sash drift: subtle animated accent under h2/h3 */
.signup-bg h2,
.signup-bg h3 {
  position: relative;
  padding-bottom: 6px;
}

.signup-bg h2::after,
.signup-bg h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  /* metallic silver sweep */
  background: linear-gradient(
    90deg,
    #9ea3a8 0%,   /* dark silver */
    #c0c5ca 25%,  /* mid silver */
    #eef1f4 50%,  /* highlight */
    #c0c5ca 75%,  /* mid silver */
    #9ea3a8 100%  /* dark silver */
  );
  background-size: 200% 100%;
  opacity: 0.6;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform .28s ease, opacity .28s ease;
  animation: signup-sash-pan 16s linear infinite;
}

.signup-bg h2:hover::after,
.signup-bg h3:hover::after {
  transform: scaleX(1);
  opacity: 0.9;
}

@keyframes signup-sash-pan {
  from { background-position:   0% 0; }
  to   { background-position: 200% 0; }
}

/* Reduced motion: static sash */
@media (prefers-reduced-motion: reduce) {
  .signup-bg h2::after,
  .signup-bg h3::after {
    animation: none;
  }
}

/* Signup sections */
.signup-section{
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.20);         /* soft slate border */
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  padding: 10px 10px 18px;
  margin: 10px 0;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.signup-section .section-title{
  margin-top: 0;              /* we’ll handle spacing on the wrapper */
  margin-bottom: 10px;
}

.signup-section:focus-within{
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.22),
    0 6px 18px rgba(99,102,241,0.12);               /* gentle brand glow */
  border-color: rgba(206,213,219,0.80);             /* silverish edge */
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}

/* Optional: brighten the heading on focus */
.signup-section:focus-within .section-title{
  color: #f3f4f6; /* near-white */
}

/* Respect reduced motion — keep the visual cues, skip movement */
@media (prefers-reduced-motion: reduce){
  .signup-section{ transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
  .signup-section:focus-within{ transform: none; }
}

/* About page — Aurora wash (bold) */
.about-aurora {
  position: relative;
  overflow: hidden;
}
.about-aurora > * { position: relative; z-index: 1; }

.about-aurora::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  pointer-events: none;

  /* Stronger + brighter */
  opacity: 1;
  filter: blur(36px) saturate(140%);
  background:
    radial-gradient(60% 80% at 15% 25%, rgba(99,102,241,0.55) 0%, rgba(99,102,241,0.00) 60%),
    radial-gradient(55% 65% at 85% 15%, rgba(34,211,238,0.50) 0%, rgba(34,211,238,0.00) 60%),
    radial-gradient(65% 55% at 60% 85%, rgba(167,139,250,0.48) 0%, rgba(167,139,250,0.00) 60%),
    radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,0.08), rgba(255,255,255,0));
  animation: aboutAuroraDrift 26s ease-in-out infinite;
  will-change: transform, filter;
}

@supports (mix-blend-mode: screen) {
  .about-aurora::before { mix-blend-mode: screen; }
}

@keyframes aboutAuroraDrift {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  40%  { transform: translateY(-4%) rotate(8deg) scale(1.06); }
  70%  { transform: translateY(3%) rotate(-6deg) scale(1.03); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .about-aurora::before { animation: none; }
}

/* Generic reveal-up utility */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms ease,
    transform 500ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Gradient title with safe fallback */
.gradient-title {
  /* Fallback: solid text color (works everywhere) */
  color: #e5e7eb; /* slate-200 */

  /* Customizable stops */
  --grad-from: #e5e7eb; /* silverish */
  --grad-mid:  #818cf8; /* indigo-400 */
  --grad-to:   #22d3ee; /* cyan-400 */

  background-image: linear-gradient(90deg, var(--grad-from), var(--grad-mid), var(--grad-to));
}

/* Only switch to clipped gradient text when supported */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-title {
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; /* Safari crispness */
  }
}

/* High-contrast / forced-colors: keep readable solid text */
@media (forced-colors: active) {
  .gradient-title {
    background: none !important;
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
    color: CanvasText !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* Value cards */
.value-card {
  /* base knobs (overridden per-variant below) */
  --bg-from: rgba(148,163,184,0.10);       /* default slate → silver */
  --bg-to:   rgba(226,232,240,0.06);
  --bg-from-strong: rgba(148,163,184,0.16);
  --bg-to-strong:   rgba(226,232,240,0.12);

  --border-from: rgba(148,163,184,0.28);
  --border-to:   rgba(226,232,240,0.22);
  --border-from-strong: rgba(148,163,184,0.40);
  --border-to-strong:   rgba(226,232,240,0.34);

  position: relative;
  overflow: hidden; /* keep rounded corners crisp */
  border-radius: 1rem; /* match rounded-2xl */
  background: linear-gradient(145deg, var(--bg-from), var(--bg-to));
  box-shadow:
    0 8px 24px rgba(0,0,0,0.28),
    0 0 0 1px rgba(148,163,184,0.10);
  transition: background 220ms ease, box-shadow 220ms ease;
}

/* Gradient border (masked to 1px ring) */
.value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--border-from), var(--border-to));
  /* mask out the middle so only the ring shows */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}

/* Hover/focus: deepen gradient + shadow */
.value-card:hover,
.value-card:focus-within {
  background: linear-gradient(145deg, var(--bg-from-strong), var(--bg-to-strong));
  box-shadow:
    0 12px 28px rgba(0,0,0,0.34),
    0 0 0 1px rgba(148,163,184,0.14),
    0 0 40px rgba(99,102,241,0.08);
}
.value-card:hover::before,
.value-card:focus-within::before {
  background: linear-gradient(135deg, var(--border-from-strong), var(--border-to-strong));
}

/* About us per-card brand variants */
/* 1) Keep it simple — slate -> silver */
.vc-simple {
  --bg-from: rgba(148,163,184,0.10); /* slate-400 */
  --bg-to:   rgba(226,232,240,0.06); /* slate-200 */
  --bg-from-strong: rgba(148,163,184,0.18);
  --bg-to-strong:   rgba(226,232,240,0.12);
  --border-from: rgba(203,213,225,0.28);
  --border-to:   rgba(226,232,240,0.22);
  --border-from-strong: rgba(203,213,225,0.40);
  --border-to-strong:   rgba(226,232,240,0.34);
}

/* 2) Iterate quickly — indigo -> violet */
.vc-iterate {
  --bg-from: rgba(99,102,241,0.14);   /* indigo-500 */
  --bg-to:   rgba(167,139,250,0.10);  /* violet-400 */
  --bg-from-strong: rgba(99,102,241,0.22);
  --bg-to-strong:   rgba(167,139,250,0.16);
  --border-from: rgba(99,102,241,0.35);
  --border-to:   rgba(167,139,250,0.30);
  --border-from-strong: rgba(99,102,241,0.48);
  --border-to-strong:   rgba(167,139,250,0.42);
}

/* 3) Deliver value — cyan -> teal */
.vc-deliver {
  --bg-from: rgba(34,211,238,0.14);   /* cyan-400 */
  --bg-to:   rgba(45,212,191,0.10);   /* teal-400 */
  --bg-from-strong: rgba(34,211,238,0.22);
  --bg-to-strong:   rgba(45,212,191,0.16);
  --border-from: rgba(34,211,238,0.35);
  --border-to:   rgba(45,212,191,0.30);
  --border-from-strong: rgba(34,211,238,0.48);
  --border-to-strong:   rgba(45,212,191,0.42);
}

.value-card {
  /* knobs */
  --corner-size: 12px;                 /* 10–16px looks good */
  --corner-hardness: 60%;              /* where color fades to transparent */

  /* fallbacks; per-variant overrides below */
  --accent-1: rgba(203,213,225,0.55);  /* light slate */
  --accent-2: rgba(226,232,240,0.50);  /* silver */
  position: relative;                  /* already set in safe to repeat */
  overflow: hidden;                    /* keep corners crisp with rounding */
}

/* keep content above accents & borders */
.value-card > * { position: relative; z-index: 1; }

/* Four tiny gradient “beams” at the corners */
.value-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  /* four layers: TL, TR, BL, BR */
  background:
    radial-gradient(circle at left  top,    var(--accent-1), transparent var(--corner-hardness)),
    radial-gradient(circle at right top,    var(--accent-2), transparent var(--corner-hardness)),
    radial-gradient(circle at left  bottom, var(--accent-2), transparent var(--corner-hardness)),
    radial-gradient(circle at right bottom, var(--accent-1), transparent var(--corner-hardness));

  background-size: var(--corner-size) var(--corner-size);
  background-repeat: no-repeat;
  opacity: 0.85;
  filter: saturate(120%);
  transition: opacity 200ms ease, filter 200ms ease, background-size 220ms ease;
}

/* Hover/focus: slightly brighter and larger accents */
.value-card:hover::after,
.value-card:focus-within::after {
  opacity: 1;
  filter: saturate(150%) brightness(1.08);
  background-size: calc(var(--corner-size) * 1.35) calc(var(--corner-size) * 1.35);
}

/* Per-card accent palettes */
/* 1) Keep it simple — neutral slate/silver */
.vc-simple {
  --accent-1: rgba(203,213,225,0.55);  /* slate-300 */
  --accent-2: rgba(226,232,240,0.50);  /* slate-200 */
}

/* 2) Iterate quickly — indigo -> violet */
.vc-iterate {
  --accent-1: rgba(99,102,241,0.70);   /* indigo-500 */
  --accent-2: rgba(167,139,250,0.65);  /* violet-400 */
}

/* 3) Deliver value — cyan -> teal */
.vc-deliver {
  --accent-1: rgba(34,211,238,0.75);   /* cyan-400 */
  --accent-2: rgba(20,184,166,0.70);   /* teal-400 */
}

/* Reduced motion: keep visuals, drop transitions */
@media (prefers-reduced-motion: reduce) {
  .value-card,
  .value-card::after { transition: none !important; }
}

.h3-accent {
  /* knobs */
  --acc-h: 2px;                 /* thickness of the bar */
  --acc-radius: 9999px;         /* pill radius */
  /* safe defaults; overridden by card variants below */
  --acc-from: #cbd5e1;          /* slate-300 */
  --acc-mid:  #a5b4fc;          /* indigo-300/violet-300 */
  --acc-to:   #7dd3fc;          /* cyan-300 */

  position: relative;
  display: inline-block;        /* keep bar tight to text width */
  padding-bottom: 0.25rem;      /* spacing above bar */
}

.h3-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;             /* adjust to taste */
  height: var(--acc-h);
  width: 100%;
  background: linear-gradient(90deg, var(--acc-from), var(--acc-mid), var(--acc-to));
  border-radius: var(--acc-radius);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.95;
  transition: transform 450ms ease, opacity 450ms ease;
}

/* Trigger on hover or keyboard focus */
.h3-accent:hover::after,
.h3-accent:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Also trigger when the whole card is hovered (nice, no extra JS) */
.value-card:hover .h3-accent::after,
.value-card:focus-within .h3-accent::after {
  transform: scaleX(1);
  opacity: 1;
}

/* If (scroll reveal), auto-draw once visible */
[data-reveal].is-visible.h3-accent::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Per-card palettes (match  variants) */
.vc-simple .h3-accent {
  --acc-from: #cbd5e1; /* slate-300 */
  --acc-mid:  #e2e8f0; /* slate-200 */
  --acc-to:   #f1f5f9; /* slate-100 */
}
.vc-iterate .h3-accent {
  --acc-from: #818cf8; /* indigo-400 */
  --acc-mid:  #a78bfa; /* violet-400 */
  --acc-to:   #c4b5fd; /* violet-300 */
}
.vc-deliver .h3-accent {
  --acc-from: #22d3ee; /* cyan-400 */
  --acc-mid:  #2dd4bf; /* teal-400 */
  --acc-to:   #99f6e4; /* cyan-200 */
}

/* Accessibility: reduce motion -> show the bar without animation */
@media (prefers-reduced-motion: reduce) {
  .h3-accent::after {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Icon badge + halo */
.value-card { position: relative; }

/* shared badge styling */
.icon-badge {
  --badge-size: 36px;                 /* 32–40px works well */
  --halo-1: rgba(148,163,184,0.22);   /* fallback halo color */
  --halo-2: rgba(226,232,240,0.14);

  position: absolute;
  top: 0.75rem;                       /* align inside p-6 padding nicely */
  left: 0.75rem;
  width: var(--badge-size);
  height: var(--badge-size);
  display: grid;
  place-items: center;
  border-radius: 9999px;
  color: white;                       /* icon color */
  z-index: 2;                         /* above card content, below menus etc. */
  pointer-events: none;               /* never block clicks */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 8px 18px var(--halo-1),
    0 18px 36px var(--halo-2);
  transition: filter 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

/* soft outer halo */
.icon-badge::after {
  content: "";
  position: absolute;
  inset: -10px;                       /* extend glow beyond the badge */
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 45%, var(--halo-1), transparent 70%);
  filter: blur(10px);
  opacity: 0.9;
  z-index: -1;
}

/* brighten on card hover/focus (no motion otherwise) */
.value-card:hover .icon-badge,
.value-card:focus-within .icon-badge {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 10px 22px var(--halo-1),
    0 22px 48px var(--halo-2);
  filter: saturate(120%) brightness(1.05);
}

/* Per-card palettes */
/* 1) Keep it simple — neutral slate/silver */
.vc-simple .icon-badge {
  background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
  --halo-1: rgba(203,213,225,0.25);
  --halo-2: rgba(226,232,240,0.18);
}

/* 2) Iterate quickly — indigo -> violet */
.vc-iterate .icon-badge {
  background: linear-gradient(135deg, #6366f1, #a78bfa);
  --halo-1: rgba(99,102,241,0.30);
  --halo-2: rgba(167,139,250,0.22);
}

/* 3) Deliver value — cyan -> teal */
.vc-deliver .icon-badge {
  background: linear-gradient(135deg, #22d3ee, #14b8a6);
  --halo-1: rgba(34,211,238,0.30);
  --halo-2: rgba(20,184,166,0.22);
}

/* Accessibility: no animation to reduce; transitions are fine */
@media (prefers-reduced-motion: reduce) {
  .icon-badge { transition: none !important; }
}

/* Dot grid on value cards */
.value-card {
  --dg-size: 14px;                         /* grid spacing: 10–16px looks great */
  --dg-dot: rgba(203,213,225,0.14);        /* neutral dot color (default) */
  --dg-dot-strong: rgba(226,232,240,0.18); /* on hover/focus */
  transition: background-image 220ms ease, box-shadow 220ms ease;
  background-image:
    radial-gradient(circle at 1px 1px, var(--dg-dot) 1.1px, transparent 1.2px),
    linear-gradient(145deg, var(--bg-from), var(--bg-to));
  background-size: var(--dg-size) var(--dg-size), 100% 100%;
  background-position: 0 0, 0 0;
}

.value-card:hover,
.value-card:focus-within {
  background-image:
    radial-gradient(circle at 1px 1px, var(--dg-dot-strong) 1.1px, transparent 1.2px),
    linear-gradient(145deg, var(--bg-from-strong), var(--bg-to-strong));
}

/* Per-card tints to match your variants */
.vc-simple {
  --dg-dot: rgba(203,213,225,0.14);        /* slate-300 */
  --dg-dot-strong: rgba(226,232,240,0.18); /* slate-200 */
}
.vc-iterate {
  --dg-dot: rgba(129,140,248,0.16);        /* indigo-400 */
  --dg-dot-strong: rgba(167,139,250,0.20); /* violet-400 */
}
.vc-deliver {
  --dg-dot: rgba(34,211,238,0.16);         /* cyan-400 */
  --dg-dot-strong: rgba(20,184,166,0.20);  /* teal-400 */
}

.horizon-band {
  position: relative;
  overflow: hidden;     /* keep rounded corners crisp if you add them */
  isolation: isolate;   /* ensure z-index layers are local */
}

/* keep section content above the band */
.horizon-band > * { position: relative; z-index: 1; }

.horizon-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140%;             /* a bit wider than the section for soft edges */
  height: 240px;           /* band thickness (200–320px works well) */
  z-index: 0;
  pointer-events: none;

  /* brand-tinted gradient across the horizon */
  background: linear-gradient(90deg,
    rgba(99,102,241,0.18),   /* indigo-500 */
    rgba(167,139,250,0.14),  /* violet-400 */
    rgba(34,211,238,0.18)    /* cyan-400 */
  );

  filter: blur(24px) saturate(120%);  /* soft, premium edges */
  opacity: 0.9;

  /* ultra-slow drift (optional) */
  background-size: 200% 100%;
  animation: horizonDrift 60s linear infinite;
}

@keyframes horizonDrift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .horizon-band::before { animation: none; }
}

.la-progress {
  --la-height: 2px;                         /* thickness */
  --la-radius: 9999px;                      /* pill */
  --la-track: rgba(148,163,184,0.20);       /* slate-400 @20% */
  --la-from: #6366f1;  /* indigo-500 */
  --la-mid:  #a78bfa;  /* violet-400 */
  --la-to:   #22d3ee;  /* cyan-400 */

  position: relative;
  height: var(--la-height);
  width: 100%;
  border-radius: var(--la-radius);
  background: var(--la-track);
  overflow: hidden;
}

/* Gradient fill that scales from left to right */
.la-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--la-from), var(--la-mid), var(--la-to));
  transform-origin: left center;
  transform: scaleX(var(--la, 0));          /* 0 → 1 */
  transition: transform 160ms ease;         /* snappy but subtle */
}

/* Reduced motion: show full bar, no animation */
@media (prefers-reduced-motion: reduce) {
  .la-progress::before { transition: none; transform: none; }
}

:root{
  --center-max: 720px;       /* your centered column max width */
  --chat-gap: 12px;          /* gap inside the column’s right edge */
  --chat-bottom: 24px;       /* distance from viewport bottom */
  --chat-size: 56px;         /* bubble diameter */
  --panel-w: min(24rem, 92vw);
}

/* Anchor to the column’s bottom-right by computing an explicit LEFT */
.schild-anchor{
  /* left edge of column + column width - own width - gap */
  left: calc(
    (100vw - min(var(--center-max), 100vw)) / 2
    + min(var(--center-max), 100vw)
    - var(--chat-size)
    - var(--chat-gap)
  );
}

/* Bubble */
.schild-chat-bubble{
  position: fixed;
  bottom: var(--chat-bottom);
  right: auto;               
  width: var(--chat-size); height: var(--chat-size);
  border-radius: 9999px;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 30%, #818cf8 0%, #4f46e5 60%, #312e81 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 30px rgba(79,70,229,.35);
  z-index: 1000;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.schild-chat-bubble:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(79,70,229,.45); }

/* Panel shares the SAME anchor math */
.schild-chat-panel{
  position: fixed;
  bottom: calc(var(--chat-bottom) + var(--chat-size) + 12px);
  width: var(--panel-w);
  max-height: min(80vh, 680px);
  overflow: hidden;
  z-index: 1000;
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 0.75rem;
  box-shadow: 0 22px 60px rgba(2,6,23,.35);

  /* recompute LEFT for the panel’s own width */
  left: calc(
    (100vw - min(var(--center-max), 100vw)) / 2
    + min(var(--center-max), 100vw)
    - var(--panel-w)
    - var(--chat-gap)
  );
}

/* Mobile: column becomes 100vw, math auto-collapses; keep a small gap */
@media (max-width: 768px){
  :root{ --chat-gap: 10px; --chat-bottom: 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .schild-chat-bubble{ transition: none; } }

/* Chat panel */
:root{
  --panel-w: min(26rem, 92vw);
  --panel-bottom-pad: calc(var(--chat-bottom) + var(--chat-size) + 12px);
  --brand-500: #6366f1; /* indigo-500 */
  --brand-600: #4f46e5;
  --ink: #0f172a;
  --muted: #475569;
  --paper: #ffffff;
  --bubble-user: linear-gradient(135deg, #6366f1, #4338ca);
  --bubble-bot: #ffffff;
  --bubble-bot-border: rgba(2,6,23,.12);
}

.schild-chat-panel{
  position: fixed;
  bottom: var(--panel-bottom-pad);
  width: var(--panel-w);
  max-height: min(80vh, 680px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 64px rgba(2,6,23,.35);
  z-index: 1100;

  /* nice open/close animation; default closed */
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transform-origin: right bottom;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.schild-chat-panel.is-open{
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .22s ease, transform .22s ease;
}

/* Header */
.schild-chat-head{
  padding: 10px 14px;
  background:
    radial-gradient(140% 120% at 10% 10%, rgba(99,102,241,.18), transparent 60%),
    linear-gradient(180deg, rgba(99,102,241,.06), transparent);
  border-bottom: 1px solid rgba(2,6,23,.07);
  display: flex; align-items: center; justify-content: space-between;
}
.schild-chat-title{ font-weight: 600; letter-spacing:.2px; display: inline-flex; align-items: center; gap: 8px;}
.schild-chat-close{
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px;
}
.schild-chat-close:hover{ color: var(--ink); }

/* Log */
.schild-chat-log{
  background: #f8fafc;
  padding-left: 20px;
  padding-right: 20px;
  overflow-y: auto;
}
.schild-msg{ display: flex; margin: 8px 0; }
.schild-msg-time{ display:none; } /* hook if you want timestamps later */

.schild-msg--bot { justify-content: flex-start; }
.schild-msg--user{ justify-content: flex-end; }

.schild-bubble{
  max-width: 80%;
  padding: 9px 11px;
  border-radius: 12px;
  line-height: 1.3;
  font-size: .95rem;
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.schild-msg--bot  .schild-bubble{
  background: var(--bubble-bot);
  border: 1px solid var(--bubble-bot-border);
  color: #0b1220;
}
.schild-msg--user .schild-bubble{
  color: #fff;
  background: var(--bubble-user);
  border: 1px solid rgba(255,255,255,.12);
}

/* Composer */
.schild-chat-compose{
  border-top: 1px solid rgba(2,6,23,.08);
  background: #fff;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.schild-chat-input{
  resize: none;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  max-height: 120px;
  outline: none;
}
.schild-chat-input:focus{
  border-color: rgba(99,102,241,.45);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.schild-chat-send{
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--brand-600);
  color: #fff; font-weight: 600; cursor: pointer;
}
.schild-chat-send:hover{ filter: brightness(1.05); }

/* Custom thin scrollbar for the log */
.schild-chat-log::-webkit-scrollbar{ height:12px; width:12px; }
.schild-chat-log::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 999px; }
.schild-chat-log{ scrollbar-gutter: stable both-edges; }

/* Mobile tweaks (column becomes 100vw automatically by your anchor math) */
@media (max-width: 768px){
  :root{ --panel-w: min(24rem, 96vw); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .schild-chat-panel{ transition: none; }
}

/* Header: glass + gradient accent */
.schild-chat-head{
  position: relative;
  padding: 10px 12px 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in oklab, white 82%, transparent);
  border-bottom: 1px solid rgba(2,6,23,.07);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.schild-chat-head::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, #a5b4fc 0%, #6366f1 45%, #4f46e5 65%, #93c5fd 100%);
  opacity:.55;
  pointer-events:none;
}

/* Brand cluster */
.schild-chat-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.schild-chat-mark{
  display: inline-flex;               /* was inline/inline-block elsewhere */
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;          /* or whatever your badge size is */
  line-height: 0;                     /* kill baseline influence from fonts */
  padding: 0;                         /* avoid implicit padding affecting centering */
}
.schild-chat-mark svg{
  display: block;                     /* remove inline svg baseline gap */
  width: 24px; height: 24px;          /* fixed inner icon size */
  margin: 0;
}
.schild-chat-meta{ min-width:0; }
.schild-chat-title{
  font-weight: 700; letter-spacing:.2px; line-height:1.1;
  color:#0b1220; font-size: .98rem;
  display:flex; align-items:center; gap:8px;
}
.schild-chat-sub{
  font-size:.77rem; color:#64748b; line-height:1.15; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Online dot */
.schild-chat-status{
  position: relative; display:inline-block;
  width:9px; height:9px; border-radius:999px; background:#22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference){
  .schild-chat-status{ animation: schildPulse 1.8s ease-in-out infinite; }
  @keyframes schildPulse{
    0%,100%{ box-shadow:0 0 0 3px rgba(34,197,94,.18); }
    50%    { box-shadow:0 0 0 6px rgba(34,197,94,.10); }
  }
}

/* Close button */
.schild-chat-close{
  border:0; background:transparent; cursor:pointer;
  color:#475569; font-size:22px; line-height:1; padding:4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schild-chat-close:hover{
  color:#0f172a;
  opacity: .5;
}

/* Bot suggestion message */
.schild-chip-msg{
  display:flex;
  justify-content:flex-start;
  margin: 6px 0 10px;
}

.schild-chip-card{
  max-width: 80%;
  background: #fff;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 12px;
  padding: 10px 10px 8px;
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}

.schild-chip-card h4{
  margin: 0 0 6px 2px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #334155; /* slate-700 */
}

.schild-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chip */
.schild-chip{
  appearance: none;
  border: 0;
  cursor: pointer;
  user-select: none;

  padding: 8px 12px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  background: radial-gradient(120% 120% at 30% 30%, #818cf8 0%, #4f46e5 60%, #312e81 100%);
  box-shadow: 0 2px 8px rgba(79,70,229,.35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.schild-chip:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.schild-chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22);
}

/* “Ghost” variant for generic/type-ahead suggestions */
.schild-chip--ghost{
  color: #0f172a;
  background: #fff;
  border: 1px solid rgba(2,6,23,.12);
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
}

@media (max-width: 768px){
  .schild-chat-panel{
    position: fixed;
    left: 12px; right: 12px;
    top: calc(12px + env(safe-area-inset-top));
    bottom: calc(12px + env(safe-area-inset-bottom));
    /* keep your existing width/height/radius styles */
  }
}

@supports (height: 100svh){
  .schild-chat-panel{
    max-height: min(680px, calc(100svh - 24px));
  }
}

.glass-card {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(75, 85, 99, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Subtle gradient text for headings */
.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 8s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Enhanced alert styling */
.enhanced-alert {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.enhanced-alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  transition: left 0.6s ease;
}

.enhanced-alert:hover::before {
  left: 100%;
}

/* Improved mission/values card styling */
.mission-card {
  position: relative;
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.8), rgba(31, 41, 55, 0.6));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(75, 85, 99, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Enhanced announcement cards */
.announcement-card {
  position: relative;
  background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(75, 85, 99, 0.2);
  transition: all 0.3s ease;
}

.announcement-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.announcement-card:hover::before {
  opacity: 1;
}

.announcement-card:hover {
  transform: translateX(4px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Subtle grid background */
.grid-background {
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Enhanced scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.5);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* Fade in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced button hover effects */
.enhanced-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.enhanced-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.enhanced-button:hover::before {
  left: 100%;
}

/* Subtle pulse for important elements */
.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
  }
}

/* Improved typography */
.enhanced-heading {
  position: relative;
}

.enhanced-heading::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width 0.6s ease;
  border-radius: 2px;
}

.enhanced-heading:hover::after,
.enhanced-heading.active::after {
  width: 60%;
}

/* Floating animation for icons */
.floating {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Responsive improvements */
@media (max-width: 768px) {
  .glass-card {
    backdrop-filter: blur(12px);
  }
  
  .mission-card,
  .announcement-card {
    margin-left: 0;
    margin-right: 0;
  }
}

.feature-highlight {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(234, 179, 8, 0.05));
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1rem 0;
    backdrop-filter: blur(10px);
}

.metric-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(234, 179, 8, 0.2);
}

.floating-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #eab308, #f59e0b);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.3); }
    50% { box-shadow: 0 0 30px rgba(234, 179, 8, 0.5); }
}

.pulse-border {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* User graph enhancements */
#user-graph .ug-node circle.core {
    r: 5;
    fill: #e5e7eb;
    stroke: none;
}
#user-graph .ug-node circle.ring {
    r: 14;
    stroke: url(#ugGrad);
    fill: none;
    opacity: .9;
}
#user-graph .ug-node circle.ping {
    r: 0;
    stroke: url(#ugGrad);
    fill: none;
    opacity: 0;
}

.ug-node.active circle.ping {
    animation: ug-ping 1100ms cubic-bezier(.2,.7,.2,1) forwards;
}
.ug-node.active circle.ring {
    animation: ug-pop 380ms cubic-bezier(.2,.7,.2,1);
}

@keyframes ug-ping {
    0%   { r: 0;   opacity: .55; }
    80%  { r: 34;  opacity: .15; }
    100% { r: 40;  opacity: 0; }
}
@keyframes ug-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.feature-tab {
    padding: 0.75rem 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #cbd5e1;
}

.feature-tab.active {
    background: rgba(234, 179, 8, 0.1);
    border-color: #eab308;
    color: #eab308;
}

.feature-tab:hover:not(.active) {
    background: rgba(234, 179, 8, 0.05);
    color: #eab308;
}

/* Only affect badges used over screenshots */
.screenshot-container .floating-badge {
  position: absolute;
  top: .5rem;                   /* was -8px */
  right: .5rem;                 /* was -8px */
  z-index: 5;                   /* above the overlay and image */
  pointer-events: none;         /* never block interactions */
}