/* FlatFilePro Redesign — base styles */


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ffp-bg);
  color: var(--ffp-fg);
  font-family: var(--ffp-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- grid background utility (subtle isometric grid) ---------- */
.ffp-grid-bg {
  background-image:
    linear-gradient(rgba(10,10,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ffp-grid-bg-diag {
  background-image:
    repeating-linear-gradient(45deg, rgba(10,10,10,0.06) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(-45deg, rgba(10,10,10,0.06) 0 1px, transparent 1px 56px);
}
body.ffp-no-grid .ffp-grid-bg,
body.ffp-no-grid .ffp-grid-bg-diag,
body.ffp-no-grid .ffp-dotted-bg { background-image: none !important; }

/* ---------- universal section container ---------- */
.ffp-container { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 720px) { .ffp-container { padding-left: 20px; padding-right: 20px; } }

/* ---------- chip / tag ---------- */
.ffp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ffp-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ffp-black);
  background: var(--ffp-white);
  border: 2px solid var(--ffp-black);
  border-radius: var(--ffp-r-pill);
  padding: 8px 14px;
  white-space: nowrap;
}
.ffp-chip--purple { background: var(--ffp-purple-500); color: #fff; border-color: var(--ffp-purple-500); }
.ffp-chip--ghost { background: transparent; }

/* ---------- pop card ---------- */
.ffp-pop {
  background: var(--ffp-white);
  border: 2.5px solid var(--ffp-black);
  border-radius: var(--ffp-r-lg);
  box-shadow: var(--ffp-shadow-flat);
}
.ffp-pop--lg { box-shadow: var(--ffp-shadow-flat-lg); }

/* ---------- buttons (raw classes, no JS dep) ---------- */
.ffp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ffp-font-body); font-weight: 700;
  border-radius: var(--ffp-r-pill);
  cursor: pointer; border: 0;
  white-space: nowrap;
  transition: transform var(--ffp-dur) var(--ffp-ease-out),
              box-shadow var(--ffp-dur) var(--ffp-ease-out),
              background var(--ffp-dur) var(--ffp-ease-out),
              color var(--ffp-dur) var(--ffp-ease-out);
}
.ffp-btn--sm { padding: 10px 18px; font-size: 14px; }
.ffp-btn--md { padding: 14px 26px; font-size: 15px; }
.ffp-btn--lg { padding: 18px 34px; font-size: 16px; }
.ffp-btn--primary { background: var(--ffp-purple-500); color: #fff; box-shadow: var(--ffp-shadow-pop); }
.ffp-btn--primary:hover { background: var(--ffp-purple-600); transform: translateY(-1px); }
.ffp-btn--secondary { background: transparent; color: var(--ffp-black); border: 2px solid var(--ffp-black); }
.ffp-btn--secondary:hover { background: var(--ffp-black); color: #fff; }
.ffp-btn--flat { background: #fff; color: var(--ffp-black); border: 2px solid var(--ffp-black); box-shadow: var(--ffp-shadow-flat); }
.ffp-btn--flat:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ffp-black); }
.ffp-btn--dark { background: var(--ffp-black); color: #fff; }
.ffp-btn--dark:hover { background: var(--ffp-ink-800); }
.ffp-btn--ghost { background: transparent; color: var(--ffp-fg); }
.ffp-btn--ghost:hover { background: var(--ffp-ink-100); }

/* ---------- focus ring ---------- */
*:focus-visible {
  outline: 2px solid var(--ffp-purple-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- type helpers ---------- */
.ffp-display {
  font-family: var(--ffp-font-display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.ffp-eyebrow {
  font-family: var(--ffp-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ffp-purple-600);
}
.ffp-stroke-text {
  -webkit-text-stroke: 2px var(--ffp-black);
  color: transparent;
}

/* ---------- marquee ---------- */
@keyframes ffp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ffp-marquee {
  display: flex;
  width: max-content;
  animation: ffp-marquee 38s linear infinite;
}
.ffp-marquee--reverse { animation-direction: reverse; }
.ffp-marquee--slow { animation-duration: 55s; }
.ffp-marquee-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ---------- subtle reveal on scroll ---------- */
.ffp-reveal { opacity: 0; transform: translateY(24px); transition: all 600ms var(--ffp-ease-out); }
.ffp-reveal.is-in { opacity: 1; transform: none; }

/* ---------- floating animation ---------- */
@keyframes ffp-float-a { 0%,100% { transform: translateY(0) rotate(-3deg);} 50% { transform: translateY(-12px) rotate(-3deg);} }
@keyframes ffp-float-b { 0%,100% { transform: translateY(0) rotate(4deg);} 50% { transform: translateY(-10px) rotate(4deg);} }
@keyframes ffp-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.06);} }
@keyframes ffp-spin { from {transform:rotate(0)} to {transform:rotate(360deg)} }
@keyframes ffp-blink { 0%,49% { opacity:1 } 50%,100% { opacity: 0.2 } }

/* ---------- sparkle twinkle ---------- */
@keyframes ffp-twinkle {
  0%,100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.7) rotate(180deg); opacity: 0.5; }
}
.ffp-twinkle { animation: ffp-twinkle 4s ease-in-out infinite; }

/* ---------- ticker dot ---------- */
.ffp-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--ffp-danger);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(229,72,77,0.6);
  animation: ffp-pulse-dot 1.6s ease-out infinite;
}
@keyframes ffp-pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(229,72,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}

/* ---------- noisy / dotted ---------- */
.ffp-dotted-bg {
  background-image: radial-gradient(rgba(10,10,10,0.18) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}

/* ---------- divider sticker ---------- */
.ffp-sticker {
  display: inline-block;
  background: var(--ffp-white);
  border: 2px solid var(--ffp-black);
  border-radius: var(--ffp-r-pill);
  padding: 6px 14px;
  font-family: var(--ffp-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--ffp-shadow-flat);
}

/* ---------- range input styling ---------- */
input[type=range].ffp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; background: transparent; cursor: pointer;
}
input[type=range].ffp-range::-webkit-slider-runnable-track {
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ffp-success), var(--ffp-warning), var(--ffp-danger));
  border: 2px solid var(--ffp-black);
}
input[type=range].ffp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 28px; width: 28px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ffp-black);
  margin-top: -10px;
  box-shadow: 3px 3px 0 0 var(--ffp-black);
}
input[type=range].ffp-range::-moz-range-track {
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ffp-success), var(--ffp-warning), var(--ffp-danger));
  border: 2px solid var(--ffp-black);
}
input[type=range].ffp-range::-moz-range-thumb {
  height: 24px; width: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ffp-black);
  box-shadow: 3px 3px 0 0 var(--ffp-black);
}

/* ---------- spreadsheet mock ---------- */
.ffp-cell {
  font-family: var(--ffp-font-mono);
  font-size: 12px;
  padding: 8px 10px;
  border-right: 1px solid var(--ffp-ink-200);
  border-bottom: 1px solid var(--ffp-ink-200);
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ffp-cell--head {
  background: var(--ffp-ink-50);
  color: var(--ffp-fg-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.ffp-cell--rot { color: var(--ffp-danger); text-decoration: line-through; }
.ffp-cell--ok { color: var(--ffp-success); }

/* ---------- print-style "rot" detector tag glow ---------- */
.ffp-rot-glow {
  animation: ffp-rot-flicker 2.2s ease-in-out infinite;
}
@keyframes ffp-rot-flicker {
  0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,0.0); }
  50% { box-shadow: 0 0 0 8px rgba(229,72,77,0.15); }
}

/* ---------- section spacing ---------- */
.ffp-section { padding: 96px 0; position: relative; }
@media (max-width: 720px) { .ffp-section { padding: 64px 0; } }
.ffp-section--tight { padding: 56px 0; }

/* ---------- ascii dividers ---------- */
.ffp-rule {
  height: 2px;
  background: var(--ffp-black);
  width: 100%;
}

/* ---------- inline kbd ---------- */
.ffp-kbd {
  font-family: var(--ffp-font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  background: var(--ffp-ink-100);
  border: 1px solid var(--ffp-ink-300);
  border-radius: 4px;
}

@media (max-width: 860px) {
          .ffp-nav-links { display: none !important; }
        }

@keyframes ffp-scan-sweep {
          from { transform: translateX(-100%); }
          to { transform: translateX(2500%); }
        }

@media (max-width: 980px) {
          .ffp-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }

@media (max-width: 760px) {
          .ffp-rd-bar { grid-template-columns: 1fr !important; }
          .ffp-rd-grid { grid-template-columns: 90px 1fr 80px !important; }
          .ffp-rd-grid > div:nth-child(3),
          .ffp-rd-grid > div:nth-child(4) { display: none !important; }
        }

@media (max-width: 880px) {
          .ffp-feat-row { grid-template-columns: 1fr !important; gap: 32px !important; }
          .ffp-feat-row .ffp-feat-img { grid-column: 1 !important; grid-row: 2 !important; min-height: 320px !important; }
          .ffp-feat-row .ffp-feat-text { grid-column: 1 !important; }
        }

@media (max-width: 860px) {
          .ffp-section .ffp-container > div { gap: 32px !important; }
          .ffp-section .ffp-container { grid-template-columns: 1fr !important; }
        }

@media (max-width: 880px) {
          .ffp-sss-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }

@media (max-width: 880px) {
          .ffp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
        }

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

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

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

@media (max-width: 880px) {
          .ffp-foot-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .ffp-foot-grid { grid-template-columns: 1fr !important; }
        }

/* From the homepage design's own styles */
@keyframes ffpA-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ffpA-marquee { animation: ffpA-marquee 70s linear infinite !important; }
.ffp-marquee-wrap:hover .ffpA-marquee { animation-play-state: paused !important; }
@media (max-width: 980px) { .ffp-how-grid { grid-template-columns: 1fr !important; } }
@media (prefers-reduced-motion: reduce) { .ffpA-marquee, .ffp-twinkle { animation: none !important; } }