/* masters.md FIRST: Read masters.md BEFORE editing or adding files.
 * Standalone stylesheet for the TEMPORARY marketing site (site-online/).
 * Self-contained (no build step, no Tailwind) so the HTML can be uploaded as-is
 * to masters.mba.
 *
 * VISUAL IDENTITY v1 — "Editorial base. No-BS margin notes."
 * Source of truth: site-online/identitate/masters-visual-identity.html
 *   Palette : Ink / Kraft / Cream / Rust red (coral) / Indigo / Fog
 *   Type    : Fraunces (display, italic = punchline) · Inter (body) ·
 *             Space Mono (the mentor's voice: eyebrows, tags, margin notes)
 *   Signature: the margin note — a struck-through cliche followed by an
 *             indigo mono aside (`.strike` + `.note`).
 * Keep this file in sync with the identity file above. */

:root {
  /* ---- Identity palette (verbatim from the identity file) ---- */
  --ink: #1B1C1F;
  --kraft: #EDE4D3;
  --cream: #FAF7F1;
  --coral: #F5443C;
  --coral-deep: #8C2016;
  --indigo: #3B3FE0;
  --fog: #A79C87;

  /* ---- Semantic tokens (what components actually use) ---- */
  --background: var(--cream);
  --surface: #FFFDF9;
  --surface-2: var(--kraft);
  --surface-3: #FFFFFF;
  --border: rgba(27, 28, 31, 0.12);
  --border-strong: rgba(27, 28, 31, 0.28);
  --foreground: var(--ink);
  --muted: #5B5A57;
  --muted-2: #7C776E;
  --accent: var(--coral);
  --accent-hover: var(--coral-deep);
  --accent-foreground: var(--cream);
  --success: #2F7A55;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --shadow-soft: 0 1px 2px rgba(27, 28, 31, .05), 0 10px 30px rgba(27, 28, 31, .06);
  --maxw: 1120px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.06;
}

/* The punchline is always the italic. */
em, .italic { font-style: italic; font-weight: 500; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--indigo);
  border-radius: var(--radius-sm);
}

/* Ambient editorial wash for hero / feature sections (replaces the old aurora). */
.bg-aurora {
  background-image:
    radial-gradient(52rem 40rem at 88% -20%, rgba(237, 228, 211, .95), transparent 62%),
    radial-gradient(38rem 34rem at -12% 108%, rgba(245, 68, 60, .07), transparent 60%);
}

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

/* ---- Header / nav ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: rgba(250, 247, 241, .82);
  border-bottom: 1px solid var(--border);
}
/* position: relative so the mobile menu panel can anchor to the header. */
.site-header .wrap { position: relative; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.nav-links { display: flex; align-items: center; gap: 28px; }

/* Burger — desktop-hidden, revealed with the breakpoint below. */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px;               /* 44px: a comfortable touch target */
  padding: 0; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle-bar {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links a {
  font-family: var(--font-mono);
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--coral-deep); }

/* Logo = the masters.mba wordmark PNG (assets/logo-masters.png — logo v2,
   1687×246, transparent). Sized by height; width follows the intrinsic ratio. */
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 30px; width: auto; }
.site-footer .logo img { height: 26px; }

/* Legacy text wordmark — kept so a `masters<span class="mba">mba</span>`
   fallback still renders correctly if the image is ever removed. */
.logo .mba {
  font-family: var(--font-mono); font-weight: 700;
  background: var(--coral); color: var(--cream);
  border-radius: 2px; padding: 2px 7px; font-size: .82rem;
  margin-left: 5px; letter-spacing: .06em; text-transform: uppercase;
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 22px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn { white-space: nowrap; }               /* labels must never wrap in the header */

/* The header CTA shortens on narrow screens so logo + button + burger fit
   on one line. Only one of the two spans is ever rendered. */
.btn-short { display: none; }
.btn-primary { background: var(--coral); color: var(--cream); }
.btn-primary:hover { background: var(--coral-deep); }
.btn-outline { border-color: var(--border-strong); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); background: var(--kraft); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--ink); }
.btn-sm { padding: 9px 16px; font-size: .75rem; }
.btn-lg { padding: 16px 28px; font-size: .86rem; }

/* ---- Generic sections ------------------------------------------------ */
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }

/* Eyebrow = the mentor's mono voice, not a pill badge. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--coral-deep);
}
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }

.lead { color: var(--muted); font-size: 1.1rem; max-width: 56ch; }

/* Accent word inside a headline. `.gold` is kept as a legacy alias. */
.pop, .gold { color: var(--coral); font-style: italic; font-weight: 500; }

.section-head { max-width: 62ch; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 14px 0 12px; }

/* Hairline rule above a section title — editorial spread feel. */
.section-head::before {
  content: ""; display: block; height: 1px;
  background: var(--border); margin-bottom: 22px;
}

/* ---- Signature: the margin note -------------------------------------- */
/* A struck-through cliche + the mentor's honest aside. The whole brand. */
.strike {
  text-decoration: line-through;
  text-decoration-color: var(--indigo);
  text-decoration-thickness: 2px;
  color: var(--fog);
}
.note {
  display: block;
  font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.6;
  color: var(--indigo);
  margin-top: 8px;
}
.note::before { content: "↳ "; }

.margin-note {
  background: var(--kraft);
  border-radius: var(--radius);
  padding: 34px 38px;
}
.margin-note p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5;
  margin: 0; max-width: 640px;
}

/* ---- Signup band (Brevo) --------------------------------------------- */
/* Full-bleed kraft band sitting directly under the hero on every page.
   Posts name + email to the Brevo proxy — see signup.js. */
.signup {
  background: var(--kraft);
  border-top: 1px solid rgba(27, 28, 31, .10);
  border-bottom: 1px solid rgba(27, 28, 31, .10);
  padding: 44px 0;
  /* Deep-linking to #enroll must not land under the sticky header
     (68px + its 1px border), so leave a little air above it too. */
  scroll-margin-top: 84px;
}
.signup-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.signup h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin: 10px 0 8px;
}
.signup .signup-sub { color: var(--muted); font-size: .98rem; margin: 0; max-width: 46ch; }

.signup-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signup-form .field { margin: 0; }
.signup-form .signup-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signup-form button { flex-shrink: 0; }
.signup-form input { background: var(--cream); }

/* Consent + status share the mono "aside" voice. */
.signup-consent {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: .7rem; line-height: 1.65;
  color: var(--muted-2); margin: 0;
}
/* Confirmation has to be unmissable — someone who just typed their email needs
   to KNOW it landed. So the status gets its own full-width line under the
   button, at body size rather than fine-print size. */
.signup-status {
  flex: 1 1 100%;
  font-family: var(--font-mono);
  font-size: .95rem; line-height: 1.5;
  margin: 0;
}
.signup-status:empty { display: none; }

.signup-status.is-ok,
.signup-status.is-error {
  font-size: 1.02rem; font-weight: 700;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid currentColor;
}
.signup-status.is-ok {
  color: var(--indigo);
  background: rgba(59, 63, 224, .09);
}
.signup-status.is-ok::before { content: "✓ "; }
.signup-status.is-error {
  color: var(--coral-deep);
  background: rgba(245, 68, 60, .09);
}
.signup-status.is-error::before { content: "↳ "; }

.signup-form[aria-busy="true"] button { opacity: .6; pointer-events: none; }

/* Honeypot — invisible to people, irresistible to bots. Hidden off-canvas
   rather than with display:none, which some bots detect and skip. */
.signup-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
}

@media (max-width: 860px) {
  .signup-inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .signup-form { grid-template-columns: 1fr; }
  .signup-form button { width: 100%; }
}

/* ---- Enrol landing page (enroll.html) -------------------------------- */
/* A single-purpose page: one form, nothing to click away to. Deliberately
   narrow and centred — every element here exists to get the form filled. */
.enroll-page { padding: 72px 0 88px; }
.enroll-wrap { max-width: 620px; margin: 0 auto; padding: 0 20px; }
.enroll-page h1 {
  font-size: clamp(2.1rem, 5vw, 3rem);
  margin: 16px 0 16px;
}
.enroll-page .lead { max-width: none; }

/* The form gets card treatment here, not a band — it IS the page. */
.enroll-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 32px;
  margin-top: 32px;
}
/* One field per line: nothing competing for attention. */
.enroll-card .signup-form { grid-template-columns: 1fr; gap: 18px; }
.enroll-card .signup-form input { background: var(--surface-3); }
.enroll-card .signup-form button { width: 100%; }
.enroll-card .signup-actions { display: block; }
.enroll-card .signup-status { margin-top: 16px; }

/* "What happens next" — answers the unspoken question before it's asked. */
.enroll-next { margin-top: 40px; }
.enroll-next h2 {
  font-family: var(--font-mono); font-weight: 700;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--coral-deep); margin: 0 0 16px;
}
.enroll-next ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
/* The marker is absolutely positioned rather than a grid/flex cell: an <li>
   holding both <b> and bare text would otherwise split into two grid items and
   the loose text would wrap into the narrow number column. */
.enroll-next li {
  counter-increment: step;
  position: relative;
  padding: 12px 0 12px 44px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: .96rem; line-height: 1.6;
}
.enroll-next li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-mono); font-weight: 700; font-size: .8rem;
  color: var(--fog);
}
.enroll-next li b { color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .enroll-page { padding: 48px 0 64px; }
  .enroll-card { padding: 24px 20px; }
}

/* ---- Cards ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-soft);
  transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card h3 { font-size: 1.16rem; margin: 0 0 8px; }
.card p { color: var(--muted); margin: 0; font-size: .96rem; }

/* Kraft variant — for the "paper" cards in a stack. */
.card-kraft { background: var(--kraft); border-color: rgba(27, 28, 31, .08); }
/* Ink variant — the closing slide of a carousel, translated to web. */
.card-ink { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.card-ink h3 { color: var(--cream); }
.card-ink p { color: rgba(250, 247, 241, .72); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Hero ------------------------------------------------------------ */
.hero { padding: 88px 0 72px; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); margin: 20px 0 20px; letter-spacing: -0.02em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 56px; }
.stat .num {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600;
  color: var(--coral); line-height: 1.1;
}
.stat .lbl { font-family: var(--font-mono); color: var(--fog); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }

/* ---- Retention highlight -------------------------------------------- */
.figure-87 {
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: clamp(4rem, 12vw, 8rem); line-height: 1;
  color: var(--coral); letter-spacing: -0.03em;
}

/* ---- Numbered / icon list ------------------------------------------- */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--kraft); color: var(--coral-deep);
  font-family: var(--font-mono); font-weight: 700; font-size: .9rem;
  margin-bottom: 16px;
}
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--kraft); font-size: 1.25rem; margin-bottom: 16px;
}
.card-ink .ico { background: rgba(250, 247, 241, .12); }

/* ---- CTA band -------------------------------------------------------- */
/* Ink close, coral CTA — the carousel's last slide, as a web band. */
.cta-band {
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg); padding: 56px; text-align: center;
}
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0 0 14px; color: var(--cream); }
.cta-band h2 .pop, .cta-band h2 .gold { color: var(--coral); }
.cta-band p { color: rgba(250, 247, 241, .74); max-width: 54ch; margin: 0 auto 28px; }
.cta-band .eyebrow { color: var(--kraft); }
.cta-band .note { color: #9FA2FF; }
.cta-band .btn-outline { border-color: rgba(250, 247, 241, .35); color: var(--cream); }
.cta-band .btn-outline:hover { border-color: var(--cream); background: rgba(250, 247, 241, .08); }

/* ---- Form ------------------------------------------------------------ */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-3); color: var(--foreground);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: var(--font-sans); font-size: .96rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fog); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--indigo); outline: none;
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--kraft);
  padding: 48px 0 40px; color: var(--muted-2);
}
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; }
.footer-grid a { color: var(--muted); display: block; margin: 8px 0; font-size: .92rem; }
.footer-grid a:hover { color: var(--coral-deep); }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fog); margin: 0 0 10px;
}
.site-footer .divider { background: rgba(27, 28, 31, .14); }

.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-split { grid-template-columns: 1fr !important; }
  .cta-band { padding: 40px 24px; }
  .margin-note { padding: 26px 24px; }

  /* Mobile menu: the nav collapses behind the burger instead of vanishing.
     Closed = display:none, so it stays out of the tab order until opened. */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(27, 28, 31, .08);
    padding: 4px 20px 12px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
  }
  .nav-links a:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .logo img { height: 26px; }
  .btn-long { display: none; }
  .btn-short { display: inline; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero-stats { gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}