/* Final system-level polish. Loaded last to keep project accents and accessibility predictable. */

/* Flow Finder owns the red project accent. Semantic success states remain green. */
.ff-case { --ff: #d33f55; }

.ff-hero {
  background:
    radial-gradient(circle at 78% 20%, rgb(211 63 85 / 13%), transparent 28rem),
    radial-gradient(circle at 96% 76%, rgb(35 184 135 / 8%), transparent 25rem),
    #f7f8fb;
}

.ff-hero::before {
  background-image:
    linear-gradient(rgb(211 63 85 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211 63 85 / 3.5%) 1px, transparent 1px);
}

.ff-story-copy .eyebrow,
.ff-story-copy h2 em,
.ff-stage-index > div b { color: #ff98a8; }
.ff-story-steps p b { color: #ef7184; }
.ff-story-stage {
  background: radial-gradient(circle at 58% 45%, rgb(211 63 85 / 20%), transparent 53%), #151e34;
}
.ff-stage-validation i { background: linear-gradient(90deg, #d8485c, #75d5a8); }
.ff-stage-result > small { color: #b43b4d; }
.ff-stage-result > strong,
.ff-stage-result footer b,
.ff-after-result strong,
.finder-result strong { color: #d33f55; }
.ff-stage-result > div,
.ff-after-search { background: #fff3f5; border-color: #f2cbd1; }
.ff-story-stage[data-phase="0"] .rd-stage-progress i:nth-child(1),
.ff-story-stage[data-phase="1"] .rd-stage-progress i:nth-child(-n+2),
.ff-story-stage[data-phase="2"] .rd-stage-progress i:nth-child(-n+3),
.ff-story-stage[data-phase="3"] .rd-stage-progress i { background: #ef7184; }
.ff-demo-button,
.ff-demo-button:hover,
.ff-demo-button:focus,
.ff-demo-button:active {
  background: linear-gradient(135deg, #bd3046, #e05267);
  box-shadow: 0 14px 28px rgb(211 63 85 / 20%);
}
.finder-card-preview { background: linear-gradient(145deg, #fff1f3, #fffafb); border-color: #f1d8dc; }
.finder-preview-path strong,
.finder-demo-original .finder-scan-input button,
.finder-demo-original .finder-scan-input button:hover { background: #d33f55; }
.finder-demo-original .finder-scan-input input { border-color: #d33f55; }
.finder-demo-original .finder-scan-input input:focus { box-shadow: 0 0 0 4px rgb(211 63 85 / 12%); }
.finder-demo-tip { color: #b43147; background: #fff0f2; }

/* Grid children may otherwise inherit the 700px table min-content width on phones. */
.cb-demo-grid > *,
.cb-demo-data,
.cb-demo-ticket { min-width: 0; }

/* Compact source identifiers are informational, not fake controls. */
.finder-recent-bar code {
  padding: 5px 9px;
  color: #b43147;
  background: #fff0f2;
  border-radius: 999px;
  font: 750 .52rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ff-window-value {
  display: block;
  margin: .55rem 0 .2rem;
  color: var(--ink, #0d1525);
  font-size: clamp(1.65rem, 2.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.045em;
}

/* Interactive targets remain comfortable on touch screens. */
.finder-original-panel > header select,
.finder-demo-tip,
.cards-demo-examples button { min-height: 40px; }
.finder-demo-tip { align-items: center; }
.cards-demo-examples button { display: inline-flex; align-items: center; }
.demo-shifts button { min-height: 34px; }
.demo-nav > a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
}
.site-footer a { display: inline-flex; min-height: 28px; align-items: center; }

@media (max-width: 760px) {
  .finder-original-panel > header select,
  .finder-demo-tip,
  .cards-demo-examples button,
  .demo-shifts button { min-height: 44px; }
  .finder-recent-bar > div { flex-wrap: wrap; }
}

/* Stronger, consistent keyboard affordance across old and new components. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #3569f3) 78%, white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keep the two-part contact headline visually separated at every width. */
.contact-hero-copy-v2 h1 em {
  display: block;
  margin-top: 0.09em;
  line-height: 0.9;
}