/* =====================================================================
   FITCOM PERSON PROFILE CARD  (Kelvin signed 2026-10-11:
   99_Inbox/chatgpt-out/fitcom/2026-10-11-founder-onecard-desktop-mobile.png,
   then "remove the letter markers, plain titles only")
   Same markup in three places:
     - Fitcom App coach page (Edit Profile, iframe srcdoc)  -> mobile stack
     - fitcomfitness.com person pages on phones              -> mobile stack
     - fitcomfitness.com person pages on desktop (.fpc--wide) -> photo and
       action card sticky on the left, everything else on the right
   Themes: .fpc--dark = HQ, .fpc--light = coach team.
   Order: photo with name and role over it, G quote, N line, HQ numbers,
   ONE card holding the CHANGE topics (C, H, A, E) split by hairlines with
   plain bold titles, a moments card, the orange closing button. On desktop
   the host page's aside (Quick facts) sits under the photo, sticky.
   Scoped under .fpc so it cannot leak into the host page.
   ===================================================================== */
.fpc{
  --fpc-bg:#FFFFFF; --fpc-card:#EFF0F0; --fpc-ink:#262626; --fpc-body:#58595B;
  --fpc-mute:#808083; --fpc-line:#CFD1D2; --fpc-accent:#F6921E;
  box-sizing:border-box; max-width:540px; margin:0 auto; padding:14px;
  display:flex; flex-direction:column; gap:16px;
  background:var(--fpc-bg); color:var(--fpc-ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.6; border-radius:24px; -webkit-font-smoothing:antialiased;
}
.fpc--dark{
  --fpc-bg:#262626; --fpc-card:#414042; --fpc-ink:#FFFFFF; --fpc-body:#CFD1D2;
  --fpc-mute:#A5A7AA; --fpc-line:#58595B;
}
.fpc *,.fpc *::before,.fpc *::after{ box-sizing:border-box; }
/* zero-specificity reset, so every component rule below wins */
.fpc :where(h1,h2,h3,p,ul,dl,dd,figure,blockquote){ margin:0; padding:0; }

/* mobile order: photo (with name), main, aside */
.fpc-side{ display:contents; }
.fpc-hero{ order:0; }
.fpc-main{ order:1; display:flex; flex-direction:column; gap:16px; }
.fpc-aside{ order:2; margin-top:16px; }

/* photo with name over the lower left */
.fpc-hero{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:var(--fpc-card); }
.fpc-hero img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.fpc-hero figcaption{ position:absolute; left:0; right:0; bottom:0; padding:80px 22px 20px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%); }

/* name and role (on the photo), quote, niche */
.fpc-name{ font-size:34px; line-height:1.05; font-weight:700; letter-spacing:-.02em; }
.fpc-role{ font-size:15px; line-height:1.4; margin-top:6px; opacity:.92; }
.fpc-head{ padding:4px 4px 0; }
.fpc-quote{ margin-top:0; font-size:22px; line-height:1.25; font-weight:700; color:var(--fpc-accent); letter-spacing:-.01em; }
.fpc-niche{ margin-top:6px; font-size:14px; color:var(--fpc-mute); }

/* numbers row */
.fpc-stats{ display:grid; grid-template-columns:repeat(3,1fr); padding:4px; }
.fpc-stats > div{ display:flex; flex-direction:column-reverse; padding:0 14px; }
.fpc-stats > div:first-child{ padding-left:0; }
.fpc-stats > div + div{ border-left:1px solid var(--fpc-line); }
.fpc-stats dd{ font-size:26px; line-height:1.15; font-weight:700; color:var(--fpc-ink); }
.fpc-stats dt{ font-size:13px; color:var(--fpc-mute); margin-top:2px; }

/* the topics card: one card, sections split by hairlines, plain titles */
.fpc-card{ background:var(--fpc-card); border-radius:20px; padding:4px 22px; }
.fpc-sec{ padding:20px 0; }
.fpc-sec + .fpc-sec{ border-top:1px solid var(--fpc-line); }
.fpc-title{ font-size:19px; line-height:1.3; font-weight:700; color:var(--fpc-ink); margin-bottom:10px; letter-spacing:-.01em; }
.fpc-sec p{ color:var(--fpc-body); }

/* C */
.fpc-value{ font-size:32px; line-height:1.1; font-weight:700; letter-spacing:-.02em; color:var(--fpc-ink) !important; }
.fpc-why{ margin-top:6px; font-size:14.5px; }

/* H: plain paragraphs */
.fpc-sec p + p{ margin-top:10px; }

/* A */
.fpc-a{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.fpc-a.is-single{ grid-template-columns:1fr; }
.fpc-a > div{ padding-right:14px; }
.fpc-a > div + div{ padding:0 0 0 14px; border-left:1px solid var(--fpc-line); }
.fpc-a h3{ font-size:14px; font-weight:700; color:var(--fpc-ink); margin-bottom:6px; }
.fpc-a ul{ list-style:none; }
.fpc-a li{ position:relative; padding-left:16px; font-size:14.5px; line-height:1.5; color:var(--fpc-body); }
.fpc-a li + li{ margin-top:4px; }
.fpc-a li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--fpc-accent); }
.fpc-count{ margin-top:14px; }
.fpc-count span{ display:block; font-size:13px; color:var(--fpc-mute); }
.fpc-count strong{ display:block; font-size:32px; line-height:1.1; font-weight:700; color:var(--fpc-accent); }

/* E */
.fpc-langs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; list-style:none; }
.fpc-langs li{ font-size:13px; line-height:1; padding:8px 16px; border-radius:999px; border:1px solid var(--fpc-line); color:var(--fpc-ink); }

/* moments card */
.fpc-moments{ background:var(--fpc-card); border-radius:20px; padding:20px 22px 22px; }
.fpc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.fpc-grid.is-three{ grid-template-columns:repeat(3,1fr); gap:8px; }
.fpc-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 25%; border-radius:12px; display:block; background:var(--fpc-bg); }

/* closing: orange button (website, links out) or orange banner (App, no link) */
.fpc-cta{ display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 22px; border-radius:16px;
  background:var(--fpc-accent); color:#fff; text-decoration:none; text-align:center; }
.fpc-cta strong{ display:block; font-size:16px; line-height:1.3; font-weight:700; }
.fpc-cta span{ display:block; font-size:13px; opacity:.92; margin-top:2px; }
.fpc-cta svg{ flex:none; width:18px; height:18px; }
a.fpc-cta:hover{ filter:brightness(.96); }

/* desktop (website only) */
@media (min-width:960px){
  .fpc--wide{ max-width:1200px; display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); column-gap:32px; padding:0; border-radius:0; align-items:start; }
  .fpc--wide .fpc-side{ display:flex; flex-direction:column; position:sticky; top:96px; }
  .fpc--wide .fpc-hero{ aspect-ratio:4/5; }
  .fpc--wide .fpc-aside{ margin-top:24px; }
  .fpc--wide .fpc-main{ gap:20px; }
  .fpc--wide .fpc-name{ font-size:52px; }
  .fpc--wide .fpc-role{ font-size:17px; }
  .fpc--wide .fpc-quote{ font-size:32px; }
  .fpc--wide .fpc-stats dd{ font-size:32px; }
  .fpc--wide .fpc-title{ font-size:21px; }
  .fpc--wide .fpc-card{ padding:6px 32px; }
  .fpc--wide .fpc-sec{ padding:26px 0; }
  .fpc--wide .fpc-moments{ padding:24px 32px 28px; }
}

@media (max-width:380px){
  .fpc{ padding:10px; } .fpc-name{ font-size:30px; } .fpc-value{ font-size:28px; } .fpc-quote{ font-size:20px; }
  .fpc-card,.fpc-moments{ padding-left:18px; padding-right:18px; }
}
/* phones: Experience and Certification stack, long lines are unreadable in two columns */
@media (max-width:480px){
  .fpc-a{ grid-template-columns:1fr; } .fpc-a > div{ padding-right:0; } .fpc-a > div + div{ border-left:0; padding:14px 0 0; margin-top:14px; border-top:1px solid var(--fpc-line); }
}