/* ============================================================
 * AI4EBITDA - WORKFORCE PAGE STYLES
 * Tier band, A/B compare, stage cards, deliverables table,
 * validation grid, animation, insight cards.
 * Includes mobile-stacked deliverables (no missing content
 * on phone). Used only on workforce.php.
 * ============================================================ */

/* === WF-SCOPED STYLES === */
/* Hero stats */
.wf-hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:2rem;max-width:920px;}
.wf-hero-stat{min-width:0;background:var(--panel);border:1px solid var(--g3);padding:1.2rem 1.4rem;}
.wf-hero-stat-num{font-size:2rem;font-weight:800;color:var(--teal);line-height:1;white-space:nowrap;}
.wf-hero-stat-label{font-size:.78rem;color:var(--white);margin-top:.3rem;letter-spacing:.06em;font-weight:400;line-height:1.5;}

/* Tier band */
.wf-tier-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g3);}
.wf-tier-cell{padding:1.4rem 1.2rem;}
/* Tier numbers + names inline */
.wf-tier-row{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.3rem;}
.wf-tier-n{font-size:2.6rem;font-weight:800;line-height:1;}
.wf-tier-name{font-size:.95rem;font-weight:700;color:var(--white);}
.wf-tier-delta{font-size:.88rem;font-weight:700;color:var(--lime);margin-left:.2rem;}
.wf-tier-desc{font-size:.9rem;color:var(--white);font-weight:300;line-height:1.6;margin-top:.4rem;}
/* Toggle buttons */
.wf-ba-toggle{display:flex;gap:2px;}
.wf-ba-btn{padding:.55rem 1.4rem;border:1px solid var(--g3);background:var(--panel);color:var(--g2);font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;letter-spacing:.08em;}
.wf-ba-btn.on{background:var(--lime);color:var(--void);border-color:var(--lime);}
.wf-ba-btn:hover:not(.on){color:var(--white);border-color:var(--g2);}
/* Filter buttons */
.wf-org-filt{padding:.45rem 1.1rem;border:1px solid var(--g3);background:var(--panel);color:var(--g2);font-family:'Montserrat',sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;border-radius:2px;transition:all .2s;letter-spacing:.08em;}
.wf-org-filt.on{border-color:var(--teal);color:var(--teal);background:rgba(51,190,202,.1);}
.wf-org-filt:hover:not(.on){color:var(--white);border-color:var(--g1);}
/* Panels */
.wf-ba-panel{display:none;}
.wf-ba-panel.on{display:block;}
/* Org grid */
.wf-org-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
/* Summary bars */
.wf-ba-compare{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2.5rem;}
.wf-ba-box{background:var(--panel);border:1px solid var(--g3);padding:1.4rem 1.6rem;}
.wf-ba-after{border-color:var(--teal);}
/* Stage grid */
.wf-stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:1.8rem;}
.wf-stage-card{background:var(--panel);border:1px solid var(--g3);padding:1.6rem;border-top:3px solid var(--teal);}
.wf-stage-card.s2{border-top-color:#4F81BD;}
.wf-stage-card.s3{border-top-color:var(--lime);}
.wf-stage-card.s4{border-top-color:var(--g2);}
.wf-stage-n{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:.5rem;}
.wf-stage-card.s2 .wf-stage-n{color:#4F81BD;}
.wf-stage-card.s3 .wf-stage-n{color:var(--lime);}
.wf-stage-card.s4 .wf-stage-n{color:var(--g2);}
.wf-stage-title{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.6rem;}
.wf-stage-desc{font-size:.9rem;color:var(--g1);font-weight:300;line-height:1.75;}
/* Science CTA */
.wf-science-cta{text-align:center;background:var(--panel);}
.wf-science-quote{
  font-size:clamp(1.3rem,2.2vw,1.9rem);font-style:italic;font-weight:300;
  color:var(--white);line-height:1.55;text-align:center;max-width:760px;margin:0 auto;
  border-top:2px solid var(--teal);border-bottom:2px solid var(--teal);padding:2.5rem 0;
}
.wf-science-quote strong{font-weight:700;font-style:normal;color:var(--teal);}
.wf-science-link{margin:1.3rem auto 0;font-size:1rem;line-height:1.7;text-align:center;}
.wf-science-link a{color:var(--teal);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(51,190,202,.45);}
.wf-science-link a:hover{color:var(--white);border-bottom-color:var(--teal);}
/* Deliverables table */
.wf-del-table{width:100%;border-collapse:collapse;}
.wf-del-table th{text-align:left;padding:.8rem 1rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;border-bottom:2px solid var(--teal);background:var(--void);}
.wf-del-table td{padding:.95rem 1rem;font-size:.9rem;color:var(--g1);border-bottom:1px solid var(--g3);vertical-align:top;}
.wf-del-table td:first-child{font-weight:700;color:var(--white);white-space:nowrap;}
.wf-del-table tr:last-child td{border-bottom:none;}
.wf-sp1,.wf-sp2,.wf-sp3,.wf-sp4{display:inline-block;white-space:nowrap;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.2rem .5rem;border-radius:2px;}
.wf-sp1{background:rgba(51,190,202,.15);color:var(--teal);}
.wf-sp2{background:rgba(79,129,189,.15);color:#4F81BD;}
.wf-sp3{background:rgba(219,250,26,.12);color:var(--lime);}
.wf-sp4{background:rgba(106,144,168,.12);color:var(--g2);}
/* Mobile: stack deliverables table as cards so no content is missed */
@media(max-width:768px){
  .wf-del-wrap{overflow-x:visible !important;}
  .wf-del-table{border:none;}
  .wf-del-table thead{display:none;}
  .wf-del-table, .wf-del-table tbody, .wf-del-table tr, .wf-del-table td{display:block;width:100%;}
  .wf-del-table tr{margin-bottom:1rem;border:1px solid var(--g3);border-radius:6px;background:var(--panel);padding:.4rem .25rem;}
  .wf-del-table tr:last-child{margin-bottom:0;}
  .wf-del-table td{padding:.55rem .9rem;border:none;}
  .wf-del-table td:first-child{font-size:1rem;color:var(--white);font-weight:700;white-space:normal;padding-bottom:.7rem;margin-bottom:.3rem;}
  .wf-del-table td:first-child::after{content:'';display:block;border-bottom:1px solid var(--g3);margin-top:.7rem;}
  .wf-del-table td:nth-child(2){padding-bottom:.4rem;padding-top:.2rem;}
  .wf-del-table td:nth-child(3){font-size:.88rem;line-height:1.65;color:var(--g1);padding-top:0;}
  .wf-del-table td:nth-child(3)::before{content:'What it contains:';display:block;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:.4rem;}
}
/* Val grid */
.wf-val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:2rem 0;}
.wf-val-card{background:var(--panel);border:1px solid var(--g3);padding:2rem 1.5rem;text-align:center;}
.wf-val-n{font-size:2.2rem;font-weight:800;color:var(--teal);line-height:1;}
.wf-val-l{font-size:.82rem;color:var(--g2);margin-top:.5rem;line-height:1.5;font-weight:300;}
/* Callout */
.wf-callout{border:1px solid var(--g3);border-left:4px solid var(--teal);padding:1.4rem 1.6rem;margin:1.8rem 0;background:rgba(51,190,202,.06);}
.wf-callout-lbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:.5rem;}
/* Phase label */
#wf-phase-label{font-size:.85rem;color:var(--white);font-weight:500;}
/* Tooltip */
#wf-gtip{position:fixed;pointer-events:none;z-index:9999;display:none;}
@media(max-width:768px){
  .wf-tier-band,.wf-stage-grid,.wf-ba-compare{grid-template-columns:1fr 1fr;}
  .wf-val-grid{grid-template-columns:1fr;}
  .wf-val-card{padding:1.75rem 1.35rem;}
  .wf-org-grid{grid-template-columns:1fr;}
  .wf-tier-row{flex-wrap:wrap;}
}

/* === ANIMATION SECTION (Improving Teams) === */
.wf-anim-wrap{background:var(--panel);border:1px solid var(--g3);border-radius:8px;padding:1.5rem;margin-top:2rem;}
.wf-anim-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--g3);flex-wrap:wrap;gap:1rem;}
.wf-anim-title{font-family:'DM Mono',monospace;font-size:.7rem;font-weight:500;color:var(--white);text-transform:uppercase;letter-spacing:.08em;}
.wf-anim-progress{display:flex;align-items:baseline;gap:.4rem;}
.wf-anim-pct{font-family:'DM Mono',monospace;font-size:1.4rem;font-weight:500;color:var(--teal);line-height:1;min-width:3rem;text-align:right;}
.wf-anim-lbl{font-family:'DM Mono',monospace;font-size:.625rem;color:var(--g2);text-transform:uppercase;letter-spacing:.06em;}
.wf-canvas-wrap{position:relative;width:100%;background:var(--void2);border-radius:6px;overflow:hidden;}
.wf-canvas-wrap canvas{display:block;width:100%;}
.wf-anim-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--g3);}
.wf-anim-legend-item{display:flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:500;color:var(--g1);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em;}
.wf-anim-legend-dot{width:.625rem;height:.625rem;border-radius:50%;flex-shrink:0;}
.wf-anim-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem;margin-top:1rem;}
.wf-anim-stat{background:var(--void2);border:1px solid var(--g3);border-radius:6px;padding:.875rem .75rem;text-align:center;}
.wf-anim-stat-lbl{font-size:.625rem;color:var(--g1);line-height:1.4;margin-bottom:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.wf-anim-stat-dot{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;vertical-align:middle;margin-right:.25rem;margin-bottom:.05rem;}
.wf-anim-stat-num{font-family:'DM Mono',monospace;font-size:1.875rem;font-weight:500;color:var(--white);line-height:1;}
.wf-anim-stat-chg{font-family:'DM Mono',monospace;font-size:.75rem;font-weight:500;margin-top:.25rem;min-height:1.05rem;}
.wf-anim-stat-chg.pos{color:var(--lime);}
.wf-anim-stat-chg.neg{color:#DC2626;}
@media(max-width:768px){
  .wf-anim-wrap{padding:1rem;}
  .wf-canvas-wrap{border-radius:5px;}
  .wf-anim-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .wf-anim-wrap{padding:.85rem .65rem;border-radius:6px;}
  .wf-canvas-wrap{border-radius:4px;}
}
@media(max-width:520px){
  .wf-anim-title{font-size:.62rem;line-height:1.55;}
  .wf-anim-pct{font-size:1.15rem;min-width:2.45rem;}
  .wf-anim-lbl{font-size:.56rem;}
  .wf-anim-legend{gap:.35rem .85rem;}
  .wf-anim-legend-item{font-size:.62rem;line-height:1.45;}
  .wf-anim-legend-dot{width:.5rem;height:.5rem;}
}

/* === INSIGHT CARDS (What AI4EBITDA Does - V2) === */
.wf-insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;}
.wf-insight-card{background:var(--panel);border:1px solid var(--g3);border-top:3px solid var(--teal);border-radius:8px;padding:2rem 1.75rem;}
.wf-insight-num{font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:800;color:var(--teal);line-height:1;margin-bottom:.5rem;}
.wf-insight-title{font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.625rem;line-height:1.3;}
.wf-insight-desc{font-size:.875rem;color:var(--g1);line-height:1.65;}
@media(max-width:768px){.wf-insight-grid{grid-template-columns:1fr;}}