/* ================================================================
   Fortune's Path — CIA LinkedIn Report  |  Brand Standards i.01
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Radley:ital@0;1&family=Poppins:wght@300;400;500;700&display=swap');

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ----- Brand tokens ----- */
:root {
  --fp-black:  #040303;
  --fp-olive:  #353E1F;
  --fp-sage:   #8B9D86;
  --fp-cognac: #99612C;
  --fp-blush:  #D38A64;

  --bg-hero:   #353E1F;
  --bg-body:   #F3EEE4;
  --bg-card:   #FFFFFF;
  --border:    #DDD8CC;

  --text:      #040303;
  --text-mid:  #4a4a42;
  --text-muted:#6b6a5e;
  --text-light:#F3EEE4;

  --cia:    #353E1F;
  --scott:  #99612C;
  --will:   #8B9D86;

  --max: 920px;
  --pad: clamp(20px, 5vw, 60px);
}

/* ----- Base ----- */
html { font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; color: var(--text); background: var(--bg-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
em { font-style: italic; }

/* ================================================================
   SITE HEADER
   ================================================================ */
.site-header {
  background: var(--bg-hero);
  padding: 20px var(--pad);
  display: flex;
  align-items: center;
  gap: 14px;
}
.fp-logo {
  width: 44px; height: 44px;
  border: 1.5px solid rgba(243,238,228,0.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Radley', serif;
  font-size: 15px; color: var(--text-light);
  flex-shrink: 0; letter-spacing: 0.05em;
}
.fp-wordmark { display: flex; align-items: baseline; gap: 10px; }
.fp-name {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-light);
}
.fp-tagline {
  font-family: 'Radley', serif; font-style: italic;
  font-size: 13px; color: rgba(243,238,228,0.58);
}
.header-nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn {
  display: inline-block; padding: 7px 15px;
  border: 1px solid rgba(243,238,228,0.32); border-radius: 3px;
  color: var(--text-light); font-size: 13px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.nav-btn:hover { background: rgba(243,238,228,0.11); border-color: rgba(243,238,228,0.6); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  background: linear-gradient(148deg, #353E1F 0%, #2b3318 55%, #1e2410 100%);
  color: var(--text-light);
  padding: 60px var(--pad) 56px;
}
.hero-inner { max-width: var(--max); margin: 0 auto; }
.overline {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(243,238,228,0.52); margin-bottom: 18px;
}
.hero h1 {
  font-family: 'Radley', serif; font-size: clamp(38px, 6vw, 62px);
  text-transform: uppercase; font-weight: 400; line-height: 1.05;
  letter-spacing: 0.02em; margin-bottom: 20px;
}
.hero-sub {
  font-family: 'Radley', serif; font-style: italic;
  font-size: clamp(17px, 2.3vw, 22px); line-height: 1.55;
  color: rgba(243,238,228,0.80); max-width: 570px; margin-bottom: 28px;
}
.hero-meta {
  font-family: 'Poppins', sans-serif; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243,238,228,0.42);
}

/* ================================================================
   BODY WRAPPER
   ================================================================ */
.body-wrap {
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad) 80px;
}

/* ================================================================
   STAT GRIDS
   ================================================================ */

/* 4-col (summary page KPIs) */
.stat-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-top: none;
  margin-bottom: 52px;
}
@media (max-width: 680px) { .stat-grid-4 { grid-template-columns: 1fr 1fr; } }

/* 3-col (reach stats, follower stats) */
.stat-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); margin-bottom: 20px;
}
@media (max-width: 580px) { .stat-grid-3 { grid-template-columns: 1fr; } }

.stat-item {
  background: var(--bg-card); padding: 22px 20px;
}
.stat-item .item-label {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.stat-item .item-value {
  font-family: 'Radley', serif; font-size: 36px; font-weight: 400;
  line-height: 1; margin-bottom: 5px;
}
.stat-item .item-context {
  font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.item-context.pos::before { content: '▲ '; color: var(--fp-sage); }

/* Generic stat card (top-border variant) */
.stat-card {
  background: var(--bg-card); padding: 24px 20px 20px;
  border-top: 3px solid transparent;
}
.stat-card.c-cia    { border-top-color: var(--cia); }
.stat-card.c-scott  { border-top-color: var(--scott); }
.stat-card.c-will   { border-top-color: var(--will); }
.stat-card.c-blush  { border-top-color: var(--fp-blush); }
.stat-card.c-border { border-top-color: var(--border); }
.stat-card .card-num {
  font-family: 'Radley', serif; font-size: 36px; font-weight: 400; line-height: 1; margin-bottom: 8px;
}
.stat-card .card-label {
  font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--text-muted); line-height: 1.5;
}

/* ================================================================
   ACCOUNT CARDS (3-col, engagement trend)
   ================================================================ */
.account-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  margin-bottom: 16px;
}
@media (max-width: 580px) { .account-grid { grid-template-columns: 1fr; } }

.account-card { background: var(--bg-card); padding: 22px 20px 20px; border-top: 3px solid; }
.account-card.c-cia   { border-top-color: var(--cia); }
.account-card.c-scott { border-top-color: var(--scott); }
.account-card.c-will  { border-top-color: var(--will); }

.acct-label {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.acct-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.c-cia  .acct-dot { background: var(--cia); }
.c-scott .acct-dot { background: var(--scott); }
.c-will  .acct-dot { background: var(--will); }

.acct-rate {
  font-family: 'Radley', serif; font-size: 44px; font-weight: 400;
  line-height: 1; margin-bottom: 6px;
}
.acct-rate .unit { font-size: 19px; color: var(--text-muted); }
.acct-context {
  font-family: 'Poppins', sans-serif; font-size: 12px;
  color: var(--text-muted); margin-top: 8px;
}
.acct-context::before { content: '▲ '; color: var(--fp-sage); }

/* ================================================================
   EXPLAINER CARDS (2-col info boxes)
   ================================================================ */
.explainer-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border); margin-bottom: 28px;
}
@media (max-width: 580px) { .explainer-grid { grid-template-columns: 1fr; } }

.explainer-card { background: var(--bg-card); padding: 22px 22px 20px; }
.explainer-card h4 {
  font-family: 'Radley', serif; font-size: 17px;
  text-transform: uppercase; font-weight: 400; letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.explainer-card p {
  font-family: 'Poppins', sans-serif; font-size: 13px;
  color: var(--text-muted); line-height: 1.65; margin-bottom: 8px;
}
.explainer-card p em { color: var(--text-mid); }

/* Performance level tags */
.perf-tags { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.perf-tag {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Poppins', sans-serif; font-size: 13px;
}
.perf-tag .range { min-width: 56px; font-weight: 500; }
.perf-badge {
  padding: 2px 9px; border-radius: 2px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.perf-tag.low    .perf-badge { background: #fee2e2; color: #991b1b; }
.perf-tag.healthy .perf-badge { background: #dcfce7; color: #166534; }
.perf-tag.strong  .perf-badge { background: #dbeafe; color: #1e40af; }

/* ================================================================
   SECTIONS
   ================================================================ */
.section { margin-top: 52px; }

h2.section-title {
  font-family: 'Radley', serif; font-size: 28px;
  text-transform: uppercase; font-weight: 400; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.section-sub {
  font-family: 'Poppins', sans-serif; font-size: 14px;
  color: var(--text-muted); margin-bottom: 20px; line-height: 1.5;
}

/* ================================================================
   CHART
   ================================================================ */
.chart-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 24px 20px; margin-bottom: 8px; position: relative;
}

/* ================================================================
   DATA TABLES
   ================================================================ */
.table-wrap { overflow-x: auto; }

table {
  width: 100%; border-collapse: collapse;
  font-family: 'Poppins', sans-serif; font-size: 13px;
}
thead tr { background: var(--fp-olive); }
thead th {
  padding: 10px 14px; text-align: left; color: var(--text-light);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
  cursor: pointer; user-select: none;
}
thead th:hover { background: #2b3118; }
.sort-icon { margin-left: 4px; opacity: 0.6; font-size: 9px; }

tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:nth-child(even) { background: #faf8f3; }
tbody tr:hover { background: #f0ebe0; }
tbody td { padding: 9px 14px; vertical-align: middle; }

td.outlier-note { font-size: 11px; color: var(--fp-cognac); }

/* Account badges */
.bdg {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.bdg-cia   { background: rgba(53,62,31,0.11);  color: #2a3118; }
.bdg-scott { background: rgba(153,97,44,0.11); color: #7a4516; }
.bdg-will  { background: rgba(139,157,134,0.2); color: #3d5e3a; }

/* Rate coloring */
.r-high { color: var(--fp-olive); font-weight: 600; }
.r-mid  { color: var(--fp-cognac); font-weight: 500; }
.r-low  { color: var(--text-muted); }

/* ================================================================
   DEMOGRAPHICS GRID
   ================================================================ */
.demo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 20px;
}
@media (max-width: 700px) { .demo-grid { grid-template-columns: 1fr 1fr; } }

.demo-col { background: var(--bg-card); padding: 18px 16px; }
.demo-col h5 {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.demo-item {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Poppins', sans-serif; font-size: 13px;
  gap: 8px; margin-bottom: 7px;
}
.demo-count { font-weight: 600; color: var(--fp-olive); flex-shrink: 0; }

/* ================================================================
   PROSE
   ================================================================ */
.prose { margin-top: 12px; }
.prose h3 {
  font-family: 'Radley', serif; font-size: 20px; text-transform: uppercase;
  font-weight: 400; letter-spacing: 0.04em; margin-bottom: 8px; margin-top: 24px;
}
.prose h3:first-child { margin-top: 0; }
.prose p {
  font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text-mid);
  line-height: 1.72; margin-bottom: 10px;
}
.prose ul { padding-left: 20px; margin-bottom: 10px; }
.prose ul li {
  font-family: 'Poppins', sans-serif; font-size: 14px;
  color: var(--text-mid); line-height: 1.65; margin-bottom: 6px;
}

/* ================================================================
   RECOMMENDATIONS
   ================================================================ */
.rec-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.rec-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 0;
  background: var(--bg-card); border: 1px solid var(--border); align-items: stretch;
}
.rec-num {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Radley', serif; font-size: 30px; color: var(--fp-olive);
  border-right: 1px solid var(--border); padding: 18px 0;
}
.rec-body { padding: 18px 20px; }
.rec-body h4 {
  font-family: 'Radley', serif; font-size: 18px; text-transform: uppercase;
  font-weight: 400; letter-spacing: 0.04em; margin-bottom: 6px;
}
.rec-body p { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.will-items { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.will-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--will); padding: 16px 18px;
}
.will-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.will-item h4 {
  font-family: 'Radley', serif; font-size: 16px; text-transform: uppercase;
  font-weight: 400; letter-spacing: 0.04em;
}
.will-item p { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.ptag {
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; white-space: nowrap; flex-shrink: 0;
}
.ptag-high  { background: rgba(53,62,31,0.12);  color: var(--fp-olive); }
.ptag-quick { background: rgba(153,97,44,0.12); color: var(--fp-cognac); }
.ptag-base  { background: rgba(139,157,134,0.2); color: #3d5e3a; }
.ptag-growth { background: rgba(211,138,100,0.2); color: #8b4a1e; }

/* ================================================================
   FILTER BAR (posts page)
   ================================================================ */
.filter-bar {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 16px 20px; margin-bottom: 16px;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label {
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
}
.filter-group select {
  font-family: 'Poppins', sans-serif; font-size: 13px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 3px;
  background: white; color: var(--text); cursor: pointer; min-width: 150px;
}
.filter-count {
  margin-left: auto; align-self: flex-end;
  font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--text-muted);
}

/* ================================================================
   CTA LINKS
   ================================================================ */
.cta-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.cta-link {
  display: inline-block; padding: 10px 22px;
  border: 1.5px solid var(--fp-olive); border-radius: 3px;
  color: var(--fp-olive); font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.cta-link:hover { background: var(--fp-olive); color: var(--text-light); }

/* ================================================================
   FOOTNOTE
   ================================================================ */
.footnote {
  border: 1px solid var(--border); border-left: 3px solid var(--fp-sage);
  background: var(--bg-card); padding: 16px 20px; margin-top: 36px;
  font-family: 'Poppins', sans-serif; font-size: 12px;
  color: var(--text-muted); line-height: 1.7;
}
.footnote a { color: var(--fp-cognac); text-decoration: underline; }

/* ================================================================
   WHAT'S WORKING BOXES
   ================================================================ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (max-width: 580px) { .two-col { grid-template-columns: 1fr; } }
.two-col-box { background: var(--bg-card); padding: 24px 22px; }
.two-col-box h3 {
  font-family: 'Radley', serif; font-size: 17px; text-transform: uppercase;
  font-weight: 400; letter-spacing: 0.05em; margin-bottom: 12px;
}
.two-col-box ul { padding-left: 18px; }
.two-col-box ul li {
  font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--text-mid);
  line-height: 1.65; margin-bottom: 8px;
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background: var(--fp-black); color: rgba(243,238,228,0.48);
  padding: 28px var(--pad); font-family: 'Poppins', sans-serif;
  font-size: 12px; text-align: center; line-height: 1.75;
}
.site-footer a { color: rgba(243,238,228,0.70); }
.site-footer strong { color: rgba(243,238,228,0.70); font-weight: 600; }