/* ForcePhish · Meridian, trimmed to what this page uses.
   Values from the ForcePhish design system (tokens/meridian-tokens.css dark
   theme, tokens/brand.css, components/meridian.css). The page is a single dark
   world, so the dark values are pinned on every theme state the viewer can set. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: dark;
  /* neutral ramp */
  --neutral-800: #262930; --neutral-850: #1A1D22; --neutral-900: #131519;
  --neutral-950: #0B0C0F; --neutral-1000: #07080A;
  /* Meridian dark roles */
  --bg: #0B0C0F; --surface: #131519; --surface-raised: #1A1D22; --surface-sunken: #07080A;
  --surface-hover: #1A1D22; --border: #262930; --border-strong: #646A76;
  --text: #F2F3F5; --text-muted: #B1B6C0; --text-subtle: #8E949F;
  --primary: #7B91FF; --primary-hover: #9BACFF; --primary-press: #C0CBFF; --on-primary: #0B0C0F;
  --focus-ring: #7B91FF; --selection: #1B2566;
  --ok-bg: #0E2419; --ok-border: #1F5A3C; --ok-text: #4FC98A;
  --warn-bg: #2A1E08; --warn-border: #6B4A12; --warn-text: #F0B44C;
  --danger-bg: #2C1210; --danger-border: #6E2A24; --danger-text: #FF7B6E;
  --button-secondary-bg: #1A1D22;
  --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* brand layer */
  --brand-navy-900: #0B1726; --brand-petrol-700: #16455E; --brand-petrol-500: #1F6E8C;
  --brand-cyan-400: #2CC6E4; --brand-cyan-200: #A3E9F5;
  --mk-bg: #0B0C0F; --mk-surface: #131519; --mk-surface-raised: #1A1D22; --mk-border: #262930;
  --mk-text: #F2F3F5; --mk-text-muted: #B1B6C0; --mk-text-subtle: #8E949F;
  --mk-display-xxl: clamp(48px, 7vw, 104px);
  --mk-display-xl: clamp(40px, 5vw, 72px);
  --mk-gutter: clamp(20px, 5vw, 80px);
  /* type */
  --font-sans: "Geist", "IBM Plex Sans Hebrew", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* space, radius, controls, motion */
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --radius-sm: 6px; --radius-md: 10px;
  --control-md: 40px; --control-lg: 48px;
  --duration-instant: 90ms; --duration-fast: 150ms; --duration-deliberate: 640ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.fp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fp-skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--primary); color: var(--on-primary);
  padding: 8px 16px; border-radius: var(--radius-md); font-weight: 500; transition: top var(--duration-fast) var(--ease-out); }
.fp-skip:focus { top: calc(16px + env(safe-area-inset-top, 0px)); }

/* motion */
@keyframes fp-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fp-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* buttons */
.fp-btn { --h: var(--control-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--h); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -.003em; white-space: nowrap; cursor: pointer;
  user-select: none; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out); }
.fp-btn:active { transform: scale(.98); }
.fp-btn.lg { --h: var(--control-lg); padding: 0 var(--space-6); font-size: 15px; }
.fp-btn.block { width: 100%; }
.fp-btn.primary { background: var(--primary); color: var(--on-primary); }
.fp-btn.primary:hover { background: var(--primary-hover); }
.fp-btn.primary:active { background: var(--primary-press); }
.fp-btn.secondary { background: var(--button-secondary-bg); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.fp-btn.secondary:hover { background: var(--surface-hover); }
.fp-btn.ghost { background: transparent; color: var(--text-muted); }
.fp-btn.ghost:hover { background: var(--surface-hover); color: var(--text); }
.fp-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* brand mark + score ring */
.fp-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.fp-mark { width: 26px; height: 26px; flex: none; }
.fp-ring { position: relative; display: inline-grid; place-items: center; }
.fp-ring svg { transform: rotate(-90deg); display: block; }
.fp-ring .track { fill: none; stroke: var(--surface-sunken); }
.fp-ring .bar { fill: none; stroke: var(--primary); stroke-linecap: round; }
.fp-ring .c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.fp-ring .c b { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: block; }

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