/* ═══════════════════════════════════════════════════════════════════════════
   PF THEME — extracted from productfaculty.com, 2026-09-01

   Every value here was measured out of the live pages in `_raw/`, not chosen.
   The count in each comment is how many times that literal appears across the
   home page, a course page, the checkout and the capstone showcase — so where
   two near-identical values exist, the winner is the one the site actually uses.

   What this is NOT: the Webflow stylesheet. productfaculty.com's Webflow CSS is
   ~1 MB of generated names (.text-block-347, .div-block-695, .link-53) bound to
   Webflow's own DOM; pasted over different markup it styles nothing. But the
   pages the boss cares about — home, the eight course pages, checkout, capstone
   — are not Webflow-designed at all. They are hand-written HTML inside Webflow
   embeds, already running on the small token system below. That system is the
   "old theme", and this file is all of it.

   Conflict to settle before this is used widely: `../../design-tokens.css`
   (locked 2026-08-10) explicitly retires #f5c518 as "the second yellow" in
   favour of #f5b301. The live site the boss wants is #f5c518. One of the two
   has to give.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Accent ──────────────────────────────────────────────────────────────
     One gold, two supporting states. --gold is the CTA fill and every
     highlighted number; --gold-dim is its hover; --gold-bright appears on the
     dark navy panels where the dimmer gold loses contrast.                   */
  --pf-gold:        #f5c518;   /* 33x — the accent */
  --pf-gold-dim:    #c9a010;   /* button hover, link hover */
  --pf-gold-bright: #ffd400;   /* 9x — accent on the deepest panels */
  --pf-gold-ink:    #0d1426;   /* 11x — the only text colour used on gold */

  /* Gold at low alpha: chip fills and chip borders, never a third colour. */
  --pf-gold-fill:   rgba(245, 197, 24, 0.08);   /* 14x */
  --pf-gold-edge:   rgba(245, 197, 24, 0.35);   /* 20x */
  --pf-gold-hover:  rgba(245, 197, 24, 0.40);   /* card border on hover */

  /* ── Surface ─────────────────────────────────────────────────────────────
     Four depths. --bg is the page, --panel lifts a section off it, --panel-2
     and --panel-3 are the two darker insets used for pricing and calendar.   */
  --pf-bg:      #080e1a;   /* 10x — page canvas */
  --pf-panel:   #0d1426;   /* 11x */
  --pf-panel-2: #111a2e;   /* 4x  */
  --pf-panel-3: #162138;   /* 2x  */

  /* ── Ink ─────────────────────────────────────────────────────────────────
     Body copy is #c2c2c2, not white. White is for headings and numbers only;
     using it for paragraphs is the single easiest way to make a page stop
     looking like productfaculty.com.                                        */
  --pf-ink:      #ffffff;
  --pf-sub:      #c2c2c2;                     /* 12x — body copy */
  --pf-faint:    rgba(255, 255, 255, 0.55);   /* 17x — captions, meta */
  --pf-fainter:  rgba(255, 255, 255, 0.45);   /* 33x — footnotes, struck prices */
  --pf-ghost:    rgba(255, 255, 255, 0.40);   /* 53x — the quietest readable text */

  /* ── Edges and fills ─────────────────────────────────────────────────────
     0.08 is the border, everywhere. 0.03 is the card fill. Everything else is
     a variation on those two and should be reached for only when one of them
     genuinely fails.                                                         */
  --pf-line:        rgba(255, 255, 255, 0.08);   /* 108x — THE border */
  --pf-line-soft:   rgba(255, 255, 255, 0.07);   /* 47x — inner dividers */
  --pf-line-strong: rgba(255, 255, 255, 0.14);   /* 18x — icon buttons */
  --pf-surface:     rgba(255, 255, 255, 0.03);   /* 24x — THE card fill */
  --pf-surface-2:   rgba(255, 255, 255, 0.05);   /* 16x — raised chip */
  --pf-surface-3:   rgba(255, 255, 255, 0.06);   /* 20x */
  --pf-surface-0:   rgba(255, 255, 255, 0.02);   /* 12x — barely-there inset */

  /* ── Status ──────────────────────────────────────────────────────────────
     Green says "enrolling / included / done". Rose is the deadline and price
     warning, and is NOT the same as the error red.                           */
  --pf-green:       #10b981;
  --pf-green-lit:   #34d399;   /* 11x — on dark panels */
  --pf-green-pale:  #a7f3d0;
  --pf-red:         #f87171;
  --pf-red-lit:     #ff8a80;
  --pf-rose:        #e59aac;   /* 13x — alumni / deadline copy */
  --pf-rose-bg:     #33101d;   /* the rose banner ground */
  --pf-rose-bg-2:   #1f0a12;
  --pf-amber-pale:  #fde68a;   /* founding-member deadline copy */

  /* ── Geometry ────────────────────────────────────────────────────────────  */
  --pf-r-card:   18px;   /* 27x — cards, panels */
  --pf-r-btn:    12px;   /* 21x — buttons, inputs */
  --pf-r-inset:  10px;   /* 15x — rows inside a card */
  --pf-r-pill:   999px;  /* 43x — every chip and badge */
  --pf-pad-card: 22px;

  /* ── Type ────────────────────────────────────────────────────────────────  */
  /* Outfit is the site face, Poppins the secondary. Both are loaded by the
     WebFont call in _components/head.html; the loader used to pull 25 families
     and draw six. Inter stays in the stack as the first fallback because it is
     self-hosted here, so a Google outage degrades to the old look rather than
     to Helvetica. */
  --pf-font:     Outfit, Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pf-font-alt: Poppins, Outfit, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Chip type is a fixed recipe, not a size choice — it is the same on every
     LIVE COHORT / PM / Enrolling now badge across the site. */
  --pf-chip-size:    10.5px;
  --pf-chip-weight:  800;
  --pf-chip-track:   1.4px;

  /* ── Motion ──────────────────────────────────────────────────────────────
     Cards lift 3px, buttons 2px. Nothing scales, nothing glows.              */
  --pf-lift-card: translateY(-3px);
  --pf-lift-btn:  translateY(-2px);
  --pf-ease:      0.2s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Components — the eight patterns every copied page is built from.
   Class names are new; the values are the live site's.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-root {
  background: var(--pf-bg);
  color: var(--pf-ink);
  font-family: var(--pf-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.pf-root *, .pf-root *::before, .pf-root *::after { box-sizing: border-box; }

/* Webflow's site-wide stylesheet is still loaded (the nav and footer need it) and
   it styles bare h1..h6, p and a — h1 comes out #575757 on a #080e1a page, which
   is unreadable. The live pages solve this by re-inheriting inside their own
   scope; this is the same reset, scoped to .pf-root. Without it every new page
   built from these components has grey headings. */
/* `:where()`, not `:is()` — this is a RESET and must lose every argument. With
   `:is()` it scores (0,1,1) and outranks any single class, so `.pf-btn--primary`
   and any page's own rule were being reset back to `color: inherit`: a gold
   button with gold-on-gold text, and a gradient headline painted flat white.
   `:where()` contributes zero, so it still beats bare-element rules from
   Webflow's stylesheet while losing to anything deliberate. */
.pf-root :where(h1, h2, h3, h4, h5, h6, p, summary, a, li, ul, ol, figure, blockquote) {
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.pf-root :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.pf-root p { color: var(--pf-sub); }

/* Card — the course card, the FAQ row, the testimonial, the calendar row. */
.pf-card {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-r-card);
  padding: var(--pf-pad-card);
  transition: transform var(--pf-ease), border-color var(--pf-ease);
}
.pf-card:hover {
  transform: var(--pf-lift-card);
  border-color: var(--pf-gold-hover);
}
a.pf-card { text-decoration: none; color: inherit; display: block; }

/* Chip — LIVE COHORT, PM, Fellowship exclusive, Enrolling now. */
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--pf-r-pill);
  font-size: var(--pf-chip-size);
  font-weight: var(--pf-chip-weight);
  letter-spacing: var(--pf-chip-track);
  border: 1px solid var(--pf-line-strong);
  color: var(--pf-fainter);
}
.pf-chip--gold  { background: var(--pf-gold-fill);  border-color: var(--pf-gold-edge);   color: var(--pf-gold); }
.pf-chip--green { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.30); color: var(--pf-green); }

/* The 6px dot that pulses inside a LIVE COHORT chip. */
.pf-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pf-green);
  animation: pfPulse 1.8s ease-in-out infinite;
}

/* Buttons. Primary is gold with dark ink — white on gold is 1.85:1 and is
   never used on the live site. */
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: var(--pf-r-btn);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--pf-ease), transform var(--pf-ease), border-color var(--pf-ease);
}
.pf-btn--primary { background: var(--pf-gold); color: var(--pf-gold-ink); }
.pf-btn--primary:hover { background: var(--pf-gold-dim); transform: var(--pf-lift-btn); }
.pf-btn--ghost { background: transparent; color: var(--pf-ink); border-color: var(--pf-line-strong); }
.pf-btn--ghost:hover { border-color: rgba(245,197,24,0.60); }

/* Round icon button — the ✕ on course pages. */
.pf-icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pf-surface-2);
  border: 1px solid var(--pf-line-strong);
  color: var(--pf-ink);
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
}
.pf-icon-btn:hover { border-color: rgba(245,197,24,0.60); }

/* Inset row — a line item inside a card (syllabus week, price row). */
.pf-row {
  background: var(--pf-surface-0);
  border: 1px solid var(--pf-line-soft);
  border-radius: var(--pf-r-inset);
  padding: 12px 16px;
}

/* Section rule — the hairline above a card footer. */
.pf-rule { border-top: 1px solid var(--pf-line-soft); padding-top: 12px; }

/* Field. */
.pf-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--pf-r-btn);
  background: var(--pf-surface-0);
  border: 1px solid var(--pf-line);
  color: var(--pf-ink);
  font-family: inherit;
  font-size: 16px;
}
.pf-input::placeholder { color: rgba(255,255,255,0.35); }
.pf-input:focus { outline: none; border-color: rgba(245,197,24,0.60); }

@keyframes pfPulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-card:hover, .pf-btn:hover { transform: none; }
  .pf-dot { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   One typeface, everywhere.

   Webflow's stylesheet hard-codes a different family on dozens of generic class
   names (Montserrat on .text-block-*, DM Sans, Ubuntu, Fira Sans, Proxima Nova
   on the older pages), which is why the copy rendered in six faces. Those
   classes are spread across the mirrored pages and cannot be edited one by one,
   so the family is set here and inherited.

   Scoped to `body` rather than to the page wrappers: on the mirrored pages
   <body> carries no class at all, and the nav sits outside .pf-fellowship — so
   a wrapper-scoped rule left the nav rendering in DM Sans while the page it sat
   on was Outfit.

   `!important` is needed, not lazy: the pages carry their own <style> blocks
   (`.pf-fellowship{font-family:Inter…}`, `.pfco-page{font-family:Inter…}`) which
   sit later in the document and win on source order at equal specificity. The
   redesign's own theme does the same thing for `.footer-general *`.
   ═══════════════════════════════════════════════════════════════════════════ */
body,
body :where(
  h1, h2, h3, h4, h5, h6, p, a, li, span, div, nav, header, footer, section,
  article, aside, main, button, input, textarea, select, label, td, th,
  blockquote, figcaption, summary, details, strong, em, small, i, b
) {
  font-family: var(--pf-font) !important;
}

/* Poppins keeps the places it was already used — author credentials and the
   small badge text on the legacy article pages. */
:is(.author-credentials, .bg-text) { font-family: var(--pf-font-alt) !important; }

/* Monospace stays monospace — code samples in the blog posts must not become
   a proportional face. */
.pf-root :is(code, pre, kbd, samp),
:is(.body, .pf-fellowship, .th) :is(code, pre, kbd, samp) {
  font-family: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, monospace !important;
}


/* Webflow's stylesheet ships `blockquote { border-left: 5px solid #e2e2e2 }`.
   On the light design that is a faint divider; on #080e1a it is a bright white
   bar down the side of every quote — 25 of them on /reviews alone. The padding
   goes with it, since it only existed to clear the bar. */
.pf-root blockquote {
  border-left: 0;
  padding-left: 0;
}