/*
 * esecut-brand.css: Esecut's brand on the kept SEO pages.
 * Linked after the old pages' stylesheet by scripts/build-legacy-pages.cjs (served as /legacy-mf/esecut-brand.css).
 * It re-points that stylesheet's custom properties and its few hard-coded colours to Esecut's tokens
 * (src/styles/index.css): near-black #0B0D0C, ink #F4F6F1, chartreuse accent #C8FF70 with dark text on it.
 * Fonts are the same @fontsource files the app bundles, self-hosted under /legacy-mf/fonts/
 * (same-origin, so they also load under the site's Cross-Origin-Embedder-Policy).
 */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/legacy-mf/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/legacy-mf/fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/legacy-mf/fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/legacy-mf/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* The old app's tokens, in case any rule on these pages still reads them. */
  --mf-bg: #0b0d0c;
  --mf-violet: #c8ff70;
  --mf-violet-hi: #d7ff94;
  --mf-cyan: #c8ff70;
  --mf-cyan-hi: #d7ff94;
  --primary: 83 100% 72%;
  --accent: 83 100% 72%;
  --accent-foreground: 150 8% 5%;
  --ring: 83 100% 72%;
  color-scheme: dark;
}
html,
body,
#root {
  background: #0b0d0c;
}
body {
  color: #f4f6f1;
  font-family: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
}
::selection {
  background: rgb(200 255 112 / 0.35);
  color: #f4f6f1;
}

.ec-root {
  --ec-bg: #0b0d0c;
  --ec-bg-2: #141715;
  --ec-panel: rgb(20 23 21 / 0.72);
  --ec-panel-strong: rgb(29 34 30 / 0.8);
  --ec-line: rgb(255 255 255 / 0.12);
  --ec-line-soft: rgb(255 255 255 / 0.07);
  --ec-text: #f4f6f1;
  --ec-muted: #a3ada3;
  --ec-dim: #7d887e;
  --ec-indigo: #c8ff70;
  --ec-violet: #c8ff70;
  --ec-cyan: #c8ff70;
  --ec-grad: linear-gradient(92deg, #c8ff70, #d7ff94);
  --ec-font-display: 'Archivo Variable', 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --ec-font-body: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ec-font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, monospace;
  font-feature-settings: 'ss01', 'cv11';
}
.ec-root :focus-visible {
  outline: 2px solid #c8ff70;
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- backdrop */
/* No blue grid; a faint chartreuse glow at the top, like the landing page. */
.ec-backdrop::before {
  content: none;
}
.ec-orb-1 {
  background: rgb(200 255 112 / 0.1);
}
.ec-orb-2 {
  background: rgb(200 255 112 / 0.06);
}
.ec-orb-3 {
  background: rgb(255 255 255 / 0.035);
}

/* ------------------------------------------------------------------- logo */
/* Lockup from src/brand/BrandLogo.tsx: size "md" in the nav (mark 32px in the accent, wordmark 24px in
   Archivo expanded, extra bold), size "lg" in the footer (40px / 32px). */
.es-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f4f6f1;
  line-height: 1;
}
.es-logo-mark {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  color: #c8ff70;
}
.es-logo-word {
  font-family: 'Archivo Variable', 'Geist Variable', ui-sans-serif, sans-serif;
  font-size: 24px;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ec-footer-brand .es-logo {
  gap: 12px;
}
.ec-footer-brand .es-logo-mark {
  width: 40px;
  height: 40px;
}
.ec-footer-brand .es-logo-word {
  font-size: 32px;
}

/* -------------------------------------------------------------------- nav */
.ec-nav.is-scrolled {
  background: rgb(11 13 12 / 0.78);
}
.ec-nav-link:hover {
  background: rgb(255 255 255 / 0.05);
}

/* ---------------------------------------------------------------- buttons */
/* Landing pills: fully rounded; the primary one is chartreuse with near-black text. */
.ec-btn {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0;
}
.ec-btn-lg {
  border-radius: 999px;
}
.ec-btn-primary {
  background: #c8ff70;
  color: #0b0d0c;
  box-shadow: 0 0 0 1px rgb(200 255 112 / 0.4), 0 8px 30px -8px rgb(200 255 112 / 0.55);
}
.ec-btn-primary:hover {
  background: #d7ff94;
  box-shadow: 0 0 0 1px rgb(200 255 112 / 0.5), 0 12px 36px -8px rgb(200 255 112 / 0.65);
}
.ec-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0b0d0c, 0 0 0 4px #c8ff70;
}

/* --------------------------------------------------------------- headings */
/* Landing headline: Archivo semibold, slightly expanded, tight; the highlighted words become the
   italic serif accent the landing page uses (<em> in Headline / SectionHeading). */
.mk-h1,
.ec-h2,
.ec-cta-band h2 {
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: -0.035em;
}
.mk-prose h2,
.mk-prose h3,
.mk-grid article h3,
.mk-table thead th,
.bl-card h3,
.bl-related h3 {
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: -0.02em;
}
.mk-h1 .mk-grad,
.ec-h1-grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #c8ff70;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.01em;
}

/* Kickers become the landing eyebrow: mono caps in the muted ink with an accent dot. */
.ec-kicker,
.mk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #7d887e;
  font-size: 11.5px;
  font-weight: 500;
}
.ec-kicker::before,
.mk-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #c8ff70;
}

/* ----------------------------------------------------------------- panels */
.ec-faq details[open] {
  border-color: rgb(255 255 255 / 0.14);
}
.ec-card-icon {
  background: rgb(200 255 112 / 0.08);
  border-color: rgb(200 255 112 / 0.22);
  color: #c8ff70;
}
.ec-cta-band {
  background:
    radial-gradient(circle at 22% 20%, rgb(200 255 112 / 0.12), transparent 52%),
    radial-gradient(circle at 80% 85%, rgb(200 255 112 / 0.05), transparent 52%),
    linear-gradient(180deg, #141715, #0b0d0c);
  border-color: rgb(255 255 255 / 0.08);
}
.mk-table .mk-yes {
  color: #c8ff70;
}
.mk-prose a {
  border-bottom-color: rgb(200 255 112 / 0.35);
}
/* The blog posts' in-article CTA is a primary pill inside .mk-prose, whose link colour (0,1,1) would
   otherwise beat .ec-btn-primary (0,1,0) and paint chartreuse text on the chartreuse pill. */
.mk-prose a.ec-btn-primary,
.mk-prose a.ec-btn-primary:hover {
  color: #0b0d0c;
  border-bottom-color: transparent;
}

/* ------------------------------------------------------------ layout fixes */
/* The old stylesheet's reset makes every <svg>/<img> a max-width:100% block: the arrow after "Read the
   comparison" dropped to its own line, and blog card covers stopped 44px short of the card's right edge. */
.mk-more-link svg {
  display: inline-block;
}
.bl-card-cover {
  max-width: none;
}

/* ------------------------------------------------------------ scrolling */
/* MF's app shell (height:100% plus overflow-x:hidden on html, body and #root) made #root the scroller on phones,
   so these pages never scrolled the document: no collapsing address bar, no anchor jumps. Plain documents again;
   html still clips sideways overflow. */
html,
body,
#root {
  height: auto;
}
body,
#root {
  overflow-x: visible;
}
html {
  overflow-x: clip;
}