/* ============================================================
   Financial Wellness at Work: page + Speaking-page teaser
   Builds on styles.css tokens (navy, sapphire, royal, sky, paper, gold).
   ============================================================ */

/* ---------- Hero ---------- */
.fw-hero{
  position:relative; overflow:hidden; color:var(--paper);
  background:
    radial-gradient(circle at 82% 40%, rgba(212,175,55,0.16) 0, rgba(212,175,55,0) 42%),
    linear-gradient(150deg, var(--ink-navy) 0%, #14206A 55%, var(--sapphire) 100%);
  padding: 156px 0 96px;
}
.fw-hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; align-items:center; }
.fw-hero h1{ font-size: clamp(34px, 4.6vw, 58px); margin:16px 0 20px; }
.fw-hero h1 em{ font-style:normal; color: var(--gold); }
.fw-hero .sub{ font-size:18px; color: var(--sky); max-width:560px; }
.fw-hero .cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }
.fw-badge{
  display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  background: rgba(246,250,254,0.08); border:1px solid rgba(212,175,55,0.45);
  padding:10px 16px 10px 10px; border-radius:999px; font-size:13.5px; color:var(--paper);
}
.fw-badge img{ height:30px; width:auto; background:#fff; border-radius:999px; padding:3px 8px; }
.fw-badge strong{ color: var(--gold); font-weight:700; }

/* Three pillars visual in the hero */
.fw-pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; align-items:end; }
.fw-pillar{
  text-align:center; border-radius:18px; padding:22px 10px 18px;
  background: rgba(246,250,254,0.07); border:1px solid rgba(202,218,236,0.18);
}
.fw-pillar .em{ font-size:46px; line-height:1; display:block; margin-bottom:12px; }
.fw-pillar strong{ display:block; font-size:15px; }
.fw-pillar span{ display:block; font-size:12.5px; color: var(--sky); margin-top:6px; line-height:1.4; }
.fw-pillar--missing{
  background: linear-gradient(180deg, rgba(212,175,55,0.22), rgba(212,175,55,0.06));
  border:1.5px dashed var(--gold); padding-top:34px; position:relative;
}
.fw-pillar--missing::before{
  content:"The missing pillar"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background: var(--gold); color: var(--ink-navy); font-size:10.5px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.fw-pillar-note{ grid-column:1/-1; text-align:center; font-size:13px; color:var(--sky); margin-top:8px; }

/* ---------- Problem statement ---------- */
.fw-lead{ max-width:820px; margin:0 auto; text-align:center; }
.fw-lead h2{ font-size: clamp(28px, 3.4vw, 40px); }
.fw-lead p{ font-size:17.5px; color: var(--sapphire); }
.fw-chain{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; margin-top:48px; position:relative; }
.fw-chain-step{ text-align:center; padding:0 14px; position:relative; }
.fw-chain-step .em{
  width:76px; height:76px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:36px; background:#fff; box-shadow: var(--shadow); position:relative; z-index:1;
}
.fw-chain-step strong{ display:block; font-size:16px; margin-bottom:6px; }
.fw-chain-step span{ display:block; font-size:13.5px; color: var(--sapphire); line-height:1.5; }
.fw-chain-step:not(:last-child)::after{
  content:""; position:absolute; top:38px; left:calc(50% + 46px); right:calc(-50% + 46px);
  border-top:2px dashed var(--gold);
}
.fw-footnote{ font-size:12.5px; color: var(--stone); text-align:center; max-width:760px; margin:28px auto 0; }

/* ---------- Data ---------- */
.fw-data h2{ text-align:center; }
.fw-data-intro{ text-align:center; color: var(--sky); max-width:720px; margin:0 auto; }
.fw-stat-group{ margin-top:44px; }
.fw-stat-group h3{
  font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color: var(--gold); margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.fw-stat-group h3::after{ content:""; flex:1; border-top:1px solid rgba(212,175,55,0.35); }
.fw-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.fw-stat{
  background: rgba(246,250,254,0.06); border:1px solid rgba(202,218,236,0.16); border-radius:14px;
  padding:26px 24px 20px; display:flex; flex-direction:column;
}
.fw-stat .num{ font-size:46px; font-weight:800; color: var(--gold); line-height:1; letter-spacing:-1px; }
.fw-stat .num small{ font-size:20px; color: var(--sky); font-weight:700; letter-spacing:0; margin:0 6px; }
.fw-stat p{ color: var(--paper); font-size:15px; margin:14px 0 16px; line-height:1.5; }
.fw-stat cite{ margin-top:auto; font-style:normal; font-size:12px; color: var(--sky); line-height:1.45; }
.fw-stat cite a{ text-decoration:underline; text-underline-offset:2px; }
.fw-stat cite a:hover{ color: var(--gold); }
.fw-stat--wide{ grid-column: span 2; }
.fw-data-note{ font-size:12.5px; color: var(--stone); margin-top:26px; text-align:center; }

/* ---------- Roadmap infographic ---------- */
.fw-roadmap-head{ text-align:center; max-width:760px; margin:0 auto 18px; }
.fw-roadmap-head h2{ font-size: clamp(28px, 3.4vw, 42px); }
.fw-roadmap-head p{ color: var(--sapphire); font-size:17px; }

.fw-confidence{
  display:flex; align-items:center; gap:14px; max-width:980px; margin:28px auto 0; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color: var(--sapphire);
}
.fw-confidence .bar{
  flex:1; height:10px; border-radius:999px;
  background: linear-gradient(90deg, #8A93A3 0%, var(--sapphire) 30%, var(--royal-blue) 60%, var(--gold) 100%);
}

.fw-road{ position:relative; margin-top:40px; }
.fw-road-track{
  position:absolute; left:0; right:0; top:50%; height:8px; transform:translateY(-50%); border-radius:999px;
  background: linear-gradient(90deg, #8A93A3 0%, var(--sapphire) 30%, var(--royal-blue) 60%, var(--gold) 100%);
}
.fw-road-track::before, .fw-road-track::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%;
}
.fw-road-track::before{ left:-6px; background:#8A93A3; box-shadow:0 0 0 6px rgba(138,147,163,0.25); }
.fw-road-track::after{ right:-6px; background:var(--gold); box-shadow:0 0 0 8px rgba(212,175,55,0.28); }
.fw-stages{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(6,1fr); gap:14px; position:relative; }
.fw-stage{ display:grid; grid-template-rows: 1fr auto 1fr; justify-items:center; min-height:560px; }
.fw-node{
  grid-row:2; width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:40px; background:#fff; position:relative; z-index:1;
  box-shadow: 0 0 0 6px var(--paper), 0 10px 26px rgba(13,22,66,0.22);
  border:3px solid var(--c, var(--royal-blue));
}
.fw-node .n{
  position:absolute; top:-6px; right:-6px; width:28px; height:28px; border-radius:50%;
  background: var(--c, var(--royal-blue)); color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px var(--paper);
}
.fw-card{
  background:#fff; border-radius:14px; padding:18px 16px 16px; box-shadow: var(--shadow); width:100%;
  border-top:4px solid var(--c, var(--royal-blue)); position:relative;
}
.fw-stage:nth-child(odd) .fw-card{ grid-row:1; align-self:end; margin-bottom:22px; }
.fw-stage:nth-child(even) .fw-card{ grid-row:3; align-self:start; margin-top:22px; }
.fw-card .lvl{ font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color: var(--c, var(--royal-blue)); }
.fw-card h3{ font-size:17px; margin:6px 0 8px; line-height:1.2; }
.fw-card p{ font-size:13px; color: var(--sapphire); margin:0 0 10px; line-height:1.5; }
.fw-card .out{
  display:block; font-size:12.5px; font-weight:700; color: var(--ink-navy); background: var(--paper);
  border-radius:8px; padding:7px 9px; line-height:1.35;
}
.fw-card .out::before{ content:"\2713  "; color: var(--gold-deep); }
.fw-stage--final .fw-node{
  width:100px; height:100px; font-size:46px; background: radial-gradient(circle, #FFF8E1 0%, #fff 70%);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 12px rgba(212,175,55,0.35), 0 12px 30px rgba(184,134,11,0.35);
}
.fw-stage--final .fw-card{ background: linear-gradient(180deg, #FFFBEF, #fff); }

.fw-phase-strip{ display:grid; grid-template-columns: 2fr 4fr; gap:14px; margin-top:26px; }
.fw-phase{
  border-radius:12px; padding:12px 16px; font-size:13px; text-align:center; font-weight:600; color: var(--ink-navy);
  background: var(--sky);
}
.fw-phase strong{ display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--sapphire); margin-bottom:2px; }
.fw-phase--coach{ grid-column:1/-1; background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.32)); }

/* ---------- Comparison ---------- */
.fw-compare{ max-width:920px; margin:40px auto 0; border-radius:16px; overflow:hidden; box-shadow: var(--shadow); background:#fff; }
.fw-compare-row{ display:grid; grid-template-columns: 1fr 56px 1fr; align-items:center; border-top:1px solid #E3EBF5; }
.fw-compare-row:first-child{ border-top:0; }
.fw-compare-row > div{ padding:16px 22px; font-size:15px; }
.fw-compare-row .arrow{ text-align:center; color: var(--gold-deep); font-size:20px; padding:0; }
.fw-compare-head{ background: var(--ink-navy); color: var(--paper); }
.fw-compare-row > div:last-child{ font-weight:700; color: var(--ink-navy); }
.fw-compare-row > div:first-child{ color: var(--sapphire); }
.fw-compare-row .ic{ margin-right:10px; }
.fw-compare-row.fw-compare-head > div{ font-size:12px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color: var(--sky); }
.fw-compare-row.fw-compare-head > div:last-child{ color: var(--gold); }

/* ---------- Engagement levels ---------- */
.fw-levels{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:44px; }
.fw-level{ background:#fff; border-radius:16px; padding:30px 26px; box-shadow: var(--shadow); position:relative; display:flex; flex-direction:column; }
.fw-level .em{ font-size:42px; line-height:1; }
.fw-level .tag{ display:inline-block; margin:16px 0 8px; font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color: var(--gold-deep); }
.fw-level h3{ font-size:21px; margin-bottom:10px; }
.fw-level p{ font-size:14.5px; color: var(--sapphire); }
.fw-level ul{ margin:4px 0 0; padding-left:18px; font-size:14px; color: var(--ink-navy); }
.fw-level li{ margin-bottom:6px; }
.fw-level--feature{ border:2px solid var(--gold); }
.fw-level--feature::before{
  content:"Core programme"; position:absolute; top:-13px; left:26px; background: var(--gold); color: var(--ink-navy);
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
.fw-diagnostic{
  margin-top:22px; display:flex; gap:20px; align-items:center; background: var(--ink-navy); color: var(--paper);
  border-radius:16px; padding:24px 28px;
}
.fw-diagnostic .em{ font-size:40px; }
.fw-diagnostic strong{ color: var(--gold); }
.fw-diagnostic p{ margin:0; color: var(--sky); font-size:14.5px; }

/* ---------- Principles ---------- */
.fw-principles{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:40px; }
.fw-principle{ text-align:center; }
.fw-principle .em{ font-size:40px; display:block; margin-bottom:12px; }
.fw-principle h3{ font-size:18px; }
.fw-principle p{ font-size:14.5px; color: var(--sapphire); margin:0; }

.fw-sources{ font-size:12.5px; color: var(--stone); }
.fw-sources ol{ padding-left:18px; margin:10px 0 0; }
.fw-sources li{ margin-bottom:6px; }
.fw-sources a{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- Speaking-page teaser ---------- */
.fw-teaser{
  background:
    radial-gradient(circle at 88% 20%, rgba(212,175,55,0.18) 0, rgba(212,175,55,0) 40%),
    linear-gradient(150deg, var(--ink-navy) 0%, #14206A 60%, var(--sapphire) 100%);
  color: var(--paper);
}
.fw-teaser-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.fw-teaser h2{ font-size: clamp(28px, 3.4vw, 40px); color: var(--paper); margin:14px 0 16px; }
.fw-teaser h2 em{ font-style:normal; color: var(--gold); }
.fw-teaser p{ color: var(--sky); font-size:16.5px; }
.fw-teaser .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.fw-teaser-stat{ display:flex; gap:16px; align-items:baseline; margin:22px 0 4px; }
.fw-teaser-stat .num{ font-size:44px; font-weight:800; color: var(--gold); line-height:1; }
.fw-teaser-stat span{ font-size:14px; color: var(--paper); }
.fw-teaser-stat cite{ display:block; font-style:normal; font-size:11.5px; color: var(--sky); margin-top:4px; }
.fw-mini-road{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.fw-mini-road li{
  background: rgba(246,250,254,0.07); border:1px solid rgba(202,218,236,0.18); border-radius:14px;
  padding:16px 12px; text-align:center; font-size:13.5px; font-weight:700; position:relative;
}
.fw-mini-road li .em{ display:block; font-size:32px; margin-bottom:8px; }
.fw-mini-road li small{ display:block; font-size:10.5px; letter-spacing:1.5px; color: var(--gold); margin-bottom:2px; }
.fw-mini-road li:last-child{ border:1.5px solid var(--gold); background: rgba(212,175,55,0.14); }

/* Four-video grid on Speaking */
.video-grid--2{ grid-template-columns: repeat(2,1fr); max-width: 940px; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px){
  .fw-stages{ grid-template-columns: repeat(3,1fr); row-gap:0; }
  .fw-road-track{ display:none; }
  .fw-stage{ min-height:0; grid-template-rows:auto auto; }
  .fw-stage:nth-child(odd) .fw-card, .fw-stage:nth-child(even) .fw-card{ grid-row:2; align-self:start; margin:18px 0 30px; }
  .fw-node{ grid-row:1; }
}
@media (max-width: 860px){
  .fw-hero{ padding: 120px 0 64px; }
  .fw-hero-grid, .fw-teaser-grid{ grid-template-columns: 1fr; gap:40px; }
  .fw-chain{ grid-template-columns: 1fr 1fr; row-gap:32px; }
  .fw-chain-step::after{ display:none; }
  .fw-stats, .fw-levels, .fw-principles{ grid-template-columns: 1fr; }
  .fw-stat--wide{ grid-column:auto; }
  .fw-diagnostic{ flex-direction:column; text-align:center; }
  .video-grid--2{ grid-template-columns: 1fr; }

  /* Roadmap becomes a vertical journey */
  .fw-stages{ grid-template-columns: 1fr; gap:0; padding-left:0; }
  .fw-stages::before{
    content:""; position:absolute; left:41px; top:20px; bottom:40px; width:6px; border-radius:999px;
    background: linear-gradient(180deg, #8A93A3 0%, var(--sapphire) 30%, var(--royal-blue) 60%, var(--gold) 100%);
  }
  .fw-stage{ display:flex; align-items:flex-start; gap:18px; min-height:0; }
  .fw-node{ flex:0 0 84px; }
  .fw-stage--final .fw-node{ flex-basis:84px; width:84px; height:84px; font-size:40px; }
  .fw-stage:nth-child(odd) .fw-card, .fw-stage:nth-child(even) .fw-card{ margin:0 0 26px; }
  .fw-phase-strip{ grid-template-columns: 1fr; }
  .fw-compare-row{ grid-template-columns: 1fr 34px 1fr; }
  .fw-compare-row > div{ padding:13px 12px; font-size:13.5px; }
  .fw-compare-row .ic{ display:block; margin:0 0 4px; }
}