/* ============================================================
   MINDFLOW MARKETING — BRAND STYLESHEET  v3.0 (integrates Codex production-kit review)
   SOURCE OF TRUTH: Mindflow_Homepage.dc.html (master canvas
   by Youssef Hodaigui). Every value below is extracted from
   that file. Locked 2026-07-20. Campaign pages import this
   file; change values in the master first, then mirror here.
   ============================================================ */

/* ---------- FONTS ----------
   Master loads via Google Fonts CDN: SG 400;500;600;700 · IS 400;500;600 · JBM 400;500;700.
   Self-hosted: verified variable WOFF2 subsets (latin + latin-ext) per family,
   declared as true 400-700 ranges with unicode-range so latin-ext loads only when
   needed. SHA-256 hashes + OFL licenses in fonts/. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/SpaceGrotesk-latin-ext-wght-400-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/SpaceGrotesk-latin-wght-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('fonts/InstrumentSans-latin-ext-wdth100-wght-400-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('fonts/InstrumentSans-latin-wdth100-wght-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/JetBrainsMono-latin-ext-wght-400-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/JetBrainsMono-latin-wght-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- DESIGN TOKENS (extracted from master) ---------- */
:root{
  color-scheme:light;
  /* Dark grounds */
  --mf-black:#0B0C10;        /* near-black anchor — hero gradient start, final CTA, footer */
  --mf-slate:#12303B;        /* brand slate — proof band, dark bento card, hero gradient end */
  --mf-panel:#0E1418;        /* evidence/report/form panels */
  --mf-tile:#151C21;         /* inner tiles: metric boxes, terminal, form fields */
  --mf-track:#1B252B;        /* SoA progress-bar track */
  --mf-menu:#0E1A20;         /* mega-menu / dropdown surface */
  --mf-promo-grad:linear-gradient(160deg,rgba(16,185,129,.12),rgba(52,227,164,.05)); /* mega-menu offer card */
  --mf-navglass:linear-gradient(90deg,rgba(13,37,48,.96) 0%,rgba(18,48,59,.95) 55%,rgba(23,65,76,.92) 100%);

  /* Gradients (the only two) */
  --mf-hero-grad:linear-gradient(135deg,#0B0C10 0%,#12303B 100%);
  --mf-soa-grad:linear-gradient(90deg,#10B981,#D8FF3E);   /* Share-of-Answer bar fill */

  /* Accents */
  --mf-emerald:#10B981;      /* primary CTA fill + logo mark + winning map cells */
  --mf-emerald-hover:#0EA271;
  --mf-cta-ink:#04120C;      /* text on emerald (nav variant uses #0D2530). Never white */
  --mf-mint:#34E3A4;         /* NEW badges, nav accents/borders, chevrons, phone icon */
  --mf-mint-soft:#7FD8C4;    /* mega-menu footer links, ring texture */
  --mf-lime:#D8FF3E;         /* DATA-POP: metric deltas (▲), SoA label, answer highlight,
                                featured-tier step, particles. Dark grounds only */
  --mf-gold:#C4A35A;         /* kicker dashes+labels (dark), ghost-button borders, ladder fill */
  --mf-gold-text:#77683F;    /* kicker/index labels on cream/white — AA text (4.86 cream / 5.47 white) */
  --mf-gold-decorative:#8A7A52; /* master original — decorative use only (3.74 on cream) */
  --mf-gold-dim:var(--mf-gold-text); /* back-compat alias */

  /* Text on dark */
  --mf-white:#FFFFFF;        /* headlines on dark */
  --mf-text-dark1:#B9C4C6;   /* hero/final body */
  --mf-text-dark2:#A9BCC0;   /* proof-band body, dark-card body */
  --mf-text-dark3:#8FA3A6;   /* mono labels on panels */
  --mf-ledger:#C6D2D4;       /* work-ledger rows */
  --mf-terminal:#DDE6E8;     /* typed query text */
  --mf-ghost-text:#E8DFC8;   /* ghost-button text on dark */
  --mf-navlink:#B9CDD4;      /* nav links (hover #F7FAF9) */
  --mf-navlink-hi:#F7FAF9;
  --mf-footer-text:#7E8B8E;  /* footer fine print — AA (5.56 on #0B0C10; master #6B7578 = 4.13) */
  --mf-footer-dim:var(--mf-footer-text);
  --mf-error:#F0A5A5;
  --mf-error-strong:#B42318; /* errors on light grounds (6.57 on white) */
  --mf-support:#3F5360;      /* lede/support text on light (8.02 white / 7.13 cream) */
  --mf-ivory:#F8F5EE;

  /* Light grounds */
  --mf-cream:#F6F1E7;        /* base body + alternating sections */
  --mf-white-sec:#FFFFFF;    /* white sections + cards */
  --mf-border:#DDD4C2;       /* card + divider borders on light */
  --mf-border-soft:#EDE7D8;  /* trust-strip border */
  --mf-ink:#12303B;          /* headings on light */
  --mf-body:#1A1B1E;         /* base body color (html) */
  --mf-body-1:#4A4A45;       /* section body on cream */
  --mf-body-2:#5C5C55;       /* card body */
  --mf-marquee-text:#736F68;  /* trust-strip names on white — AA (5.00) */
  --mf-marquee-decorative:#9A948A; /* master original — decorative only (3.01) */
  --mf-marquee:var(--mf-marquee-text);
  --mf-map-mid:#E8DFC8;      /* map-grid mid cells */
  --mf-map-low:#F1EADB;      /* map-grid weak cells */

  /* Type */
  --mf-display:'Space Grotesk',sans-serif;
  --mf-sans:'Instrument Sans',sans-serif;
  --mf-mono:'JetBrains Mono',monospace;

  /* Rhythm & shape (from master) */
  --mf-radius-card:16px;     /* cards, panels, bento, tiers */
  --mf-radius-menu:14px;     /* mega menus, success box */
  --mf-radius-tile:10px;     /* inner tiles, terminal */
  --mf-radius-btn:8px;       /* buttons (final form btn: 10px) */
  --mf-pad-section:110px 32px;          /* mobile: 64px 20px */
  --mf-max:1240px;
  --mf-shadow-card:0 1px 2px rgba(20,20,15,.04),0 8px 24px rgba(20,20,15,.06);
  --mf-shadow-card-hover:0 2px 4px rgba(20,20,15,.05),0 20px 44px rgba(20,20,15,.12);
  --mf-shadow-panel:0 24px 60px rgba(0,0,0,.45);
  --mf-shadow-menu:0 30px 70px rgba(4,16,21,.55);
  --mf-focus:0 0 0 3px rgba(52,227,164,.42);
}

/* ---------- KEYFRAMES (master set) ---------- */
@keyframes mfMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mfPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}50%{box-shadow:0 0 0 12px rgba(16,185,129,0)}}
@keyframes mfDrift{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}
@keyframes mfBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- BASE ---------- */
body.mf{margin:0;background:var(--mf-cream);font-family:var(--mf-sans);color:var(--mf-body)}
.mf a{color:var(--mf-ink);text-decoration:none}
.mf a:hover{color:var(--mf-gold)}
.mf-h1{font-family:var(--mf-display);font-weight:700;font-size:clamp(34px,5vw,56px);line-height:1.08;text-wrap:balance;margin:0}
.mf-h2{font-family:var(--mf-display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.12;margin:0}
.mf-card-title{font-family:var(--mf-display);font-weight:600}

/* Kicker — the master's signature: 28×2px gold dash + mono label */
.mf-kicker{display:flex;align-items:center;gap:10px}
.mf-kicker i{display:inline-block;width:28px;height:2px;background:var(--mf-gold)}
.mf-kicker span{font-family:var(--mf-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mf-gold)}
.mf-kicker--light span{color:var(--mf-gold-dim)}
.mf-index{font-family:var(--mf-mono);font-size:11px;letter-spacing:.2em;color:var(--mf-gold-dim)} /* "01 / LOCAL SEO" card labels */

/* ---------- NAV ---------- */
.mf-nav{position:sticky;top:0;z-index:50;background:var(--mf-navglass);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);border-bottom:1px solid rgba(52,227,164,.14);box-shadow:0 8px 30px rgba(4,16,21,.14)}
.mf-nav-inner{max-width:var(--mf-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;gap:24px}
.mf-nav-logo{height:34px;display:block}
.mf-nav a.link{color:var(--mf-navlink);font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:6px}
.mf-nav a.link:hover{color:var(--mf-navlink-hi);background:rgba(242,245,244,.06)}
.mf-mega{background:var(--mf-menu);border:1px solid rgba(52,227,164,.16);border-radius:var(--mf-radius-menu);box-shadow:var(--mf-shadow-menu);padding:24px}
.mf-mega .head{font-family:var(--mf-mono);font-size:10.5px;letter-spacing:.2em;color:var(--mf-gold);text-transform:uppercase}
.mf-mega .foot-link{font-family:var(--mf-mono);font-size:11px;letter-spacing:.08em;color:var(--mf-mint-soft)}
.mf-mega .foot-link:hover{color:var(--mf-mint)}
.mf-badge{font-family:var(--mf-mono);font-size:9px;letter-spacing:.14em;color:var(--mf-mint);border:1px solid rgba(52,227,164,.4);border-radius:4px;padding:1px 6px}

/* ---------- BUTTONS ---------- */
.mf-btn{display:inline-block;background:var(--mf-emerald);color:var(--mf-cta-ink);font-weight:600;font-size:16px;padding:16px 26px;border-radius:var(--mf-radius-btn);text-align:center;border:0;cursor:pointer;font-family:var(--mf-sans);animation:mfPulse 2.6s infinite}
.mf-btn:hover{background:var(--mf-emerald-hover);color:var(--mf-cta-ink)}
.mf-btn--nav{font-size:14px;padding:12px 20px;color:#0D2530;animation:none}
.mf-btn-ghost{display:inline-block;border:1px solid var(--mf-gold);color:var(--mf-ghost-text);font-weight:500;font-size:16px;padding:16px 26px;border-radius:var(--mf-radius-btn);text-align:center}
.mf-btn-ghost:hover{background:rgba(196,163,90,.12);color:#FFFFFF}
.mf-btn-ghost--light{color:var(--mf-ink)}
.mf-btn-ghost--light:hover{background:var(--mf-cream);color:var(--mf-ink)}

/* ---------- HERO ---------- */
.mf-hero-bg{background:var(--mf-hero-grad);position:relative;overflow:hidden}
.mf-hero-rings{position:absolute;inset:0;opacity:.10;background-image:repeating-radial-gradient(circle at 30% 40%,transparent 0,transparent 38px,#7FD8C4 39px,transparent 40px),repeating-radial-gradient(circle at 75% 70%,transparent 0,transparent 54px,#7FD8C4 55px,transparent 56px)}
.mf-chip{font-family:var(--mf-mono);font-size:12px;color:var(--mf-text-dark3);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 14px}

/* ---------- PANELS & TILES ---------- */
.mf-panel{background:var(--mf-panel);border:1px solid rgba(255,255,255,.10);border-radius:var(--mf-radius-card);padding:28px;box-shadow:var(--mf-shadow-panel)}
.mf-tile{background:var(--mf-tile);border-radius:var(--mf-radius-tile);padding:16px}
.mf-metric-label{font-family:var(--mf-mono);font-size:10px;letter-spacing:.14em;color:var(--mf-text-dark3)}
.mf-metric{font-family:var(--mf-mono);font-size:26px;font-weight:700;color:#FFFFFF}
.mf-delta{font-size:13px;color:var(--mf-lime)}              /* ▲3 — the lime data-pop */
.mf-answer-hl{background:rgba(216,255,62,.16);border:1px solid var(--mf-lime);border-radius:4px;padding:1px 6px;color:var(--mf-lime);font-weight:600}
.mf-check{width:18px;height:18px;border-radius:4px;background:rgba(16,185,129,.15);border:1px solid var(--mf-emerald);color:var(--mf-emerald);display:flex;align-items:center;justify-content:center;font-size:11px}
.mf-soa-track{height:8px;background:var(--mf-track);border-radius:999px;overflow:hidden}
.mf-soa-fill{height:100%;background:var(--mf-soa-grad);border-radius:999px}

/* ---------- LIGHT CARDS / BENTO ---------- */
.mf-card{background:#FFFFFF;border:1px solid var(--mf-border);border-radius:var(--mf-radius-card);padding:32px;box-shadow:var(--mf-shadow-card);transition:transform .2s,box-shadow .2s}
.mf-card:hover{transform:translateY(-4px);box-shadow:var(--mf-shadow-card-hover)}
.mf-card--slate{background:var(--mf-slate);border-color:var(--mf-slate)}
.mf-map-cell-top{background:var(--mf-emerald);color:var(--mf-cta-ink)}
.mf-map-cell-mid{background:var(--mf-map-mid);color:var(--mf-gold-dim)}
.mf-map-cell-low{background:var(--mf-map-low);color:var(--mf-gold-dim)}

/* ---------- METHOD LADDER ---------- */
.mf-step-dot{width:48px;height:48px;border-radius:50%;background:var(--mf-slate);color:var(--mf-cream);font-family:var(--mf-mono);font-size:14px;display:flex;align-items:center;justify-content:center;border:4px solid var(--mf-cream)}
.mf-ladder-track{height:2px;background:var(--mf-border)}
.mf-ladder-fill{height:2px;background:var(--mf-gold)}       /* fills on scroll */

/* ---------- FORMS ---------- */
.mf-input{background:var(--mf-tile);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:15px 16px;font-size:15px;color:var(--mf-navlink-hi);font-family:var(--mf-sans);width:100%;box-sizing:border-box}
.mf-success{background:rgba(16,185,129,.10);border:1px solid var(--mf-emerald);border-radius:var(--mf-radius-menu);padding:32px;text-align:center}

/* ---------- STICKY MOBILE BAR ---------- */
.mf-sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(13,37,48,.97);backdrop-filter:blur(12px);border-top:1px solid rgba(52,227,164,.2);padding:10px 14px;display:flex;gap:10px}

/* ---------- FOOTER ---------- */
.mf-footer{background:var(--mf-black);border-top:1px solid rgba(255,255,255,.08);padding:36px 32px}
.mf-footer .fine{font-family:var(--mf-mono);font-size:12px;color:var(--mf-footer-dim)}

/* ---------- PRODUCTION LAYER: accessibility & resilience ----------
   Additive only — the design is unchanged for everyone else. */
html{text-size-adjust:100%;-webkit-text-size-adjust:100%}
.mf img,.mf svg,.mf video{display:block;max-width:100%;height:auto}
.mf button,.mf input,.mf select,.mf textarea{font:inherit}
[id]{scroll-margin-top:92px}
.mf-btn,.mf-btn-ghost{min-height:48px}
.mf-btn:disabled,.mf-btn[aria-disabled='true'],.mf-btn-ghost:disabled{opacity:.52;cursor:not-allowed;pointer-events:none}
.mf-input:hover{border-color:rgba(52,227,164,.46)}
.mf-input:focus-visible{border-color:var(--mf-mint);outline:3px solid rgba(52,227,164,.28);outline-offset:1px}
.mf-input[aria-invalid='true']{border-color:var(--mf-error)}
.mf-input:disabled{opacity:.58;cursor:not-allowed}
.mf-field-error{color:var(--mf-error);font-size:14px}
.mf-input::placeholder{color:#97A7AA;opacity:1}             /* 6.91:1 on #151C21 */
:focus-visible{outline:3px solid #34E3A4;outline-offset:3px;box-shadow:var(--mf-focus)}
.mf-on-light :focus-visible{outline-color:#12303B;box-shadow:none}
.mf-skip{position:fixed;z-index:999;top:12px;left:12px;transform:translateY(-160%);background:#FFFFFF;color:#12303B;border-radius:6px;padding:10px 14px;font-weight:700;transition:transform .16s}
.mf-skip:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mf-nav{background:rgba(13,37,48,.98)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Hover effects only where hover exists (touch hygiene) */
@media (hover:none){.mf-card:hover{transform:none;box-shadow:var(--mf-shadow-card)}}
/* Small-phone layer */
@media (max-width:560px){
  .mf-section,.mf-pad{padding:56px 16px}
  .mf-card,.mf-panel{padding:24px}
  .mf-btn,.mf-btn-ghost{width:100%}
}
@media (prefers-contrast:more){
  :root{--mf-border:#B6AA91;--mf-border-soft:#C9BEA7}
  .mf-input{border-color:rgba(255,255,255,.52)}
}
@media print{
  .mf-nav,.mf-sticky-bar{display:none!important}
  body.mf{padding:0;background:#fff;color:#000}
  .mf-section,.mf-pad{padding:32px 0}
}