/* Fresh Grad Upgrade University: the public landing page (app/fresh-grads).
 * Everything is scoped under .fg so the engine styles loaded by the root
 * layout never fight it. Mobile first, light by default.
 *
 * Art direction: a bright white page with a faint lilac-blush tint on
 * alternate sections, plum ink, brand pink as the accent. The people are
 * AstroCat stickers (astrocat/), the AI agents are the little robot from
 * lib/fresh-grads/robot.mjs, both with the same white die-cut edge and a
 * soft plum shadow. Poppins for headings, Hanken Grotesk for reading.
 *
 * Flat colour only (owner, Nov 4): no gradients, no black or near-black
 * fills. The only radial-gradient left is the hero's dot grid, a pattern. */
body:has(.fg) { background: #FFFFFF; margin: 0; }

.fg {
  --paper: #FFFFFF;
  --tint: #FBF8FD;
  --blush: #FFF2F8;
  --ink: #1E1530;
  --body: #4B4160;
  --muted: #7A7090;
  --line: #ECE6F3;
  --pink: #FF2E93;
  --pink-ink: #D4157A;
  --pink-soft: #FFE4F1;
  --lilac: #8E78E8;
  --lilac-soft: #F1EDFD;
  --shadow: 0 1px 2px rgba(30, 21, 48, .05), 0 14px 34px -14px rgba(46, 26, 84, .16);
  --shadow-lg: 0 2px 4px rgba(30, 21, 48, .04), 0 30px 70px -24px rgba(46, 26, 84, .26);
  --sticker: drop-shadow(0 10px 14px rgba(56, 28, 96, .16)) drop-shadow(0 2px 3px rgba(56, 28, 96, .12));
  color: var(--body);
  background: var(--paper);
  font-family: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.fg *, .fg *::before, .fg *::after { box-sizing: border-box; }
.fg h1, .fg h2, .fg h3 { font-family: "Poppins", "Hanken Grotesk", sans-serif; color: var(--ink); margin: 0; text-wrap: balance; }
.fg h1, .fg h2 { font-weight: 600; letter-spacing: -0.035em; }
.fg h3 { font-weight: 600; letter-spacing: -0.015em; }
.fg p, .fg li { margin: 0; text-wrap: pretty; }
.fg a { color: var(--pink-ink); }
.fg img { max-width: 100%; }
.fg .nw, .fg .nw-name { white-space: nowrap; }
.fg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.fg :focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }

/* Team bar and notes */
.fg-teambar { background: #FFE14D; color: #1a1200; font-size: 14px; padding: 8px 16px; text-align: center; }
.fg-teambar a { color: #1a1200; font-weight: 700; text-decoration: underline; }
.fg-note { background: #FFE6F2; color: #C40058; border: 1px dashed #C40058; border-radius: 6px; padding: 1px 6px; font-weight: 600; font-size: .9em; }
.fg-note::before { content: "Team note: "; }

/* Top bar */
.fg-top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(236, 230, 243, .8); }
.fg-top-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.fg-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.fg-brand img { display: block; height: auto; }
.fg-brand-word { width: 132px; height: auto; display: block; }
/* Header (owner, Nov 4): the Upgrade University logo (our own white mark,
   tinted Final Upgrade purple for a light background), Log in and Register. */
.fg-uu-logo { width: 132px; height: auto; display: block; }
.fg-top-nav { display: flex; align-items: center; gap: 8px; }
@media (max-width: 380px) { .fg-uu-logo { width: 112px; } .fg-top-nav .fg-btn--sm { padding: 0 14px; } }

/* Buttons and chips */
/* One button system (owner, Nov 4: the two hero buttons did not match).
   Primary is filled pink, secondary is the same pill outlined in pink: same
   height, padding, font size and weight, always on one line. The outline is
   an inset ring, so it adds nothing to the size. --sm is the header size. */
.fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; background: var(--pink); color: #fff !important; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap; text-decoration: none !important; border: 0; border-radius: 999px; padding: 0 28px; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(255, 46, 147, .7); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.fg-btn:hover { background: #F2238A; transform: translateY(-1px); }
.fg-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.fg-btn--ghost { background: var(--paper); color: var(--pink-ink) !important; box-shadow: inset 0 0 0 2px var(--pink); }
.fg-btn--ghost:hover { background: var(--pink-soft); }
.fg-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; box-shadow: none; }
.fg-btn--ghost.fg-btn--sm { box-shadow: inset 0 0 0 2px var(--pink); }
.fg-btn--full { width: 100%; }
.fg-chip { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 12px; box-shadow: 0 1px 2px rgba(30, 21, 48, .04); }
.fg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft); animation: fg-pulse 2.4s infinite; flex: none; }
@keyframes fg-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 46, 147, 0); } }

/* Hero */
.fg-hero { position: relative; padding: 36px 0 64px; overflow: hidden; }
.fg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(142, 120, 232, .16) 1px, transparent 1.2px) 0 0 / 22px 22px; }
.fg-hero-grid { position: relative; display: grid; gap: 40px; }
.fg-hero-copy { display: grid; gap: 18px; justify-items: start; align-content: center; }
.fg-eyebrow { color: var(--pink-ink); font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; margin-top: 6px !important; }
.fg-hero h1 { font-size: clamp(40px, 11vw, 74px); line-height: 1.02; max-width: 11em; }
.fg-lede { color: var(--body); font-size: 18px; max-width: 32em; }
.fg-lede--strong { color: var(--ink); font-weight: 600; }
.fg-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 8px; width: 100%; max-width: 520px; }
.fg-cta { display: grid; grid-template-rows: auto auto; gap: 8px; align-content: start; }
.fg-cta-who { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.fg-cta .fg-btn { width: 100%; }
@media (max-width: 560px) { .fg-ctas { grid-template-columns: 1fr; gap: 18px; } }

/* Sections */
.fg-sec { padding: 72px 0; }
.fg-sec--alt { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fg-sec h2 { font-size: clamp(30px, 7.6vw, 50px); line-height: 1.08; margin-bottom: 18px; max-width: 16em; }
.fg-head { margin-bottom: 32px; }
.fg-head h2 { margin-bottom: 0; }
.fg-head .fg-p { margin-top: 16px !important; margin-bottom: 0 !important; }
.fg-kicker { color: var(--pink-ink); font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px !important; }
.fg-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--pink); flex: none; }
.fg-p { color: var(--body); font-size: 18px; max-width: 36em; margin-bottom: 16px !important; }
.fg-two { display: grid; gap: 36px; }

/* Stats */
.fg-stats2, .fg-stats3, .fg-ratings { display: grid; gap: 14px; }
.fg-stat, .fg-rating { display: grid; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.fg-stat-big { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 44px; line-height: 1; color: var(--ink); letter-spacing: -0.04em; }
.fg-stat-text { color: var(--body); font-size: 16px; }
.fg-stat--ring { grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.fg-ring { grid-column: 1; grid-row: 1; width: 96px; height: 96px; transform: rotate(-90deg); }
.fg-ring circle { fill: none; stroke-width: 11; }
.fg-ring-bg { stroke: var(--pink-soft); }
.fg-ring-fg { stroke: var(--pink); stroke-linecap: round; }
.fg-stat--ring .fg-stat-big { grid-column: 1; grid-row: 1; text-align: center; font-size: 25px; letter-spacing: -0.03em; }
.fg-stat--ring .fg-stat-text { grid-column: 2; grid-row: 1; }
.fg-source { color: var(--muted); font-size: 13px; padding: 0 4px; }

/* Less / more */
.fg-swap { display: grid; gap: 16px; }
.fg-swap-col { position: relative; border-radius: 26px; padding: 26px 24px 28px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fg-swap-art { height: 112px; display: flex; align-items: flex-end; gap: 0; margin: -8px 0 14px; }
.fg-swap-art img { height: 118px; width: auto; filter: var(--sticker); }
.fg-swap-art .fg-bot { width: 70px; margin: 0 -4px 0 0; }
.fg-swap-col h3 { font-size: 22px; margin-bottom: 16px; }
.fg-swap-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fg-swap-col li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--line); }
.fg-swap-col li::before { content: ""; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: center / 12px no-repeat; }
.fg-swap-col.is-less h3 { color: var(--muted); }
.fg-swap-col.is-less li { color: var(--muted); }
.fg-swap-col.is-less li::before { background-color: var(--lilac-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%238E78E8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fg-swap-col.is-more { background: var(--blush); border-color: #FFD3E8; }
.fg-swap-col.is-more li { color: var(--ink); font-weight: 600; border-top-color: #FFD9EA; }
.fg-swap-col.is-more li::before { background-color: var(--pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Cards */
.fg-grid3 { display: grid; gap: 16px; }
.fg-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); }
.fg-card h3 { font-size: 20px; line-height: 1.25; }
.fg-card p { color: var(--body); font-size: 16px; }
.fg-ico-tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pink-soft); margin-bottom: 6px; }
.fg-ico-tile svg { width: 26px; height: 26px; fill: none; stroke: var(--pink-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fg-proof { font-size: 14px; line-height: 1.45; color: var(--ink) !important; font-weight: 600; background: var(--tint); border-radius: 12px; padding: 10px 12px; margin-top: 6px !important; }
.fg-proof span { color: var(--pink-ink); font-weight: 700; font-size: 12px; margin-right: 6px; }
.fg-card--format { padding: 30px 26px; }
.fg-bigico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--lilac-soft); border: 1px solid #E6DFFA; margin-bottom: 8px; }
.fg-bigico svg { width: 36px; height: 36px; stroke: var(--lilac); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: rgba(142, 120, 232, .14); }
/* One numbering style across the page: a pink ring (path, programmes, cards). */
.fg-card-n, .fg-tier-n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; line-height: 1; color: var(--pink-ink); border: 2px solid var(--pink); background: var(--paper); }

/* Path: a real sequence, so it is numbered */
.fg-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.fg-path li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 26px; position: relative; }
.fg-path li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 50px; bottom: 4px; width: 2px; border-radius: 2px; background: #FFC9E3; }
.fg-path-n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: "Poppins", sans-serif; font-weight: 600; background: var(--paper); border: 2px solid var(--pink); color: var(--pink-ink); box-shadow: 0 0 0 6px var(--paper); position: relative; z-index: 1; }
.fg-path li:last-child .fg-path-n { background: var(--pink); color: #fff; }
.fg-path h3 { font-size: 19px; margin: 9px 0 4px; }
.fg-path p { color: var(--body); font-size: 16px; }

/* Founders, numbers and logos */
.fg-proofband { margin-top: 40px; display: grid; gap: 12px; }
.fg-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fg-stats3 .fg-stat { padding: 20px 8px; text-align: center; justify-items: center; align-content: start; }
.fg-stats3 .fg-stat-big { font-size: clamp(26px, 7vw, 48px); }
.fg-stats3 .fg-stat-text { font-size: 14px; color: var(--muted); }
.fg-rating { background: var(--pink-soft); border-color: #FFC9E3; box-shadow: none; }
.fg-rating .fg-stat-big { font-size: 34px; color: var(--pink-ink); }
.fg-rating .fg-stat-text { color: var(--ink); font-size: 15px; }
.fg-logos-label { margin-top: 44px !important; color: var(--muted); font-size: 15px; font-weight: 600; }
.fg-logos { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fg-logo { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; height: 76px; display: grid; place-items: center; padding: 12px 18px; }
.fg-logo img { max-width: 100%; max-height: 40px; object-fit: contain; }

/* Employers */
.fg-sec--employer { background: var(--blush); border-top: 1px solid #FFE0EE; border-bottom: 1px solid #FFE0EE; }
.fg-emp { display: grid; gap: 8px; align-items: end; margin-bottom: 32px; }
.fg-emp-cat { width: 130px; height: auto; justify-self: end; filter: var(--sticker); margin-top: -10px; }
.fg-sec--employer .fg-grid3 { margin-bottom: 30px; }
.fg-quoteish { color: var(--ink) !important; font-size: 21px !important; line-height: 1.45; font-weight: 600; font-family: "Poppins", sans-serif; letter-spacing: -0.01em; border-left: 3px solid var(--pink); padding-left: 18px; }

/* Form */
.fg-sec--form { position: relative; background: var(--tint); border-top: 1px solid var(--line); }
.fg-anchor { position: absolute; top: -60px; }
#join { scroll-margin-top: 62px; }
.fg-form-wrap { display: grid; gap: 30px; }
.fg-form-intro { display: grid; gap: 4px; justify-items: start; align-content: start; }
.fg-form-intro .fg-chip { margin-top: 8px; }
.fg-form-art { display: none; }
.fg-form { background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: 20px; display: grid; gap: 16px; box-shadow: var(--shadow-lg); position: relative; }
.fg-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.fg-tabs button { font: 600 15px/1.2 "Poppins", sans-serif; color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 11px 8px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.fg-tabs button.is-on { background: var(--pink); color: #fff; }
.fg-fields { display: grid; gap: 14px; }
.fg-field { display: grid; gap: 6px; }
.fg-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.fg-opt { font-weight: 500; color: var(--muted); }
.fg-field input, .fg-field select, .fg-field textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid #DDD5E8; border-radius: 12px; padding: 12px 14px; width: 100%; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.fg-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%237A7090' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.fg-field textarea { resize: vertical; min-height: 92px; }
.fg-field input:focus, .fg-field select:focus, .fg-field textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft); }
.fg-field.has-error input, .fg-field.has-error select, .fg-field.has-error textarea { border-color: #E5484D; }
.fg-err { color: #C8292F; font-size: 13px; font-weight: 600; }
.fg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fg-formmsg { background: #FFF1F1; border: 1px solid #F7C6C7; color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.fg-privacy { font-size: 13px; color: var(--muted); text-align: center; }
.fg-form--done { justify-items: center; text-align: center; padding: 44px 24px; }
.fg-form--done p { font-size: 19px; font-weight: 600; color: var(--ink); max-width: 26em; }
.fg-done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; box-shadow: 0 14px 30px -12px rgba(255, 46, 147, .8); }
.fg-done-mark svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* FAQ */
.fg-faq { display: grid; gap: 12px; }
.fg-faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 0 22px; box-shadow: 0 1px 2px rgba(30, 21, 48, .04); transition: box-shadow .2s ease; }
.fg-faq-item[open] { box-shadow: var(--shadow); }
.fg-faq-item summary { text-wrap: balance; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); padding: 20px 40px 20px 0; list-style: none; position: relative; }
.fg-faq-item summary::-webkit-details-marker { display: none; }
.fg-faq-item summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--pink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23D4157A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s ease; }
.fg-faq-item[open] summary::after { transform: rotate(45deg); }
.fg-faq-item p { color: var(--body); padding-bottom: 20px; }

/* Footer */
.fg-foot { border-top: 1px solid var(--line); padding: 32px 0 44px; color: var(--muted); font-size: 14px; }
.fg-foot-in { display: flex; align-items: center; gap: 18px; }
.fg-foot-in > div { display: grid; gap: 8px; }
.fg-foot-cat { width: 72px; height: auto; filter: var(--sticker); flex: none; }

/* Wider screens */
@media (min-width: 640px) {
  .fg-wrap { padding: 0 32px; }
  .fg-swap { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fg-swap-col { padding: 30px 32px 32px; }
  .fg-stats2 { grid-template-columns: 1fr 1fr; }
  .fg-stats2 .fg-source { grid-column: 1 / -1; }
  .fg-ratings { grid-template-columns: 1fr 1fr; }
  .fg-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fg-fields { grid-template-columns: 1fr 1fr; }
  .fg-field--wide { grid-column: 1 / -1; }
  .fg-form { padding: 30px; }
  .fg-faq { grid-template-columns: 1fr 1fr; align-items: start; }
  .fg-emp { grid-template-columns: minmax(0, 1fr) auto; }
  .fg-emp-cat { width: 210px; }
  }
@media (min-width: 900px) {
  .fg-hero { padding: 56px 0 72px; }
  .fg-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 56px; }
  .fg-sec { padding: 112px 0; }
  .fg-hero + .fg-sec { padding-top: 56px; }
  .fg-head { margin-bottom: 44px; }
  .fg-two { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
  .fg-stats2 { grid-template-columns: 1fr; }
  .fg-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .fg-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
  .fg-path li { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .fg-path li:not(:last-child)::after { left: 58px; right: 0; top: 22px; bottom: auto; width: auto; height: 2px; background: #FFC9E3; }
  .fg-path li:nth-child(3)::after { display: none; }
  .fg-form-wrap { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
  .fg-form-art { display: flex; align-items: flex-end; margin-top: 36px; position: relative; padding-bottom: 18px; }
  .fg-form-art::before { content: ""; position: absolute; left: 0; right: 30px; bottom: 0; height: 40px; border-radius: 50%; background: var(--pink-soft); border: 1px solid #FFC9E3; box-shadow: 0 16px 26px -12px rgba(255, 46, 147, .35); }
  .fg-form-art img { position: relative; height: 200px; width: auto; filter: var(--sticker); margin-bottom: 4px; }
  .fg-form-art .fg-bot { position: relative; width: 92px; margin-left: -8px; margin-bottom: 8px; }
  .fg-founders { gap: 16px; }
  .fg-quoteish { font-size: 24px !important; }
  .fg-emp-cat { width: 250px; margin-top: -40px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .fg-grid3 { grid-template-columns: 1fr 1fr; }
  .fg-grid3--fixed { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fg *, .fg *::before, .fg *::after { animation: none !important; transition: none !important; }
}

/* Breathing room (owner, Oct 31: "the entire page is very crowded, give it space").
   One block so the spacing pass can be read and tuned in one place. */
.fg { line-height: 1.7; }
.fg-hero { padding: 44px 0 88px; }
.fg-hero-grid { gap: 64px; }
.fg-hero-copy { gap: 24px; }
.fg-lede { max-width: 30em; }
.fg-ctas { margin-top: 18px; gap: 18px 20px; }
.fg-sec { padding: 96px 0; }
.fg-sec h2 { margin-bottom: 24px; }
.fg-head { margin-bottom: 48px; }
.fg-kicker { margin-bottom: 18px !important; }
.fg-p { margin-bottom: 22px !important; }
.fg-two { gap: 52px; }
.fg-stats2, .fg-stats3, .fg-ratings { gap: 18px; }
.fg-swap, .fg-grid3 { gap: 22px; }
.fg-card { padding: 32px 28px; gap: 14px; }
.fg-swap-col li { padding: 15px 0 15px 34px; }
.fg-path li { padding-bottom: 36px; }
.fg-faq { gap: 16px; }
.fg-proofband { margin-top: 56px; gap: 18px; }
.fg-logos-label { margin-top: 64px !important; }
.fg-logos { margin-top: 20px; gap: 14px; }
.fg-form-wrap { gap: 44px; }
.fg-form { gap: 20px; }
.fg-fields { gap: 18px; }
@media (min-width: 640px) {
  .fg-wrap { padding: 0 44px; }
  .fg-swap { gap: 28px; }
  .fg-founders { gap: 20px; }
}
@media (min-width: 900px) {
  .fg-wrap { max-width: 1240px; padding: 0 56px; }
  .fg-hero { padding: 88px 0 128px; }
  .fg-hero-grid { gap: 104px; }
  .fg-hero-copy { gap: 28px; }
    .fg-sec { padding: 152px 0; }
  .fg-hero + .fg-sec { padding-top: 96px; }
  .fg-head { margin-bottom: 72px; }
  .fg-two { gap: 104px; }
  .fg-grid3 { gap: 32px; }
  .fg-path { gap: 56px 40px; }
  .fg-form-wrap { gap: 104px; }
  .fg-founders { gap: 24px; }
  .fg-emp { margin-bottom: 56px; }
  .fg-sec--employer .fg-grid3 { margin-bottom: 48px; }
}

/* Headshots (owner, Nov 4: "use the circle but zoom out to the fullest
   possible to show our full heads"). One rule for every photo of a person:
   a circle that takes the photo's full width (the most a circle can zoom out
   and still fill), anchored near the top so hair is never cut. A photo whose
   head sits lower can set --headshot-y (0% is the very top). */
.fg-headshot { display: block; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; object-fit: cover; object-position: 50% var(--headshot-y, 8%); background: var(--blush); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line); }

/* The programmes (owner, Nov 4): four cards, one column on phones, 2 x 2 above
   (wide enough that no title leaves a word alone on its line).
   The first carries a small tilted "Free for students" sticker; the others
   show their price, never a "paid" label. */
.fg-tiers { display: grid; gap: 22px; }
.fg-card--tier { padding-top: 30px; align-content: stretch; grid-template-rows: auto auto auto 1fr auto; }
.fg-card--tier h3 { margin: 0; }
.fg-tier-level { color: var(--muted) !important; font-size: 14px !important; font-weight: 600; margin: 0; }
.fg-tier-price { color: var(--ink) !important; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px !important; }
.fg-card--tier.has-sticker { border-color: #FFC4E1; }
.fg-sticker { position: absolute; top: -13px; right: 18px; transform: rotate(4deg); background: var(--pink); color: #fff; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13px; line-height: 1; padding: 8px 13px; border-radius: 999px; box-shadow: 0 0 0 3px var(--paper), 0 8px 18px -8px rgba(255, 46, 147, .75); white-space: nowrap; }
.fg-logos--six { margin-bottom: 8px; }
@media (min-width: 640px) {
  .fg-tiers { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fg-logos--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .fg-tiers { gap: 32px; }
  .fg-logos--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* What placement support includes (Nov 4) */
.fg-placement-note { margin-top: 28px !important; max-width: 46em; }

/* ===== Design pass (owner, Nov 4) =====================================
   One block for the new pieces: the robots' base size, the hero layout and
   its comic reel, the product screens, the programme cards' cost and tracks,
   aligned card rows, the instructors, the logos and the login page. */

/* The robot (also in the less / more and form art) */
.fg-bot { display: block; width: 60px; filter: var(--sticker); }
.fg-bot svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Hero: headline left, the words and buttons right, the reel full width */
.fg-hero-side { display: grid; gap: 20px; justify-items: start; align-content: end; }
.fg-hero-vis { grid-column: 1 / -1; }
@media (min-width: 900px) { .fg-hero h1 { font-size: clamp(56px, 5.6vw, 76px); } .fg-hero-side { padding-bottom: 6px; } }

/* The comic reel: four equal panels, read left to right (2 x 2 on a phone) */
.fg-reel { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.fg-reel-panel { display: grid; grid-template-rows: 1fr auto; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 12px; box-shadow: var(--shadow); }
.fg-reel-panel.is-last { border-color: #FFC4E1; }
.fg-reel-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fg-reel-row { display: flex; align-items: center; gap: 8px; min-height: 58px; border-radius: 12px; padding: 4px 8px; background: var(--tint); }
.fg-reel-row--agent { background: var(--lilac-soft); }
.fg-reel-row--you { background: var(--pink); }
.fg-reel-art { display: flex; align-items: flex-end; height: 50px; flex: none; }
.fg-reel-art img { height: 50px; width: auto; filter: var(--sticker); }
.fg-reel-art .fg-bot { width: 34px; margin-right: -4px; }
.fg-reel-who { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ink); }
.fg-reel-row--agent .fg-reel-who { color: #5B45C6; }
.fg-reel-row--you .fg-reel-who { color: #fff; }
.fg-reel-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); margin: 0; }
.fg-reel-cap .fg-card-n { width: 30px; height: 30px; font-size: 13px; }
.fg-reel-panel.is-last .fg-reel-cap .fg-card-n { background: var(--pink); color: #fff; }
@media (min-width: 900px) {
  .fg-reel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
  .fg-reel-panel { padding: 16px; gap: 16px; }
  .fg-reel-row { min-height: 70px; padding: 6px 12px; gap: 12px; }
  .fg-reel-art, .fg-reel-art img { height: 62px; }
  .fg-reel-art .fg-bot { width: 42px; }
  .fg-reel-who { font-size: 14px; }
  .fg-reel-cap { font-size: 15px; }
}

/* Aligned card rows: on wide screens each card's title, text and footer
   line up with its neighbours' (subgrid), so a two-line title never pushes
   one card's text below the rest. */
@media (min-width: 900px) {
  .fg-grid3 { grid-auto-rows: auto; }
  .fg-card--skill { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
  .fg-card--format, .fg-card--emp { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
}

/* Product screens (PLATFORM): four windows, 2 x 2 */
.fg-screens { display: grid; gap: 22px; }
.fg-screen-card { margin: 0; display: grid; gap: 16px; align-content: start; }
.fg-screen-card figcaption { display: grid; gap: 6px; padding: 0 4px; }
.fg-screen-card h3 { font-size: 20px; }
.fg-screen-card figcaption p { font-size: 16px; color: var(--body); }
.fg-app { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); min-height: 252px; display: grid; grid-template-rows: auto 1fr; }
.fg-app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.fg-app-bar img { width: 96px; height: auto; display: block; }
.fg-app-bar span { font-size: 12px; font-weight: 700; color: var(--pink-ink); background: var(--pink-soft); border-radius: 999px; padding: 3px 10px; }
.fg-app-body { padding: 16px; display: grid; gap: 12px; align-content: start; background: var(--tint); font-size: 14px; line-height: 1.45; }
.fg-app-hi { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); }
.fg-app-task { background: var(--paper); border: 1px solid #E2DAFA; border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.fg-app-task strong { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.fg-app-task span { color: var(--body); }
.fg-app-task-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.fg-app-chip { font-size: 12px !important; font-weight: 700; color: #5B45C6 !important; background: var(--lilac-soft); border-radius: 999px; padding: 2px 9px; }
.fg-app-pts { font-size: 12px !important; font-weight: 700; color: var(--pink-ink) !important; }
.fg-app-progress { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fg-app-progress i, .fg-app-uni i { display: block; height: 8px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.fg-app-progress b, .fg-app-uni b { display: block; height: 100%; background: var(--pink); border-radius: 99px; }
.fg-app-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fg-app-col { font-size: 12px; font-weight: 700; color: var(--pink-ink); margin-bottom: 6px !important; }
.fg-app-skills ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fg-app-skills li { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.3; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; }
.fg-app-skills li i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #CFC4F5; flex: none; margin-top: 3px; }
.fg-app-skills li.is-done i { background: var(--pink); border-color: var(--pink); }
.fg-app-tabs { display: flex; gap: 6px; }
.fg-app-tabs span { font-size: 12px; font-weight: 700; color: var(--muted); border-radius: 999px; padding: 4px 12px; background: var(--paper); border: 1px solid var(--line); }
.fg-app-tabs span.is-on { background: var(--pink); border-color: var(--pink); color: #fff; }
.fg-app-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fg-app-board li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 36px; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.fg-app-board li.is-you { border-color: #FFC4E1; background: var(--blush); }
.fg-app-rank { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--pink-ink); border: 2px solid var(--pink); }
.fg-app-uni { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.fg-app-uni i { height: 6px; }
.fg-app-score { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); text-align: right; }
.fg-app-crew { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fg-app-crew li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-weight: 600; color: var(--ink); }
.fg-app-ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #5B45C6; background: var(--lilac-soft); }
.fg-app-crew em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--tint); border-radius: 999px; padding: 2px 9px; }
.fg-app-crew em.is-done { color: var(--pink-ink); background: var(--pink-soft); }
@media (min-width: 760px) { .fg-screens { grid-template-columns: 1fr 1fr; gap: 32px; } .fg-screen-card { grid-row: span 2; grid-template-rows: subgrid; row-gap: 16px; } }
@media (min-width: 900px) { .fg-screens { gap: 40px 32px; } .fg-app-body { padding: 18px 20px; } }

/* Programme cards: price block at the foot of every card, the cumulative
   top-up under it, and Level 2's two tracks */
.fg-card--tier { grid-template-rows: auto auto 1fr auto; }
.fg-tier-body { display: grid; gap: 14px; align-content: start; }
.fg-tier-cost { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.fg-tier-topup { font-size: 14px !important; font-weight: 600; color: var(--pink-ink) !important; }
.fg-tracks { display: grid; gap: 8px; }
.fg-tracks-label { font-size: 13px !important; font-weight: 700; color: var(--muted) !important; }
.fg-tracks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fg-tracks li { display: grid; gap: 2px; background: var(--lilac-soft); border: 1px solid #E2DAFA; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--body); }
.fg-tracks li strong { font-family: "Poppins", sans-serif; font-weight: 600; color: #5B45C6; font-size: 15px; }
@media (min-width: 640px) {
  .fg-tiers { grid-auto-rows: auto; }
  .fg-card--tier { grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; }
}

/* Logos: every file trimmed to its mark; each logo's height is set by its
   shape (--logo-f from the page), capped by the box on both sides, so a
   stacked mark and a long wordmark carry the same weight. */
.fg-logo { height: 84px; padding: 10px 14px; --logo-k: 44px; }
.fg-logo img { width: auto; height: calc(var(--logo-k) * var(--logo-f, .6) * 1.6); max-height: 72%; max-width: 84%; object-fit: contain; }
@media (min-width: 640px) { .fg-logo { height: 104px; --logo-k: 54px; } }

/* The form's doors: line icons, same family as the skill icons */
.fg-door-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Login page */
.fg-login-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--tint); }
.fg-login { display: grid; place-items: center; padding: 56px 16px 72px; }
.fg-login-card { width: 100%; max-width: 440px; background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: 32px 24px; box-shadow: var(--shadow-lg); display: grid; gap: 14px; position: relative; }
.fg-login-cat { width: 84px; height: auto; filter: var(--sticker); position: absolute; top: -46px; right: 18px; }
.fg-login-card h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; max-width: 12em; }
.fg-login-card .fg-p { margin: 0 !important; font-size: 16px; }
.fg-login-form { display: grid; gap: 16px; margin-top: 8px; }
.fg-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fg-linkbtn { font: inherit; font-size: 14px; font-weight: 600; color: var(--pink-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.fg-linkbtn:hover { text-decoration: underline; }
.fg-login-form .fg-formmsg { background: var(--pink-soft); border-color: #FFC9E3; }
.fg-login-links { display: grid; gap: 10px; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--line); }
.fg-login-links a { font-weight: 600; font-size: 15px; line-height: 1.4; text-wrap: pretty; }
@media (min-width: 640px) { .fg-login-card { padding: 40px 36px; } }

/* Phone fits (Nov 4): one robot per row in the reel, the skills map as
   rows of chips, the instructors one above the other so each name stays on
   one line, and the three numbers as rows. */
.fg-reel-who { white-space: nowrap; }
@media (max-width: 899px) {
  .fg-reel-art .fg-bot + .fg-bot { display: none; }
  .fg-reel-who { font-size: 12.5px; }
}
@media (max-width: 559px) {
  .fg-app-skills { grid-template-columns: 1fr; gap: 10px; }
  .fg-app-skills ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .fg-app-skills li { white-space: nowrap; }
  .fg-app-col { margin-bottom: 4px !important; }
  .fg-stats3 { grid-template-columns: 1fr; }
  .fg-stats3 .fg-stat { grid-template-columns: 116px minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; padding: 16px 20px; column-gap: 12px; }
  .fg-stats3 .fg-stat-big { font-size: 34px; }
  .fg-stats3 .fg-stat-text { font-size: 15px; }
}
.fg-reel-cap > span:last-child { text-wrap: balance; }
.fg-app-chips { display: inline-flex; gap: 6px; align-items: center; }
.fg-app-free { font-size: 12px !important; font-weight: 700; color: #fff !important; background: var(--pink); border-radius: 999px; padding: 2px 9px; }


/* ===== First Role look (owner, Nov 4) ==================================
   The public page takes the design system of the First Role mock-up
   (Codex Version, assets/app.css): Inter for reading, Poppins for headings,
   flat pink hero band, bordered cards with no shadow, 2px pill buttons,
   small uppercase section labels, tighter section rhythm. */
.fg {
  --purple: #5B45C6; --muted: #6E6683; --line: #E8E3F2; --pink-ink: #D4157A; --hero: #FFF3F9;
  --shadow: none; --shadow-lg: none;
  font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.6;
}
.fg h1, .fg h2, .fg h3 { font-family: "Poppins", "Inter", sans-serif; letter-spacing: -0.015em; }
.fg h1 { font-weight: 800; }
.fg h2 { font-weight: 700; }
.fg h3 { font-weight: 700; }
.fg-sec h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; max-width: 22em; }
.fg-kicker { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-ink); margin-bottom: 10px !important; }
.fg-kicker::before { display: none; }
.fg-p, .fg-lede { font-size: 17px; }

/* Buttons: the mock-up's pill, 2px border, Inter bold */
.fg-btn { font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0; min-height: 48px; padding: 0 22px; border: 2px solid var(--pink); box-shadow: none; }
.fg-btn:hover { background: var(--pink); border-color: var(--pink); transform: none; }
.fg-btn--ghost, .fg-btn--ghost.fg-btn--sm { background: #fff; color: var(--pink-ink) !important; box-shadow: none; }
.fg-btn--ghost:hover { background: var(--pink-soft); border-color: var(--pink); }
.fg-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* Cards: border only */
.fg-card, .fg-swap-col, .fg-stat, .fg-rating, .fg-faq-item, .fg-founder, .fg-logo, .fg-reel-panel, .fg-app, .fg-form { box-shadow: none; }
.fg-card, .fg-swap-col, .fg-founder, .fg-reel-panel, .fg-app { border-radius: 18px; }
.fg-chip { box-shadow: none; }

/* Rhythm: tighter than before, still room to breathe */
.fg-sec { padding: 56px 0; }
.fg-head { margin-bottom: 28px; }
.fg-sec h2 { margin-bottom: 14px; }
@media (min-width: 900px) {
  .fg-sec { padding: 80px 0; }
  .fg-hero + .fg-sec { padding-top: 80px; }
  .fg-head { margin-bottom: 40px; }
  .fg-wrap { max-width: 1192px; padding: 0 16px; }
}
@media (min-width: 640px) and (max-width: 899px) { .fg-wrap { padding: 0 24px; } }

/* Header: the First Role lockup */
.fg-top { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); }
.fg-top-in { min-height: 64px; height: auto; }
/* The lockup, option 04 "Fine rules" (owner, Nov 4): FIRST ROLE centred in
   brand pink between two 1px rules, scaled up on desktop with the rules
   kept at 1px. */
.fg-lockup { padding: 7px 0; }
.fg-lockup-in { width: 138px; display: grid; justify-items: center; align-content: center; gap: 4px; }
.fg-lockup-in img { width: 100%; height: auto; display: block; }
.fg-lockup-sub { display: flex; align-items: center; gap: 4px; font: 800 10px/1.12 "Inter", "Segoe UI", Arial, sans-serif; letter-spacing: .06em; color: #FF2D8F; white-space: nowrap; }
.fg-lockup-sub::before, .fg-lockup-sub::after { content: ""; width: 12px; height: 1px; background: currentColor; }
@media (min-width: 900px) { .fg-lockup-in { width: 168px; gap: 5px; } .fg-lockup-sub { font-size: 12.2px; gap: 5px; } .fg-lockup-sub::before, .fg-lockup-sub::after { width: 15px; } }
@media (max-width: 420px) { .fg-lockup-in { width: 108px; gap: 3px; } .fg-lockup-sub { font-size: 8px; gap: 3px; } .fg-lockup-sub::before, .fg-lockup-sub::after { width: 9px; } }
.fg-foot .fg-lockup { display: inline-block; margin-bottom: 12px; }

/* Hero: flat pink band, words left, AstroCat right */
.fg-hero { background: var(--hero); padding: 48px 0 44px; }
.fg-hero::before { display: none; }
.fg-hero-grid { gap: 28px; align-items: center; }
.fg-hero-copy { gap: 16px; }
.fg-hero h1 { font-size: clamp(36px, 9vw, 58px); line-height: 1.08; max-width: 12em; }
.fg-hero .fg-kicker { margin: 4px 0 0 !important; }
.fg-hero-art { display: flex; justify-content: center; }
.fg-hero-art img { height: 200px; width: auto; filter: var(--sticker); }
.fg-ctas { margin-top: 12px; }
@media (min-width: 900px) {
  .fg-hero { padding: 72px 0 64px; }
  .fg-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 40px; }
  .fg-hero-art img { height: 340px; }
}

/* Why it matters: the reel, then the HR Tech read */
.fg-shift { margin-top: 48px; }
.fg-sec .fg-reel { margin-top: 0; }

/* Instructors: the mock-up's wide cards, photo beside the name */
.fg-proof-intro { display: grid; gap: 8px; }
.fg-proof-intro > div:first-child { max-width: 46em; }
.fg-founders { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; margin-top: 8px; }
.fg-founder { margin: 0; grid-row: auto; display: grid; grid-template-rows: none; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: center; padding: 20px; background: #fff; border: 1px solid var(--line); }
.fg-founder .fg-headshot { width: 72px; margin: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.fg-founder figcaption { padding: 0; display: grid; gap: 2px; }
.fg-founder-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.fg-founder-role { font-size: 13.5px; line-height: 1.4; color: var(--muted); font-weight: 500; }
.fg-founder-line { grid-column: 1 / -1; font-style: normal; font-size: 15px; line-height: 1.55; color: var(--body); }
@media (min-width: 760px) {
  .fg-founders { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fg-founder { grid-template-columns: 84px minmax(0, 1fr); padding: 22px 24px; }
  .fg-founder .fg-headshot { width: 84px; }
  .fg-founder-name { font-size: 17px; }
}
.fg-proofband { margin-top: 40px; }
/* Reel captions on top (owner, Nov 4): read the step, then the picture.
   Panels in a row share rows (subgrid), so the four captions line up. */
.fg-reel { grid-auto-rows: auto; row-gap: 12px; }
.fg-reel-panel { grid-row: span 2; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
.fg-reel-cap { align-self: start; }
@media (min-width: 900px) { .fg-reel { row-gap: 16px; } .fg-reel-panel { row-gap: 16px; } }

/* ===== Fun (owner, Nov 4: "do you know what fun means?") ===============
   The Fun / Serious switch, the price ladder, the placement timeline, the
   university leaderboard with its podium and the team mission card.
   Serious mode swaps the pink accent for purple and turns motion off. */
.fg[data-mode="serious"] { --pink: #5B45C6; --pink-ink: #3F2E9C; --pink-soft: #F1EDFD; --hero: #F1EDFD; --blush: #F7F4FE; }
.fg[data-mode="serious"] .fg-sticker { transform: none; }
.fg[data-mode="serious"] .fg-confetti { display: none; }
.fg-mode { display: inline-flex; border: 1px solid #E2DAFA; border-radius: 999px; padding: 3px; background: var(--tint); margin-right: 4px; }
.fg-mode button { border: 0; background: transparent; font: 700 13px "Inter", sans-serif; padding: 0 12px; min-height: 32px; border-radius: 999px; color: var(--body); cursor: pointer; }
.fg-mode button[aria-pressed="true"] { background: var(--pink); color: #fff; }
@media (max-width: 520px) { .fg-mode button { padding: 0 8px; font-size: 12px; min-height: 30px; } .fg-top-nav { gap: 6px; } .fg-top-nav .fg-btn--sm { padding: 0 12px; font-size: 13px; min-height: 36px; } .fg-lockup-in { width: 96px; } }
@media (max-width: 380px) { .fg-top-nav .fg-btn--ghost { display: none; } }

/* Price ladder: a staircase of bars, each step includes the last */
.fg-ladder2 { margin: 32px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.fg-ladder2 figcaption { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 14px; }
.fg-ladder2 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fg-ladder2 li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fg-ladder2-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.fg-ladder2-bar { display: flex; height: 22px; border-radius: 8px; background: var(--tint); overflow: hidden; }
.fg-ladder2-bar i { display: block; height: 100%; }
.fg-ladder2-bar .is-in { background: #CFC4F5; }
.fg-ladder2-bar .is-top { background: var(--pink); }
.fg-ladder2-bar .is-free { width: 4%; background: var(--pink); }
.fg-ladder2-price { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.fg-ladder2-price strong { color: var(--ink); }
.fg-ladder2-price em { font-style: normal; font-weight: 700; color: var(--pink-ink); }
@media (min-width: 760px) {
  .fg-ladder2 { padding: 26px 30px; }
  .fg-ladder2 li { grid-template-columns: 250px minmax(0, 1fr) 290px; align-items: center; gap: 16px; }
  .fg-ladder2-price { flex-wrap: nowrap; white-space: nowrap; }
}

/* Placement as a timeline: the numbers sit on one line */
@media (min-width: 900px) {
  .fg-timeline { position: relative; }
  .fg-timeline::before { content: ""; position: absolute; left: 40px; right: 40px; top: 47px; height: 2px; background: #FFC9E3; z-index: 0; }
  .fg-timeline .fg-card { z-index: 1; }
}

/* The fun pieces sit side by side under the two screens */
.fg-fun { display: grid; gap: 22px; margin-top: 32px; }
@media (min-width: 1000px) { .fg-fun { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.fg-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* Leaderboard */
.fg-board { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 18px; }
.fg-board-head h3 { font-size: 20px; margin-bottom: 4px; }
.fg-board-head p { font-size: 15px; color: var(--body); }
.fg-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.fg-podium li { display: grid; justify-items: center; text-align: center; gap: 6px; }
.fg-podium strong { font-family: "Poppins", sans-serif; font-size: 13px; line-height: 1.25; color: var(--ink); min-height: 2.5em; display: flex; align-items: flex-end; }
.fg-podium-pts { font-weight: 700; font-size: 14px; color: var(--pink-ink); }
.fg-trophy { width: 40px; height: 40px; }
.fg-podium-1 .fg-trophy { width: 56px; height: 56px; }
.fg-crest { width: 38px; height: 38px; border-radius: 12px 12px 16px 16px; display: grid; place-items: center; font: 800 13px "Inter", sans-serif; color: #fff; }
.fg-crest--sm { width: 30px; height: 30px; font-size: 11px; border-radius: 9px 9px 12px 12px; }
.fg-podium-step { width: 100%; display: grid; place-items: center; background: var(--tint); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; }
.fg-podium-1 .fg-podium-step { height: 86px; background: var(--pink-soft); border-color: #FFC9E3; }
.fg-podium-2 .fg-podium-step { height: 62px; }
.fg-podium-3 .fg-podium-step { height: 44px; }
.fg-medal { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 14px "Inter", sans-serif; color: #fff; background: var(--medal); box-shadow: 0 0 0 3px #fff; }
.fg-board-rest { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fg-board-rest li { display: grid; grid-template-columns: 24px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; font-size: 14px; }
.fg-board-rank { font-weight: 800; color: var(--muted); text-align: center; }
.fg-board-name { font-weight: 600; color: var(--ink); }
.fg-board-pts { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.fg-awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .fg-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fg-awards em { white-space: nowrap; }
.fg-awards li { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #FFD9EA; border-radius: 14px; padding: 8px 10px; }
.fg-awards strong { display: block; font-size: 13px; color: var(--ink); line-height: 1.25; }
.fg-awards em { display: block; font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.3; }
.fg-award-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); }
.fg-award-ico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fg[data-mode="fun"] .fg-awards li:hover .fg-award-ico { transform: rotate(-8deg) scale(1.06); transition: transform .2s ease; }

/* Team mission game card */
.fg-mission { position: relative; overflow: hidden; background: #fff; border: 2px solid #E2DAFA; border-radius: 18px; padding: 20px; display: grid; gap: 16px; }
.fg-mission.is-done { border-color: var(--pink); }
.fg-mission-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fg-mission-boss { font: 800 12px "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #5B45C6; border-radius: 999px; padding: 4px 11px; }
.fg-mission-timer { font: 700 13px "Inter", sans-serif; color: var(--pink-ink); background: var(--pink-soft); border-radius: 999px; padding: 4px 11px; font-variant-numeric: tabular-nums; }
.fg-mission-main { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.fg-mission-ring { width: 96px; height: 96px; }
.fg-mission-ring circle { fill: none; stroke-width: 10; }
.fg-mission-ring .bg { stroke: var(--lilac-soft); }
.fg-mission-ring .fg { stroke: var(--pink); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .8s ease; }
.fg-mission-ring .shield { fill: var(--lilac-soft); stroke: #5B45C6; stroke-width: 3; }
.fg-mission-ring .tick { fill: none; stroke: #5B45C6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .25; }
.fg-mission.is-done .fg-mission-ring .tick { opacity: 1; stroke: var(--pink); }
.fg-mission-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fg-mission-copy h3 { font-size: 20px; margin: 2px 0 4px; }
.fg-mission-copy p { font-size: 14.5px; }
.fg-mission-count { font-weight: 700; color: var(--ink); margin-top: 6px !important; }
.fg-mission-crew { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fg-mission-crew li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.fg-mission-crew strong { display: block; font-size: 14px; color: var(--ink); }
.fg-mission-crew em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.fg-mission-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 12px "Inter", sans-serif; color: #5B45C6; background: var(--lilac-soft); border: 2px solid #fff; box-shadow: 0 0 0 1px #E2DAFA; }
.fg-mission-crew li.is-done .fg-mission-ava { background: var(--pink); color: #fff; box-shadow: 0 0 0 1px var(--pink); }
.fg-mission-state { font-size: 12px; font-weight: 700; color: var(--muted); }
.fg-mission-crew li.is-done .fg-mission-state { color: var(--pink-ink); }
.fg-mission-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fg-mission-xp { font-weight: 800; font-size: 14px; color: #5B45C6; background: var(--lilac-soft); border-radius: 999px; padding: 5px 12px; }
.fg-mission-badge { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 13px; color: var(--muted); border: 1px dashed #CFC4F5; border-radius: 999px; padding: 4px 12px; }
.fg-mission-badge svg { width: 16px; height: 16px; fill: #CFC4F5; }
.fg-mission-badge.is-on { color: #fff; background: #E8A100; border: 1px solid #E8A100; }
.fg-mission-badge.is-on svg { fill: #fff; }
.fg[data-mode="fun"] .fg-mission-badge.is-on { animation: fg-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fg-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.fg-mission-win { font-weight: 800; font-size: 14px; color: var(--pink-ink); }
@media (min-width: 640px) { .fg-board, .fg-mission { padding: 26px; } .fg-podium strong { font-size: 14px; } }

/* The programme, three stages (owner, Nov 4, final): one row of three equal
   cards from 900 up (one column below, never two and one). The level line
   carries the stage and, on Stage 1, its hours. */
.fg-tiers { grid-template-columns: 1fr; }
@media (min-width: 640px) { .fg-tiers { grid-template-columns: 1fr; } .fg-card--tier { grid-row: auto; grid-template-rows: auto auto 1fr auto; } }
@media (min-width: 900px) {
  .fg-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .fg-card--tier { grid-row: span 4; grid-template-rows: subgrid; }
}
.fg-tier-level { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--pink-ink) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px !important; }
.fg-tier-level span { text-transform: none; letter-spacing: 0; color: #5B45C6; background: var(--lilac-soft); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; }
.fg-tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fg-tier-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--body); }
.fg-tier-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.fg-tier-price { font-size: 17px !important; }

/* Rhythm (owner, Nov 4: "cramped again"): every section gets the same
   generous padding, at least 120px between sections on desktop and 72px on
   a phone, and the reel and "What we hear on stage" sit apart as if they
   were two sections. */
.fg-sec { padding: 72px 0; }
.fg-hero + .fg-sec { padding-top: 72px; }
.fg-shift { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--line); }
.fg-head { margin-bottom: 36px; }
.fg-ladder2, .fg-fun { margin-top: 48px; }
.fg-proofband { margin-top: 56px; }
.fg-logos-label { margin-top: 56px !important; }
@media (min-width: 900px) {
  .fg-sec { padding: 120px 0; }
  .fg-hero + .fg-sec { padding-top: 120px; }
  .fg-shift { margin-top: 120px; padding-top: 120px; }
  .fg-head { margin-bottom: 56px; }
  .fg-ladder2, .fg-fun { margin-top: 64px; }
  .fg-proofband { margin-top: 72px; }
  .fg-logos-label { margin-top: 72px !important; }
  .fg-sec--employer .fg-grid3 { margin-bottom: 56px; }
}

/* ===== Brand reset (owner, Nov 4: "it's drifted into pastels") ===========
   Source of truth: apps/keynote/brand/color_system.md, section 0 and the
   light-theme rules. Hero pink #ff2d8f leads, purple #7b2fff supports, ink
   #0c0c0e, warm off-white #f6f5f1, deep purple bands darker than #461e7f.
   On light the accents are saturated fills, thick borders, big type and
   crisp offset shadows; every pastel tint is retired (shadows and the ink-on-pink rule since retired by the flat block at the end). Small text on a pink
   fill is deep ink (#16060e, the keynote engine's AA rule); white text only
   on purple and deep purple, or as large display type on pink. */
.fg {
  --bg: #F6F5F1; --paper: #FFFFFF; --tint: #F6F5F1; --blush: #F6F5F1; --hero: #F6F5F1;
  --ink: #0C0C0E; --body: #26262C; --muted: #54555C; --line: #DAD7CE;
  --pink: #FF2D8F; --pink-ink: #D6006A; --on-pink: #16060E; --pink-soft: #FFFFFF;
  --purple: #7B2FFF; --purple-ink: #6D28D9; --deep: #2A0F55; --lilac: #7B2FFF; --lilac-soft: #FFFFFF;
  --pop: 0 0 0; --pop-sm: 0 0 0;
  background: var(--bg); color: var(--body);
}
body:has(.fg) { background: #F6F5F1; }
.fg h1, .fg h2, .fg h3 { color: var(--ink); }
.fg h1, .fg-sec h2 { font-weight: 800; }
.fg-kicker { color: var(--pink-ink); }
.fg a { color: var(--pink-ink); }
.fg-p, .fg-lede { color: var(--body); }
.fg-source { color: var(--muted); }

/* Sections: off-white, with full bands of pink and deep purple between */
.fg-sec, .fg-sec--form { background: var(--bg); border: 0; }
.fg-sec + .fg-sec:not(.fg-band) { border-top: 1px solid var(--line); }
.fg-band + .fg-sec, .fg-sec + .fg-band { border-top: 0; }
.fg-band--pink { background: var(--pink); }
.fg-band--deep { background: var(--deep); }
.fg-band .fg-head h2, .fg-band .fg-two h2, .fg-band .fg-emp-copy h2 { color: #fff; }
.fg-band--pink .fg-kicker { color: var(--deep); }
.fg-band--pink .fg-head .fg-p, .fg-band--pink .fg-source { color: var(--on-pink); }
.fg-band--deep .fg-kicker { color: var(--pink); }
.fg-band--deep .fg-head .fg-p, .fg-band--deep .fg-two > div > .fg-p, .fg-band--deep .fg-emp-copy .fg-p { color: #fff; }
.fg-band--deep .fg-source { color: rgba(255, 255, 255, .82); }
.fg-band--deep .fg-quoteish { color: #fff !important; border-left-color: var(--pink); }
.fg-band--deep .fg-shift { border-top-color: rgba(255, 255, 255, .22); }

/* Buttons: solid pink (deep ink text, AA on neon) or solid purple (white) */
.fg-btn { background: var(--pink); border-color: var(--pink); color: var(--on-pink) !important; font-weight: 800;  }
.fg-btn:hover { background: var(--pink); border-color: var(--pink); color: #fff !important; }
.fg-btn--ghost, .fg-btn--ghost.fg-btn--sm { background: var(--purple); border-color: var(--purple); color: #fff !important;  }
.fg-btn--ghost:hover { background: var(--purple-ink); border-color: var(--purple-ink); }
.fg-btn--sm { box-shadow: none; }
.fg-band--deep .fg-btn {  }
.fg-mode { background: #fff; border: 1px solid var(--line); }
.fg-mode button { color: var(--ink); }
.fg-mode button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.fg-top { background: #fff; border-bottom: 1px solid var(--line); }
.fg-chip { background: #fff; border: 1px solid var(--line); color: var(--ink); }

/* Hero: big ink display type with a pink underline, AstroCat */
.fg-hero { background: var(--bg); }
.fg-hero h1 { font-weight: 900; }
.fg-hero h1::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 18px; background: var(--pink); border-radius: 2px; }
.fg-cta-who { color: var(--muted); }

/* Cards: white, thick purple border, crisp purple offset shadow */
.fg-card, .fg-swap-col, .fg-stat, .fg-faq-item, .fg-founder, .fg-reel-panel, .fg-app, .fg-board, .fg-mission, .fg-ladder2, .fg-form, .fg-login-card {
  background: #fff; border: 3px solid var(--purple); 
}
.fg-card--tier { border-color: var(--pink);  }
.fg-card--tier.has-sticker { border-color: var(--pink); }
.fg-band--deep .fg-card, .fg-band--deep .fg-stat, .fg-band--deep .fg-reel-panel { border-color: var(--pink);  }
.fg-band--pink .fg-card { border-color: var(--deep);  }
.fg-card h3, .fg-card p, .fg-reel-panel, .fg-stat-text { color: var(--ink); }
.fg-card p { color: var(--body); }


/* Number rings and tags: solid fills */
.fg-card-n, .fg-tier-n, .fg-path-n { background: var(--pink); border-color: var(--pink); color: var(--on-pink); }
.fg-band--pink .fg-card-n { background: var(--deep); border-color: var(--deep); color: #fff; }
.fg-band--pink .fg-path-n { background: var(--deep); border-color: var(--deep); color: #fff; box-shadow: 0 0 0 6px var(--pink); }
.fg-band--pink .fg-path li:last-child .fg-path-n { background: #fff; color: var(--deep); border-color: #fff; }
.fg-band--pink .fg-path li:not(:last-child)::after, .fg-band--pink .fg-timeline::before { background: var(--deep); }
.fg-band--pink .fg-path h3 { color: #fff; }
.fg-band--pink .fg-path p { color: var(--on-pink); }
.fg-timeline::before { background: var(--deep); }
.fg-sticker { background: var(--purple); color: #fff;  }

/* The comic reel: people white, agents solid purple, you solid pink */
.fg-reel-row { background: #fff; border: 2px solid var(--line); }
.fg-reel-row--agent { background: var(--purple); border-color: var(--purple); }
.fg-reel-row--agent .fg-reel-who { color: #fff; }
.fg-reel-row--you { background: var(--pink); border-color: var(--pink); }
.fg-reel-row--you .fg-reel-who { color: var(--on-pink); }
.fg-reel-cap { color: var(--ink); }
.fg-reel-panel.is-last { border-color: var(--pink); }
.fg-reel-panel.is-last .fg-reel-cap .fg-card-n { background: var(--purple); border-color: var(--purple); color: #fff; }

/* Stats and ratings */
.fg-ring-bg { stroke: #ECE9E1; }
.fg-ring-fg { stroke: var(--pink); }
.fg-stat-big { color: var(--ink); }
.fg-rating { background: var(--pink); border: 3px solid var(--pink);  }
.fg-rating .fg-stat-big, .fg-rating .fg-stat-text { color: var(--on-pink); }

/* Less / more */
.fg-swap-col.is-less { border-color: var(--ink);  }
.fg-swap-col.is-more { background: var(--pink); border-color: var(--pink);  }
.fg-swap-col.is-more h3, .fg-swap-col.is-more li { color: var(--on-pink); border-top-color: rgba(22, 6, 14, .18); }
.fg-swap-col.is-more li::before { background-color: var(--on-pink); }
.fg-swap-col.is-less h3, .fg-swap-col.is-less li { color: var(--muted); }
.fg-swap-col.is-less li::before { background-color: var(--line); }
.fg-swap-col li { border-top-color: var(--line); }

/* Icons: solid tiles, white strokes */
.fg-ico-tile { background: var(--pink); }
.fg-ico-tile svg { stroke: var(--on-pink); }
.fg-bigico { background: var(--purple); border-color: var(--purple); }
.fg-bigico svg { stroke: #fff; fill: none; }
.fg-proof { background: var(--bg); border: 2px solid var(--line); color: var(--ink) !important; }
.fg-proof span { color: var(--pink-ink); }

/* Programme */
.fg-tier-level { color: var(--pink-ink) !important; }
.fg-tier-level span { background: var(--purple); color: #fff; }
.fg-tier-list li::before { background-color: var(--pink); }
.fg-tracks li { background: #fff; border: 2px solid var(--purple); }
.fg-tracks li strong { color: var(--purple-ink); }
.fg-tier-topup { color: var(--pink-ink) !important; }
.fg-ladder2-bar { background: #ECE9E1; }
.fg-ladder2-bar .is-in { background: var(--purple); }
.fg-ladder2-bar .is-top { background: var(--pink); }
.fg-ladder2-price em { color: var(--pink-ink); }

/* Platform screens */
.fg-app-bar { border-bottom: 2px solid var(--line); }
.fg-app-bar span { background: var(--pink); color: var(--on-pink); }
.fg-app-body { background: var(--bg); }
.fg-app-task { border: 2px solid var(--purple); }
.fg-app-chip { background: var(--purple); color: #fff !important; }
.fg-app-pts { color: var(--pink-ink) !important; }
.fg-app-progress i, .fg-app-uni i { background: #ECE9E1; border-color: #ECE9E1; }
.fg-app-skills li { border: 2px solid var(--line); }
.fg-app-skills li i { border-color: var(--purple); }
.fg-app-skills li.is-done i { background: var(--pink); border-color: var(--pink); }
.fg-app-col { color: var(--pink-ink); }

/* Leaderboard */
.fg-podium-step { background: #fff; border: 3px solid var(--purple); border-bottom: 0; }
.fg-podium-1 .fg-podium-step { background: var(--pink); border-color: var(--pink); }
.fg-podium-pts { color: var(--pink-ink); }
.fg-board-rest li { background: #fff; border: 2px solid var(--line); }
.fg-awards li { border: 2px solid var(--purple); }
.fg-award-ico { background: var(--pink); }
.fg-award-ico svg { stroke: var(--on-pink); }

/* Team mission */
.fg-mission { border-color: var(--purple); }
.fg-mission.is-done { border-color: var(--pink);  }
.fg-mission-boss { background: var(--purple); }
.fg-mission-timer { background: var(--pink); color: var(--on-pink); }
.fg-mission-ring .bg { stroke: #ECE9E1; }
.fg-mission-ring .shield { fill: #fff; stroke: var(--purple); }
.fg-mission-ring .tick { stroke: var(--purple); }
.fg-mission-crew li { background: #fff; border: 2px solid var(--line); }
.fg-mission-ava { background: var(--purple); color: #fff; box-shadow: none; border: 0; }
.fg-mission-crew li.is-done .fg-mission-ava { background: var(--pink); color: var(--on-pink); box-shadow: none; }
.fg-mission-xp { background: var(--purple); color: #fff; }
.fg-mission-badge { border: 2px dashed var(--purple); color: var(--purple-ink); }
.fg-mission-badge svg { fill: var(--purple); }
.fg-mission-badge.is-on { background: #E8A100; border: 1px solid var(--line); color: var(--ink); }
.fg-mission-badge.is-on svg { fill: var(--ink); }

/* Instructors, logos, FAQ, form */
.fg-founder .fg-headshot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink); }
.fg-logo { background: #fff; border: 2px solid var(--line); }
.fg-faq-item {  }
.fg-faq-item[open] {  border-color: var(--pink); }
.fg-faq-item summary::after { background-color: var(--pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%2316060E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fg-form-art::before { background: var(--pink); border-color: var(--pink); box-shadow: none; }
.fg-sec--employer { border: 0; }
.fg-emp-cat { filter: var(--sticker); }
.fg-foot { background: #fff; border-top: 1px solid var(--line); }
.fg-login-page { background: var(--bg); }
.fg-login-form .fg-formmsg { background: #fff; border: 2px solid var(--pink); color: var(--ink); }
.fg-band--pink .fg-path h3 { color: var(--deep); }
.fg-medal { color: var(--ink); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }

/* One state system for missions and skills (owner, Nov 4, as in the FTC
   demo). Done: white, 6px pink left bar, solid pink check, pink XP pill.
   In progress: 2px purple border, purple ring. Locked: 1px #d9d6ce border,
   grey lock, no fill. Chips: Solo outlined ink, Team solid purple, skills
   outlined purple ink, no codes. Never green. */
.fg-state { background: #fff; border: 1px solid #D9D6CE; }
.fg-state.is-done { border: 1px solid #D9D6CE; border-left: 6px solid #FF2D8F; }
.fg-state.is-progress { border: 2px solid #7B2FFF; }
.fg-state.is-locked { background: transparent; border: 1px solid #D9D6CE; color: #54555C; }
.fg-state-ico { width: 16px; height: 16px; flex: none; }
.fg-app-skills li { align-items: center; }
.fg-app-skills li i { display: none; }
.fg-app-task.fg-state.is-progress { border: 2px solid #7B2FFF; }
.fg-chip-solo, .fg-chip-team, .fg-chip-skill { font-size: 12px !important; font-weight: 700; border-radius: 999px; padding: 2px 10px; line-height: 1.5; }
.fg-chip-solo { color: #0C0C0E !important; border: 1px solid var(--line); background: #fff; }
.fg-chip-team { color: #fff !important; background: #7B2FFF; border: 1.5px solid #7B2FFF; }
.fg-chip-skill { color: #6D28D9 !important; border: 1.5px solid #6D28D9; background: #fff; }
.fg-xp { font-size: 12px !important; font-weight: 800; color: #16060E !important; background: #FF2D8F; border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.fg-mission-foot .fg-xp { font-size: 14px !important; padding: 5px 12px; }
.fg-mission-crew li.fg-state { background: #fff; }
.fg-mission-crew li.is-done { border: 1px solid #D9D6CE; border-left: 6px solid #FF2D8F; }
.fg-mission-crew li.is-progress { border: 2px solid #7B2FFF; }
.fg-mission-state { display: inline-flex; align-items: center; gap: 6px; }
.fg-mission-crew li.is-done .fg-mission-state { color: #D6006A; }
.fg-mission-crew li.is-progress .fg-mission-state { color: #6D28D9; }

/* ===== The flat house system (owner, Nov 4; Desktop sheet
   UU-design-system-261104.html). Replaces the offset shadows and thick
   borders above: no shadows, cards white with a 1px hairline at most (none
   on a band), one accent per section, neutral chips. Button text is always
   white ("no black font"): pink buttons and pink fills use #d6006a so white
   text passes AA at any size; the deep-ink-on-pink rule is retired.
   Checked by scripts/check-uu-app.mjs. ===== */
.fg { --line: #E7E4DC; --on-pink: #FFFFFF; }
.fg-btn { background: var(--pink); border-color: var(--pink); color: #fff !important; box-shadow: none; }
.fg-btn:hover { background: #E8137F; border-color: #E8137F; color: #fff !important; }
.fg-btn--ghost, .fg-btn--ghost.fg-btn--sm { background: var(--purple); border-color: var(--purple); color: #fff !important; box-shadow: none; }
.fg-btn--ghost:hover { background: var(--purple-ink); border-color: var(--purple-ink); }
.fg-band--pink .fg-btn { background: #fff; border-color: #fff; color: var(--pink-ink) !important; }
.fg-band--pink .fg-btn:hover { background: var(--bg); border-color: var(--bg); }
.fg-mode { border: 1px solid var(--line); }
.fg-mode button[aria-pressed="true"] { background: var(--pink); color: #fff; }
.fg-top { border-bottom: 1px solid var(--line); }
.fg-chip { border: 1px solid var(--line); }
.fg-card, .fg-swap-col, .fg-stat, .fg-faq-item, .fg-founder, .fg-reel-panel, .fg-app, .fg-board, .fg-mission, .fg-ladder2, .fg-form, .fg-login-card, .fg-logo, .fg-awards li, .fg-tracks li, .fg-board-rest li, .fg-mission-crew li, .fg-app-skills li, .fg-app-task {
  background: #fff; border: 1px solid var(--line); box-shadow: none;
}
.fg-card--tier, .fg-card--tier.has-sticker, .fg-mission.is-done, .fg-faq-item[open], .fg-reel-panel.is-last { border-color: var(--line); box-shadow: none; }
.fg-band .fg-card, .fg-band .fg-stat, .fg-band .fg-reel-panel { border: 0; box-shadow: none; }
.fg-band--pink { background: var(--pink); }
.fg-band--pink .fg-kicker, .fg-band--pink .fg-head .fg-p, .fg-band--pink .fg-source, .fg-band--pink .fg-path p, .fg-band--pink .fg-path h3 { color: #fff; }
.fg-band--pink .fg-path-n, .fg-band--pink .fg-card-n { background: #fff; border-color: #fff; color: var(--pink-ink); box-shadow: none; }
.fg-band--pink .fg-path li:last-child .fg-path-n { background: #fff; color: var(--pink-ink); }
.fg-band--pink .fg-path li:not(:last-child)::after, .fg-band--pink .fg-timeline::before { background: #fff; }
.fg-band--deep .fg-kicker { color: #fff; }
.fg-band--deep .fg-btn { box-shadow: none; }
.fg-card-n, .fg-tier-n, .fg-path-n { background: var(--pink); border-color: var(--pink); color: #fff; }
.fg-sticker { background: var(--pink); color: #fff; box-shadow: none; }
.fg-reel-row--agent { background: #EBE8E0; border-color: #EBE8E0; }
.fg-reel-row--agent .fg-reel-who { color: var(--ink); }
.fg-reel-row--you { background: var(--pink); border-color: var(--pink); }
.fg-reel-row--you .fg-reel-who { color: #fff; }
.fg-reel-panel.is-last .fg-reel-cap .fg-card-n { background: var(--pink); border-color: var(--pink); }
.fg-rating { background: var(--pink); border: 0; box-shadow: none; }
.fg-rating .fg-stat-big, .fg-rating .fg-stat-text { color: #fff; }
.fg-swap-col.is-less { border-color: var(--line); }
.fg-swap-col.is-more { background: var(--pink); border-color: var(--pink); }
.fg-swap-col.is-more h3, .fg-swap-col.is-more li { color: #fff; border-top-color: rgba(255, 255, 255, .28); }
.fg-swap-col.is-more li::before { background-color: #fff; }
.fg-ico-tile { background: var(--pink); }
.fg-ico-tile svg { stroke: #fff; }
.fg-bigico { background: var(--pink); border-color: var(--pink); }
.fg-proof { border: 1px solid var(--line); }
.fg-tier-level span { background: #EBE8E0; color: var(--ink); }
.fg-tracks li strong { color: var(--ink); }
.fg-ladder2-bar .is-in { background: #D8D4CA; }
.fg-app-bar { border-bottom: 1px solid var(--line); }
.fg-app-bar span { background: var(--pink); color: #fff; }
.fg-app-chip { background: #EBE8E0; color: var(--ink) !important; }
.fg-app-skills li i { border-color: var(--line); }
.fg-podium-step { background: #EBE8E0; border: 0; }
.fg-podium-1 .fg-podium-step { background: var(--pink); }
.fg-award-ico svg { stroke: #fff; }
.fg-mission-boss { background: var(--deep); }
.fg-mission-timer { background: var(--pink); color: #fff; }
.fg-mission-ring .shield { stroke: var(--pink); }
.fg-mission-ring .tick { stroke: var(--pink); }
.fg-mission-ava { background: #EBE8E0; color: var(--ink); }
.fg-mission-crew li.is-done .fg-mission-ava { background: var(--pink); color: #fff; }
.fg-mission-xp { background: var(--pink); color: #fff; }
.fg-mission-badge { border: 0; background: #EBE8E0; color: var(--ink); }
.fg-mission-badge svg { fill: var(--muted); }
.fg-mission-badge.is-on { background: var(--pink); border: 0; color: #fff; }
.fg-mission-badge.is-on svg { fill: #fff; }
.fg-founder .fg-headshot { box-shadow: none; }
.fg-medal { box-shadow: none; }
.fg-faq-item summary::after { background-color: var(--pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fg-foot { border-top: 1px solid var(--line); }
.fg-login-form .fg-formmsg { border: 1px solid var(--pink-ink); }
.fg-state, .fg-state.is-locked { border: 1px solid var(--line); }
.fg-state.is-done { border: 1px solid var(--line); border-left: 6px solid var(--pink); }
.fg-state.is-progress, .fg-app-task.fg-state.is-progress, .fg-mission-crew li.is-progress { border: 1px solid var(--line); }
.fg-state.is-locked { background: #EFEDE7; border-color: #EFEDE7; }
.fg-mission-crew li.is-progress .fg-mission-state { color: var(--pink-ink); }
.fg-chip-solo, .fg-chip-team, .fg-chip-skill { color: var(--ink) !important; background: #EBE8E0; border: 0; }
.fg-xp { color: #fff !important; background: var(--pink); }

/* Stages 2 and 3 say plainly what they include (owner, Nov 4): a label above
   the price ("Stage 1 + Stage 2", "Stages 1 + 2 + 3"), then the total. */
.fg-tier-bundle { margin: 0 0 2px; font: 700 13px/1.3 "Inter", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) !important; }

/* ===== One pink (owner, Nov 4): every pink FILL is the bright brand pink
   #FF2D8F with white text, bold and at least 19px (AA large text). #D6006A
   is only for small pink text on white or off-white. Tiny labels inside the
   platform mock-ups sit on neutral fills instead. ===== */
.fg-btn { background: var(--pink); border-color: var(--pink); color: #fff !important; font-size: 19px; font-weight: 700; }
.fg-btn:hover { background: #E8137F; border-color: #E8137F; }
.fg-btn--sm { font-size: 19px; min-height: 44px; padding: 0 18px; }
.fg-btn--ghost, .fg-btn--ghost.fg-btn--sm { font-size: 19px; }
.fg-band--pink { background: var(--pink); }
.fg-band--pink .fg-btn { background: #fff; border-color: #fff; color: var(--pink-ink) !important; }
.fg-band--pink .fg-kicker, .fg-band--pink .fg-head .fg-p, .fg-band--pink .fg-source, .fg-band--pink .fg-path p, .fg-band--pink .fg-path h3, .fg-band--pink .fg-p { font-size: 19px !important; font-weight: 700; color: #fff; }
.fg-band--pink .fg-path-n, .fg-band--pink .fg-card-n { color: var(--pink); }
.fg-card-n, .fg-tier-n, .fg-path-n { background: var(--pink); border-color: var(--pink); color: #fff; font-size: 19px; font-weight: 800; }
.fg-sticker { background: var(--pink); font-size: 19px; font-weight: 800; }
.fg-reel-row--you { background: var(--pink); border-color: var(--pink); }
.fg-reel-row--you .fg-reel-who { font-size: 19px; font-weight: 700; }
.fg-reel-panel.is-last .fg-reel-cap .fg-card-n { background: var(--pink); border-color: var(--pink); }
.fg-rating { background: var(--pink); }
.fg-rating .fg-stat-text { font-size: 19px !important; font-weight: 700; }
.fg-swap-col.is-more { background: var(--pink); border-color: var(--pink); }
.fg-swap-col.is-more h3, .fg-swap-col.is-more li { font-size: 19px; font-weight: 700; }
.fg-app-bar span { background: #EBE8E0; color: var(--ink); }
.fg-podium-1 .fg-podium-step { background: var(--pink); color: #fff; font-size: 24px; font-weight: 900; }
.fg-mission-timer { background: #EBE8E0; color: var(--ink); }
.fg-mission-crew li.is-done .fg-mission-ava { background: var(--pink); color: #fff; font-size: 19px; }
.fg-mission-xp { background: #EBE8E0; color: var(--ink); }
.fg-mission-badge.is-on { background: #EBE8E0; color: var(--ink); }
.fg-mission-badge.is-on svg { fill: var(--pink); }
.fg-faq-item summary::after { background-color: var(--pink); }
.fg-xp { color: var(--ink) !important; background: #EBE8E0; }
.fg-mode button[aria-pressed="true"] { background: #EBE8E0; color: var(--ink); }
/* The secondary button stays solid purple with white text (it lost to the
   one-pink .fg-btn rule above). */
.fg-btn.fg-btn--ghost { background: var(--purple); border-color: var(--purple); color: #fff !important; }
.fg-btn.fg-btn--ghost:hover { background: var(--purple-ink); border-color: var(--purple-ink); }