/* ==========================================================================
   MentX.ai — global stylesheet (single source of truth for colors/type)
   Brand: green #03E2B6 (primary CTAs + highlights ONLY),
          blue #3051DF (headings, identity, links, one dark section),
          near-white bg, near-black text. No other hues.
   ========================================================================== */

:root {
  --green: #03E2B6;
  --blue: #3051DF;
  --ink: #0B0D12;        /* near-black */
  --bg: #FAFBFC;         /* near-white */
  --ink-soft: #3d434f;   /* body text on light */
  --line: #e4e7ec;       /* hairlines */
  --card: #ffffff;
  --dark: #0B0D12;       /* STATIC FALLBACK for the dark surfaces — see below */
  --maxw: 1080px;
  --radius: 10px;

  /* --- V1.1.1 animated brand ramp (dark CTA bands + footer) --------------
     Stops, in travel order. Same two brand hues, plus the mid navy that sits
     exactly halfway between the ID blue and the old near-black.
     Documented in full in BRAND-COLORS.md.                                */
  --ramp-1: #03E2B6;     /* ID green, full strength */
  --ramp-2: #1A8FA0;     /* teal crossover */
  --ramp-3: #2B49CC;     /* ID blue, darkened to stay legible */
  --ramp-4: #1B2A6B;     /* mid navy — the dark end (NOT #0B0D12, too dark) */
  --ramp-cycle: 20s;

  --brand-ramp: linear-gradient(115deg,
    var(--ramp-1) 0%, var(--ramp-2) 30%, var(--ramp-3) 66%, var(--ramp-4) 100%);
  /* The footer does NOT cycle. It is frozen at one moment of the ramp —
     these two blues were sampled off the live footer and given as
     sRGB 0.087/0.123/0.300 and 0.113/0.186/0.463.
     Same 295° angle as the moving ramp, so the deep navy stays at the top
     edge where the footer meets the dark CTA band above it. */
  --footer-deep: #161F4C;
  --footer-lift: #1D2F76;
  --footer-static: linear-gradient(295deg,
    var(--footer-lift) 0%, var(--footer-deep) 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.01em; margin-bottom: .6rem; }
h3 { font-size: 1.15rem; margin-bottom: .4rem; }

h2 .qmark, .eyebrow { color: var(--blue); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 1rem 1.3rem; }
li { margin-bottom: .4rem; }

strong { color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

section { padding: 64px 0; }
section.tight { padding: 40px 0; }

.eyebrow {
  display: block; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: .7rem;
}

/* ---------- Header / nav (CSS-only mobile toggle) ---------- */

.site-header {
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
}
/* The same 8px travelling band, along the bottom edge of the menu. The menu
   itself stays white — the band replaces the old 1px hairline as the divider
   and rides along with the sticky header, so it is visible at all times.
   Definition lives with the other band rules further down. */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--green));
  background-size: 300% 100%;
  animation: brand-slide 12s linear infinite;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; flex-wrap: wrap;
}
.logo img { height: 30px; width: auto; }

.nav-toggle-box { display: none; }
.nav-toggle {
  display: none; cursor: pointer; padding: 10px;
  font-size: 1.5rem; line-height: 1; color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--ink); font-size: .95rem; font-weight: 500; }
.site-nav a:hover { color: var(--blue); text-decoration: none; }
.site-nav a.active { color: var(--blue); }

.btn {
  display: inline-block; padding: 12px 24px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--green); color: var(--ink); }
.btn-secondary {
  background: transparent; color: var(--blue);
  border: 2px solid var(--blue);
}
.site-nav .btn { padding: 9px 18px; }

/* ---------- LinkedIn CTA ----------
   Every conversion path on the site is one LinkedIn message, and it is one
   button: "in" glyph (inline SVG, inherits the button's ink colour), label,
   Nicolas' face. Nothing sits outside the pill.                           */

.btn-linkedin {
  display: inline-flex; align-items: center; gap: 10px;
  vertical-align: middle;
  /* the avatar sets the height, so trim the vertical padding back to keep
     this pill the same size as a plain .btn next to it */
  padding: 6px 9px 6px 22px;
}
.btn-linkedin svg { width: 18px; height: 18px; flex: none; }
.btn-linkedin .btn-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; object-fit: cover;
  margin-left: 4px;
  box-shadow: 0 0 0 2px rgba(11,13,18,.12);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; width: 100%; flex-direction: column;
    align-items: flex-start; gap: 14px; padding: 14px 0 20px;
  }
  .nav-toggle-box:checked ~ .site-nav { display: flex; }
}

/* ---------- Hero ---------- */

.hero { padding: 88px 0 72px; }
.hero .lede {
  font-size: 1.18rem; max-width: 46em; margin-top: 1.1rem;
}
.hero .cta-row { margin-top: 1.8rem; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.hero-note { font-size: .88rem; margin-top: .9rem; color: var(--ink-soft); }

.hl { /* green highlight — sparing use */
  background: linear-gradient(transparent 62%, var(--green) 62%, var(--green) 92%, transparent 92%);
}

/* ---------- Cards / grids ---------- */

.grid { display: grid; gap: 22px; margin-top: 1.6rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.card h3 { color: var(--blue); }
.card .step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 700;
  margin-bottom: .8rem; font-size: .95rem;
}

/* ---------- The one dark section ---------- */

.dark {
  /* TO REVERT TO STATIC BLACK: replace the next four lines with
     `background: var(--dark);` and delete the .brand-band block below. */
  background: var(--brand-ramp);
  background-size: 300% 300%;
  animation: brand-drift var(--ramp-cycle) ease-in-out infinite alternate;
  color: #c9cdd6;
  position: relative; isolation: isolate;
}
.dark h2, .dark h3, .dark strong { color: #fff; }
.dark .eyebrow { color: var(--green); }
.dark a { color: #9db0ff; }
/* ...but a primary button keeps its ink label (and, in the LinkedIn CTA, its
   ink glyph — the SVG inherits currentColor). Without this, `.dark a` wins on
   specificity and the label goes periwinkle on green. */
.dark .btn-primary { color: var(--ink); }
.dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.dark .card h3 { color: #fff; }
.logo-on-dark img { filter: brightness(0) invert(1); }

/* ---------- Article / prose pages ---------- */

.breadcrumbs { font-size: .85rem; margin: 26px 0 0; color: var(--ink-soft); }
.breadcrumbs ol { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: .35em; }
.breadcrumbs li + li::before { content: "›"; margin-right: .35em; }

.article-meta { font-size: .85rem; color: var(--ink-soft); margin: .8rem 0 0; }

.answer-first {
  border-left: 4px solid var(--green);
  background: var(--card); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; margin: 1.6rem 0; font-size: 1.05rem;
}

.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.6rem; }

/* Q&A blocks */
.qa { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
      padding: 20px 24px; margin: 1rem 0; }
.qa h3 { color: var(--blue); }

/* Comparison tables */
.table-wrap { overflow-x: auto; margin: 1.4rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--card); }
th, td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
th { background: var(--bg); color: var(--ink); }

/* Checklist */
.checklist { list-style: none; margin-left: 0; }
.checklist li { padding-left: 1.6em; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* Related / part-of blocks */
.related { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.6rem; }
.related h2 { font-size: 1.2rem; }
.part-of { font-size: .9rem; margin-top: 1rem; }

/* ---------- Founder cards ---------- */

.founder-card { text-align: left; }
.founder-card img { border-radius: var(--radius); margin-bottom: 1rem; aspect-ratio: 3/2; object-fit: cover; }
.founder-card .role { color: var(--blue); font-weight: 600; font-size: .92rem; margin-bottom: .5rem; }

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band .wrap-narrow > p { max-width: 40em; margin-left: auto; margin-right: auto; }
.cta-band .btn { margin-top: 1.2rem; }

/* ---------- Footer ---------- */

.site-footer {
  /* Static — the footer does not cycle. It is frozen at one moment of the
     ramp: the two blues below were sampled off the live footer.
     TO REVERT TO STATIC BLACK: `background: var(--dark);`                 */
  background: var(--footer-static);
  color: #9aa1ad;
  padding: 56px 0 40px; font-size: .9rem; margin-top: 0;
  position: relative;
}
.site-footer a { color: #c9cdd6; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8rem; }
.site-footer ul { list-style: none; margin-left: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer-brand img { height: 26px; width: auto; margin-bottom: .9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 40px; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* ==========================================================================
   V1.1.1 — the animated brand ramp. Full rationale + revert instructions in
   BRAND-COLORS.md. Everything below is additive: delete this block and
   restore `background: var(--dark)` on .dark / .site-footer to go static.
   ========================================================================== */

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

/* 8px band travelling ID green → ID blue → ID green, at full saturation.
   It sits where no text does, which is the only reason the undarkened brand
   colours are safe to use here. */
.dark::before,
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--green));
  background-size: 300% 100%;
  animation: brand-slide 12s linear infinite;
}

@keyframes brand-slide {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* V1.1.1 ships undimmed, as approved. No scrim, original text colours.
   Recorded decision — see BRAND-COLORS.md §4. */
.site-footer { color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--green); }

/* Reduced motion: keep the gradient, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .dark, .dark::before, .site-footer::before,
  .site-header::after { animation: none; }
}

/* One-off spacing and width tweaks that used to be style="" attributes.
   The deployed Content-Security-Policy sets style-src 'self', which blocks
   inline style attributes outright — as classes they survive. Keep new
   one-offs here rather than reintroducing style="". See SECURITY-REVIEW.md §6. */
.u-w760 { max-width: 760px; }
.u-w46 { max-width: 46em; }
.u-mt-10 { margin-top: 1rem; }
.u-mt-14 { margin-top: 1.4rem; }
.u-mt-25 { margin-top: 2.5rem; }
.u-small { font-size: .9rem; }
.u-note { margin-top: 2rem; color: var(--ink-soft); font-size: .92rem; }
.u-note-tight { margin-top: 1.6rem; color: var(--ink-soft); font-size: .92rem; }