/* feet 10.11. (Seller 20 DEMAND, lib/fp2_board.php): the request board seen from outside — the strip (home, creator sign-up),
   the guest page /requests/, the hook list (home hero, sign-up, page) and the dashboard's weekly line. The portal's palette
   (#0062ff key, #0050d0 accent text, #e8f4ff stage), tonal surfaces without edges, Nunito heads; the dark theme below.
   Phones: the cards slide sideways (snap), every target ≥ 44 px; arrow links stay inline-block (never flex: m500 rule). */
.fgb, .fgb-page, .fgb-hook { --fgb-key: #0062ff; --fgb-acc: #0050d0; --fgb-band: #e8f4ff; --fgb-card: #FFFFFF; --fgb-ink: var(--ink, #0b1020);
  --fgb-ink-2: var(--ink-2, #3c465d); --fgb-soft: rgb(0 98 255 / .08); --fgb-live: #00b86b; }
html[data-theme="dark"] .fgb, html[data-theme="dark"] .fgb-page, html[data-theme="dark"] .fgb-hook { --fgb-key: #00b3ff; --fgb-acc: #5cc8ff;
  --fgb-band: #0e1528; --fgb-card: #172238; --fgb-soft: rgb(0 179 255 / .14); }

/* -- the hook: four short lines (0 % commission · buyers pay you directly · requests, not subscriptions · links) -- */
.fgb-hook { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.fgb-hook li { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 16px/1.25 'Nunito', var(--body, system-ui), sans-serif; color: var(--fgb-ink); }
.fgb-hook .pc-ico { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 999px; background: var(--fgb-soft); color: var(--fgb-key); }
.fp-hero .fgb-hook--hero { max-width: 560px; margin: 22px 0 0; }
.pn-joinhead .fgb-hook--join { margin: 14px 0 0; }
.pn-joinhead .fgb-hook--join li { font-size: 15px; }
@media (max-width: 760px) {
  .fgb-hook { gap: 8px 12px; }
  .fgb-hook li { font-size: 15px; }
  .fp-hero .fgb-hook--hero { margin: 14px 0 0; }
}
@media (max-width: 359px) { .fgb-hook { grid-template-columns: minmax(0, 1fr); } }

/* -- the sign-up's one line over the form -- */
.fgb-mini { display: block; margin: 14px 0 0; font: 700 15px/1.45 var(--body, system-ui), sans-serif; color: var(--ink, #0b1020); }
.fgb-mini .fgb__live { display: inline-block; vertical-align: 1px; margin-right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #00b86b; box-shadow: 0 0 0 4px rgb(0 184 107 / .18); }
.fgb-mini .fgb-mini__go { display: inline-block; padding: 12px 4px; margin-block: -12px; color: #0050d0; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .fgb-mini .fgb-mini__go { color: #5cc8ff; }

/* -- the strip -- */
.fgb { background: var(--fgb-band); color: var(--fgb-ink); }
.fgb--home { padding-block: 44px 40px; }
.fgb--join { margin: 24px 0 0; padding: 22px 20px 20px; border-radius: 22px; }
.fgb__wrap { min-width: 0; }
.fgb__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 14px/1.2 'Nunito', var(--body, system-ui), sans-serif; color: var(--fgb-acc); }
.fgb__live { width: 10px; height: 10px; border-radius: 50%; background: var(--fgb-live); box-shadow: 0 0 0 4px rgb(0 184 107 / .18); animation: fgbPulse 2.4s ease-in-out infinite; }
@keyframes fgbPulse { 50% { box-shadow: 0 0 0 7px rgb(0 184 107 / .06); } }
.fgb .fgb__h, .fgb-page .fgb__h { margin: 8px 0 0; font: 900 clamp(26px, 3vw, 36px)/1.12 'Nunito', var(--body, system-ui), sans-serif !important; letter-spacing: -.02em; color: var(--fgb-ink); text-transform: none; }
.fgb--join .fgb__h { font-size: 24px !important; }
.fgb-page .fgb__h--sm { font-size: 22px !important; }
.fgb__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; }
.fgb__fact { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1.35 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }
.fgb__fact .pc-ico { color: var(--fgb-key); flex: none; }
.fgb__p { margin: 10px 0 0; max-width: 640px; font: 500 16px/1.45 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }
.fgb__alt { margin: 14px 0 0; font: 500 15px/1.45 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }   /* night 1000 guest: the buyer door */
.fgb__alt a { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 700; color: var(--fgb-ink, inherit); text-decoration: underline; text-underline-offset: 3px; }
.fgb__cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.fgb--join .fgb__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.fgb-card { display: flex; flex-direction: column; height: 100%; min-height: 44px; border-radius: 18px; overflow: hidden; background: var(--fgb-card);
  color: var(--fgb-ink); text-decoration: none; box-shadow: 0 6px 18px rgb(10 42 107 / .07); transition: transform .15s ease, box-shadow .15s ease; }
.fgb .fgb-card, .fgb-page .fgb-card { padding: 0 !important; }   /* the guest pages' 44 px rule pads short links; a card is tall enough */
.fgb-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(10 42 107 / .12); }
.fgb-card:focus-visible { outline: 3px solid var(--fgb-acc); outline-offset: 3px; }
.fgb-card__pic { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #2a7fd6, #3a4f86); }
.fgb-card__pic--photos { background: linear-gradient(135deg, #a05b78, #5a5f73); }
.fgb-card__pic--custom { background: linear-gradient(135deg, #7d6bc4, #5a4a7e); }
.fgb-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fgb-card__body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.fgb-card__type { font: 700 13px/1.25 var(--body, system-ui), sans-serif; color: var(--fgb-acc); }
.fgb-card__budget { font: 900 24px/1.1 'Nunito', var(--body, system-ui), sans-serif; letter-spacing: -.01em; color: var(--fgb-ink); }
.fgb-card__size { font: 500 14px/1.3 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }
.fgb-card__left { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 600 13px/1.3 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }
.fgb-card__left .pc-ico { width: 14px; height: 14px; flex: none; }
.fgb-card.is-hot .fgb-card__left { color: #c2410c; }
html[data-theme="dark"] .fgb-card.is-hot .fgb-card__left { color: #ffb37a; }
.fgb__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 22px 0 0; }
.fgb__cta { min-height: 52px; padding-inline: 28px; }
.fgb__all { display: inline-block; padding: 12px 0; font: 700 16px/1.25 var(--body, system-ui), sans-serif; color: var(--fgb-acc); text-decoration: none; }
.fgb__all .pc-ico { display: inline-block; vertical-align: -3px; margin-left: 4px; }
.fgb__all:hover { text-decoration: underline; }
.fgb__note { margin: 12px 0 0; font: 500 14px/1.45 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }
html[data-theme="dark"] .fgb-card { box-shadow: none; }
@media (max-width: 1100px) { .fgb--home .fgb__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fgb--home { padding-block: 32px 30px; }
  /* phones: one sliding row, the next card peeks in */
  .fgb--home .fgb__cards, .fgb--join .fgb__cards { display: flex; gap: 10px; margin-top: 18px; margin-inline: -20px; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .fgb--home .fgb__cards::-webkit-scrollbar, .fgb--join .fgb__cards::-webkit-scrollbar { display: none; }
  .fgb--home .fgb__cards > li, .fgb--join .fgb__cards > li { flex: 0 0 42%; scroll-snap-align: start; }
  .fgb--join { margin-inline: 0; padding: 18px 16px 16px; }
  .fgb--join .fgb__cards { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .fgb__foot { flex-direction: column; align-items: stretch; gap: 4px; }
  .fgb__cta { width: 100%; justify-content: center; }
  .fgb__all { text-align: center; }
  .fgb__fact { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .fgb__live { animation: none; } .fgb-card { transition: none; } }

/* -- the guest page /requests/ -- */
.fgb-page { padding-block: 32px 56px; color: var(--fgb-ink); }
.fgb-page__head { padding-bottom: 8px; }
.fgb-page .fgb-page__h { margin: 10px 0 0; font: 900 clamp(32px, 4.4vw, 52px)/1.06 'Nunito', var(--body, system-ui), sans-serif !important; letter-spacing: -.02em; color: var(--fgb-ink); text-transform: none; }
.fgb-page__lede { margin: 12px 0 0; max-width: 680px; font: 500 18px/1.45 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }
.fgb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.fgb-stat { padding: 16px 18px; border-radius: 18px; background: var(--fgb-card); }   /* the guest page's ground is the stage blue: white tiles on it */
.fgb-stat dt { font: 700 14px/1.2 var(--body, system-ui), sans-serif; color: var(--fgb-acc); }
.fgb-stat dd { display: grid; gap: 2px; margin: 6px 0 0; }
.fgb-stat dd b { font: 900 28px/1.1 'Nunito', var(--body, system-ui), sans-serif; color: var(--fgb-ink); }
.fgb-stat dd span { font: 500 14px/1.35 var(--body, system-ui), sans-serif; color: var(--fgb-ink-2); }
.fgb-page__list, .fgb-page__how { margin-top: 36px; }
.fgb__cards--page { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fgb-hook--page { max-width: 720px; }
.fgb-page .fgb-empty { padding: 28px 24px; border-radius: 22px; background: var(--fgb-card); }
.fgb-page .fgb-empty .fgb__cta { margin-top: 18px; }
.fgb-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: none; }
.fgb-flow li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--fgb-card); font: 600 16px/1.4 var(--body, system-ui), sans-serif; color: var(--fgb-ink); }
.fgb-flow__n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fgb-key); color: #FFFFFF; font: 900 16px/1 'Nunito', sans-serif; }
html[data-theme="dark"] .fgb-flow__n { color: #061024; }
.fgb-page__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 24px 0 0; padding: 22px 24px; border-radius: 22px; background: var(--fgb-soft); }
.fgb-page__cta .fgb__p { margin-top: 4px; }
@media (max-width: 1180px) { .fgb__cards--page { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .fgb__cards--page { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fgb-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fgb-page { padding-block: 20px 40px; }
  .fgb-page__lede { font-size: 16px; }
  .fgb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fgb-stats > .fgb-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* AD 400 guest #R9: the third number took half a row beside a hole */
  .fgb-stat { padding: 14px; }
  .fgb-stat dd b { font-size: 24px; }
  .fgb__cards--page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fgb-flow { grid-template-columns: minmax(0, 1fr); }
  .fgb-page__cta { flex-direction: column; align-items: stretch; padding: 18px; }
  .fgb-page__cta .fgb__cta { width: 100%; justify-content: center; }
}
/* phones held sideways: two rows of cards stay readable (m500: landscape rules need the aspect guard) */
@media (max-height: 500px) and (min-aspect-ratio: 4/3) { .fgb--home .fgb__cards > li, .fgb--join .fgb__cards > li { flex-basis: 24%; } }

/* -- the creator dashboard's weekly line (templates/fn_home.php) -- */
.fgb-dash { margin-top: 10px; }