.fg { --fg-red: #ec9a86; --fg-amber: #e9c47e; --fg-blue: #92bdec; --fg-green: var(--mint); }
.fg-kicker { margin: 0 0 14px; color: var(--mint); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.post-body .fg p, .post-body .fg li { font-size: .95rem; line-height: 1.5; }
.fg ol, .fg ul { list-style: none; margin: 0; padding: 0; }
/* chain */
.fg-chain { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fg-chain li { position: relative; background: var(--raise); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 12px; display: grid; gap: 4px; text-align: center; }
.fg-chain b { font-size: 1.7rem; line-height: 1; color: var(--snow); font-variant-numeric: tabular-nums; }
.fg-chain span { color: var(--mist); font-size: .88rem; }
.fg-chain em { font-style: normal; color: var(--sage); font-size: .78rem; }
.fg-chain li.goal { border-color: var(--fern); background: rgba(126,214,180,0.12); }
.fg-chain li.goal b { color: var(--glow); }
.fg-chain li:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--fern); font-size: .9rem; z-index: 1; }
@media (max-width: 640px) { .fg-chain { grid-template-columns: 1fr; } .fg-chain li { grid-template-columns: 64px 1fr; text-align: left; align-items: center; } .fg-chain li em { grid-column: 2; } .fg-chain li b { grid-row: span 2; text-align: center; } .fg-chain li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -15px; transform: none; } }
/* DISC */
.fg-quadwrap { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; gap: 8px; align-items: center; }
.fg-axis { color: var(--sage); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.fg-axis.top { grid-column: 2; grid-row: 1; } .fg-axis.bottom { grid-column: 2; grid-row: 3; }
.fg-axis.left { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); } .fg-axis.right { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; }
.fg-quad { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fg-quad > div { border-radius: 14px; padding: 16px; border: 1px solid; display: grid; gap: 6px; align-content: start; }
.fg-quad h5 { margin: 0; font-size: 1rem; color: var(--snow); display: flex; gap: 10px; align-items: center; }
.fg-quad h5 i { font-style: normal; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 600; color: var(--ink); }
.fg-quad p { margin: 0; color: var(--soft); }
.fg-quad p.how { color: var(--mist); }
.fg-quad .d { border-color: rgba(236,154,134,.5); background: rgba(236,154,134,.08); } .fg-quad .d h5 i { background: var(--fg-red); }
.fg-quad .i { border-color: rgba(233,196,126,.5); background: rgba(233,196,126,.08); } .fg-quad .i h5 i { background: var(--fg-amber); }
.fg-quad .s { border-color: rgba(126,214,180,.5); background: rgba(126,214,180,.08); } .fg-quad .s h5 i { background: var(--fg-green); }
.fg-quad .c { border-color: rgba(146,189,236,.5); background: rgba(146,189,236,.08); } .fg-quad .c h5 i { background: var(--fg-blue); }
@media (max-width: 560px) { .fg-quadwrap { grid-template-columns: 1fr; } .fg-axis { display: none; } .fg-quad { grid-column: 1; grid-template-columns: 1fr; } }
/* split bars */
.fg-bar { display: flex; height: 54px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); }
.fg-bar span { display: flex; align-items: center; padding: 0 14px; font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; }
.fg-bar .on { background: rgba(126,214,180,0.28); color: var(--snow); }
.fg-bar .off { background: var(--raise); color: var(--sage); }
.fg-bar + .fg-bar { margin-top: 10px; }
.fg-barlabel { margin: 14px 0 6px !important; color: var(--mist); font-size: .88rem !important; }
.fg-barlabel:first-of-type { margin-top: 0 !important; }
/* scorecard */
.fg-score { display: grid !important; gap: 8px; }
.fg-score li { display: grid; grid-template-columns: 14px 140px 1fr; gap: 12px; align-items: baseline; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fg-score .dot { width: 12px; height: 12px; border-radius: 50%; transform: translateY(1px); }
.fg-score .g .dot { background: var(--fg-green); } .fg-score .a .dot { background: var(--fg-amber); } .fg-score .r .dot { background: var(--fg-red); }
.fg-score b { color: var(--snow); font-weight: 500; }
.fg-score span:last-child { color: var(--soft); }
.fg-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0 !important; color: var(--sage); font-size: .82rem !important; }
.fg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.fg-verdict { margin: 14px 0 0 !important; padding: 12px 14px; border-left: 3px solid var(--fern); background: rgba(126,214,180,0.08); border-radius: 0 10px 10px 0; color: var(--mist) !important; }
@media (max-width: 560px) { .fg-score li { grid-template-columns: 14px 1fr; } .fg-score li span:last-child { grid-column: 2; } }
/* gantt */
.fg-gantt { display: grid !important; gap: 8px; }
.fg-gantt li { display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: center; }
.fg-gantt .lab { color: var(--mist); font-size: .9rem; }
.fg-gantt .lab small { display: block; color: var(--sage); font-size: .78rem; }
.fg-gantt .track { position: relative; height: 26px; background: var(--raise); border-radius: 8px; border: 1px solid var(--line); }
.fg-gantt .seg { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; background: rgba(126,214,180,0.35); }
.fg-gantt li.hot .seg { background: var(--fern); }
.fg-ticks { display: grid; grid-template-columns: 210px 1fr; gap: 12px; margin-top: 4px; }
.fg-ticks div { display: flex; justify-content: space-between; color: var(--sage); font-size: .74rem; }
@media (max-width: 560px) { .fg-gantt li, .fg-ticks { grid-template-columns: 1fr; gap: 4px; } .fg-ticks > span { display: none; } }
/* brain */
.fg-brain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg-brain > div { border-radius: 16px; padding: 18px; border: 1px solid; display: grid; gap: 8px; align-content: start; }
.fg-brain h5 { margin: 0; font-size: 1.05rem; color: var(--snow); }
.fg-brain .red { border-color: rgba(236,154,134,.55); background: rgba(236,154,134,.08); } .fg-brain .red h5 span { color: var(--fg-red); }
.fg-brain .green { border-color: rgba(126,214,180,.55); background: rgba(126,214,180,.08); } .fg-brain .green h5 span { color: var(--fg-green); }
.fg-brain ul { display: flex !important; flex-wrap: wrap; gap: 6px; }
.fg-brain ul li { font-size: .82rem !important; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--mist); }
.fg-brain p.role { margin: 4px 0 0; color: var(--mist); font-weight: 500; }
.fg-brain-band { grid-column: 1 / -1; text-align: center; padding: 12px; border-radius: 12px; background: var(--raise); color: var(--snow); font-weight: 500; }
@media (max-width: 560px) { .fg-brain { grid-template-columns: 1fr; } }
/* steps / timelines */
.fg-steps { display: grid !important; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; counter-reset: fgs; position: relative; }
.fg-steps li { position: relative; padding-top: 30px; }
.fg-steps li::before { content: ""; position: absolute; top: 9px; left: 0; right: -10px; height: 2px; background: var(--line-strong); }
.fg-steps li:last-child::before { right: 0; }
.fg-steps li::after { content: ""; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--deep); border: 2px solid var(--fern); }
.fg-steps li.hot::after { background: var(--fern); }
.fg-steps b { display: block; color: var(--glow); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.fg-steps strong { display: block; color: var(--snow); font-weight: 500; margin-bottom: 4px; }
.fg-steps span { color: var(--soft); font-size: .88rem; }
@media (max-width: 720px) { .fg-steps { grid-template-columns: 1fr; gap: 0; } .fg-steps li { padding: 0 0 18px 30px; } .fg-steps li::before { top: 14px; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; } .fg-steps li:last-child::before { display: none; } .fg-steps li::after { top: 2px; } }
/* lanes */
.fg-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg-lane { background: var(--raise); border: 1px solid var(--line-strong); border-radius: 16px; padding: 18px; }
.fg-lane h5 { margin: 0 0 4px; color: var(--snow); font-size: 1.02rem; }
.fg-lane > p { margin: 0 0 14px; color: var(--sage); }
.fg-lane ol { counter-reset: lane; display: grid; gap: 6px; }
.fg-lane li { counter-increment: lane; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 10px; background: var(--deep); color: var(--mist); }
.fg-lane li::before { content: counter(lane); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--fern); color: var(--glow); font-size: .8rem; }
.fg-lane li.leak { border: 1px dashed var(--fg-red); }
.fg-lane li small { display: block; color: var(--fg-red); font-size: .8rem; margin-top: 2px; }
@media (max-width: 640px) { .fg-lanes { grid-template-columns: 1fr; } }
/* stat bars */
.fg-stat { display: grid; gap: 12px; }
.fg-stat > div { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: center; }
.fg-stat .lab { color: var(--mist); font-size: .9rem; }
.fg-stat .track { height: 34px; background: var(--raise); border-radius: 10px; border: 1px solid var(--line); overflow: hidden; }
.fg-stat .fill { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-weight: 600; color: var(--ink); background: var(--fern); border-radius: 9px; min-width: 64px; }
.fg-stat .fill.low { background: var(--fg-red); }
@media (max-width: 560px) { .fg-stat > div { grid-template-columns: 1fr; gap: 4px; } }
/* AI stages */
.fg-tiles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fg-tiles li { background: var(--raise); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px; display: grid; gap: 4px; align-content: start; }
.fg-tiles b { color: var(--glow); font-size: .76rem; letter-spacing: .08em; }
.fg-tiles strong { color: var(--snow); font-weight: 500; line-height: 1.3; }
.fg-tiles span { color: var(--sage); font-size: .84rem; }
@media (max-width: 760px) { .fg-tiles { grid-template-columns: 1fr 1fr; } }
/* photos */
.sp-photo { margin: 26px 0 30px; }
.sp-photo img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line-strong); }
.sp-photo figcaption { margin-top: 10px; color: var(--sage); font-size: .88rem; line-height: 1.5; }
.sp-photo-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin: 26px 0 30px; }
.sp-photo-split img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; border: 1px solid var(--line-strong); display: block; aspect-ratio: 3 / 4; }
.sp-statcard { background: linear-gradient(160deg, rgba(126,214,180,0.16), rgba(126,214,180,0.03)); border: 1px solid var(--fern); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.sp-statcard b { font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; color: var(--glow); font-weight: 600; }
.post-body .sp-statcard p { margin: 0; color: var(--mist); font-size: 1rem; }
.post-body .sp-statcard p.cap { color: var(--sage); font-size: .86rem; }
@media (max-width: 560px) { .sp-photo-split { grid-template-columns: 1fr; } .sp-photo-split img { aspect-ratio: 4 / 3; } }
/* hero */
.sp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sp-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; margin: 10px 0 14px; max-width: 12ch; }
.sp-hero .lede { max-width: 46ch; }
.sp-hero-photo { position: relative; justify-self: end; width: 100%; max-width: 380px; }
.sp-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); border: 1px solid rgba(126,214,180,0.55); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7), 0 0 0 6px rgba(126,214,180,0.06); }
.sp-hero-photo .hv-tag { left: -18px; bottom: 22px; }
.sp-hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.sp-hero-stats div { display: grid; gap: 2px; }
.sp-hero-stats b { color: var(--snow); font-size: 1.5rem; line-height: 1; }
.sp-hero-stats span { color: var(--sage); font-size: .82rem; }
@media (max-width: 860px) { .sp-hero { grid-template-columns: minmax(0, 1fr); } .sp-hero h1 { max-width: none; } .sp-hero-photo { justify-self: start; max-width: 300px; } .sp-hero-photo .hv-tag { left: 12px; } }