/* ============================================================
   IFFI Website — v4 "Daylight" layer (matches Brand Collaterals v4)
   Dark navy panels become bright icy surfaces; navy = type only.
   Indicold Blue (#00A7E1) + Fresh Green (#3FA571) carry accents.
   Loads AFTER site.css. Scoped to body.v4
   ============================================================ */

body.v4 {
  --crystal-b: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg transform='translate(80,80)' fill='none' stroke='%2300A7E1' stroke-opacity='0.16' stroke-width='2.5' stroke-linecap='round'%3E%3Cg%3E%3Cline y1='-36' y2='36'/%3E%3Cpath d='M-7,-22L0,-29L7,-22'/%3E%3Cpath d='M-7,22L0,29L7,22'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline y1='-36' y2='36'/%3E%3Cpath d='M-7,-22L0,-29L7,-22'/%3E%3Cpath d='M-7,22L0,29L7,22'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline y1='-36' y2='36'/%3E%3Cpath d='M-7,-22L0,-29L7,-22'/%3E%3Cpath d='M-7,22L0,29L7,22'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --aurora-light:
    radial-gradient(120% 100% at 88% -12%, rgba(0,167,225,.16), rgba(0,167,225,0) 58%),
    radial-gradient(90% 85% at -10% 115%, rgba(63,165,113,.13), rgba(63,165,113,0) 55%);
  --panel-ice: linear-gradient(165deg, #F7FBFE 0%, #E7F3FA 100%);
  --ph-light: repeating-linear-gradient(135deg, #E4ECF3 0px, #E4ECF3 10px, #EDF2F7 10px, #EDF2F7 20px);
}

/* ============ Top strip ============ */
body.v4 .topstrip { background: #E4EFF7; color: var(--iffi-slate); }
body.v4 .topstrip a { color: var(--iffi-indicold-deep); }

/* ============ Accent voice: glacial → Indicold ============ */
body.v4 .iffi-eyebrow { color: var(--iffi-indicold-deep); }
body.v4 .iffi-eyebrow--saffron { color: var(--iffi-saffron-deep); }
body.v4 .site-nav a:hover,
body.v4 .site-nav a.active { color: var(--iffi-indicold-deep); }
body.v4 .site-nav a.active { border-bottom-color: var(--iffi-indicold); }
body.v4 .pillar-card .link,
body.v4 .row-item .go,
body.v4 .res-card .dl,
body.v4 .card-demo .cta { color: var(--iffi-indicold-deep); }
body.v4 .chip { border-color: var(--iffi-indicold-soft); color: var(--iffi-indicold-deep); }
body.v4 .chip.saffron { border-color: #F0C39A; color: var(--iffi-saffron-deep); }

/* ============ Heroes — light, icy, luminous ============ */
body.v4 .hero,
body.v4 .page-hero,
body.v4 .con-hero {
  background: #F2F9FD;
  background-image: var(--crystal-b), var(--crystal-b), var(--aurora-light);
  background-repeat: no-repeat;
  background-size: 560px 560px, 220px 220px, auto, auto;
  background-position: right -180px top -160px, left -70px bottom -60px, 0 0, 0 0;
  color: var(--iffi-ink);
  border-bottom: 1px solid var(--iffi-ice-deep);
}
body.v4 .hero h1, body.v4 .page-hero h1, body.v4 .con-hero h1 { color: var(--iffi-navy); }
/* Home hero: fresh green rises gently from the bottom */
body.v4 .hero {
  background-image:
    var(--crystal-b), var(--crystal-b),
    linear-gradient(to top, rgba(63,165,113,.24), rgba(63,165,113,.07) 28%, rgba(63,165,113,0) 52%),
    radial-gradient(120% 100% at 88% -12%, rgba(0,167,225,.16), rgba(0,167,225,0) 58%);
  background-repeat: no-repeat;
  background-size: 560px 560px, 220px 220px, auto, auto;
  background-position: right -180px top -160px, left -70px bottom -60px, 0 0, 0 0;
}
body.v4 .hero h1 .frost-word { color: var(--iffi-indicold); }
body.v4 .con-hero h1 .yr { color: var(--iffi-saffron); }
body.v4 .hero p.lede, body.v4 .page-hero p.lede { color: var(--iffi-slate); }
body.v4 .page-hero .iffi-eyebrow { color: var(--iffi-indicold-deep); }
body.v4 .con-hero .theme { color: var(--iffi-indicold-deep); }
body.v4 .con-hero .meta { color: var(--iffi-slate); }
body.v4 .con-hero .meta b { color: var(--iffi-navy); }
body.v4 .con-hero .strip {
  background: linear-gradient(90deg,
    var(--iffi-saffron) 0 25%, #fff 25% 50%,
    var(--iffi-fresh) 50% 75%, var(--iffi-indicold) 75% 100%);
}
body.v4 .con-hero .iffi-eyebrow { color: var(--iffi-indicold-deep) !important; }

/* dark ghost buttons sit on light now */
body.v4 .hero .iffi-btn--ghost-dark,
body.v4 .con-hero .iffi-btn--ghost-dark,
body.v4 .cta-banner .iffi-btn--ghost-dark {
  color: var(--iffi-navy);
  border-color: #C3D6E4;
}
body.v4 .hero .iffi-btn--ghost-dark:hover,
body.v4 .con-hero .iffi-btn--ghost-dark:hover,
body.v4 .cta-banner .iffi-btn--ghost-dark:hover { border-color: var(--iffi-navy); }

/* hero temp chip */
body.v4 .hero .temp-chip--dark {
  border-color: rgba(0,167,225,.45);
  color: var(--iffi-indicold-deep);
  background: rgba(0,167,225,.07);
}
body.v4 .hero .temp-chip--dark .dot { background: var(--iffi-indicold) !important; }

/* dark image placeholders → light */
body.v4 .hero .visual .ph,
body.v4 .con-hero .ph,
body.v4 .con-band .ph {
  background: var(--ph-light);
  border-color: var(--iffi-ice-deep);
}
body.v4 .hero .visual .ph span,
body.v4 .con-hero .ph span,
body.v4 .con-band .ph span { background: rgba(255,255,255,.88); color: var(--iffi-slate); }

/* ============ Stat band ============ */
body.v4 .stat-band { border-top: 1px solid var(--iffi-ice-deep); }
body.v4 .stat-band .cell { border-right: 1px solid var(--iffi-ice-deep); }
body.v4 .stat-band .cell:last-child { border-right: none; }
body.v4 .stat-band .num { color: var(--iffi-navy); }
body.v4 .stat-band .lbl { color: var(--iffi-slate); }
body.v4 .stat-band .cell:nth-child(1) .num em { color: var(--iffi-saffron-deep); }
body.v4 .stat-band .cell:nth-child(2) .num em { color: var(--iffi-fresh-deep); }
body.v4 .stat-band .cell:nth-child(3) .num em { color: var(--iffi-indicold-deep); }
@media (max-width: 960px) {
  body.v4 .stat-band .cell { border-bottom: 1px solid var(--iffi-ice-deep); }
}

/* ============ Navy sections → ice ============ */
body.v4 .section.navy {
  background: #EBF3F9;
  background-image: var(--crystal-b), var(--aurora-light);
  background-repeat: no-repeat;
  background-size: 480px 480px, auto, auto;
  background-position: right -160px top -150px, 0 0, 0 0;
  color: var(--iffi-ink);
}
body.v4 .section.navy .sec-head h2 { color: var(--iffi-ink) !important; }
body.v4 .section.navy .sec-head p { color: var(--iffi-slate); }
body.v4 .section.navy .iffi-eyebrow--ondark { color: var(--iffi-indicold-deep); }
body.v4 .sub-row { border-bottom: 1px solid var(--iffi-ice-deep); }
body.v4 .sub-row h3 { color: var(--iffi-navy); }
body.v4 .sub-row .ref { color: var(--iffi-slate); }
body.v4 .sub-row .to { color: var(--iffi-indicold-deep); }

/* ============ CTA banner ============ */
body.v4 .cta-banner {
  background: #F2F9FD;
  background-image: var(--crystal-b), var(--aurora-light);
  background-repeat: no-repeat;
  background-size: 380px 380px, auto, auto;
  background-position: right -120px top -120px, 0 0, 0 0;
  border: 1px solid var(--iffi-ice-deep);
  color: var(--iffi-ink);
}
body.v4 .cta-banner h2 { color: var(--iffi-navy); }
body.v4 .cta-banner p { color: var(--iffi-slate); }

/* ============ Home: report cover mini ============ */
body.v4 .report-feature .cover {
  background: var(--panel-ice);
  background-image: var(--crystal-b);
  background-repeat: no-repeat;
  background-size: 300px 300px;
  background-position: right -100px bottom -100px;
  border: 1px solid var(--iffi-ice-deep);
  color: var(--iffi-ink);
}
body.v4 .report-feature .cover .s,
body.v4 .report-feature .cover .b { color: var(--iffi-slate); border-color: var(--iffi-ice-deep); }
body.v4 .report-feature .cover h3 { color: var(--iffi-navy); }
body.v4 .report-feature .cover h3 .thin { color: var(--iffi-indicold); }
body.v4 .report-feature .finding .n { color: var(--iffi-navy); }
body.v4 .report-feature .finding .n em { color: var(--iffi-saffron-deep); }
body.v4 .report-feature .finding:nth-child(2) .n em { color: var(--iffi-fresh-deep); }
body.v4 .report-feature .finding:nth-child(3) .n em { color: var(--iffi-indicold-deep); }

/* ============ Home: IFFI-CON band ============ */
body.v4 .con-band {
  background: #F2F9FD;
  background-image: var(--crystal-b), var(--aurora-light);
  background-repeat: no-repeat;
  background-size: 420px 420px, auto, auto;
  background-position: right 240px top -140px, 0 0, 0 0;
  border: 1px solid var(--iffi-ice-deep);
  color: var(--iffi-ink);
}
body.v4 .con-band .txt h2 { color: var(--iffi-navy); }
body.v4 .con-band .txt h2 .yr { color: var(--iffi-saffron); }
body.v4 .con-band .txt .theme { color: var(--iffi-indicold-deep); }
body.v4 .con-band .txt .meta { color: var(--iffi-slate); }
body.v4 .con-band .txt .meta b { color: var(--iffi-navy); }
body.v4 .con-band .txt .iffi-eyebrow { color: var(--iffi-indicold-deep) !important; }
body.v4 .con-band .ph { border-left: 1px solid var(--iffi-ice-deep); }

/* ============ Membership: join panel ============ */
body.v4 .join-panel {
  background: #F2F9FD;
  background-image: var(--crystal-b), var(--aurora-light);
  background-repeat: no-repeat;
  background-size: 420px 420px, auto, auto;
  background-position: right -140px top -130px, 0 0, 0 0;
  border: 1px solid var(--iffi-ice-deep);
  color: var(--iffi-ink);
}
body.v4 .join-panel h2 { color: var(--iffi-navy); }
body.v4 .join-panel p { color: var(--iffi-slate); }
body.v4 .join-panel .iffi-eyebrow { color: var(--iffi-saffron-deep) !important; }
body.v4 .join-form label { color: var(--iffi-slate); }
body.v4 .join-form input,
body.v4 .join-form select {
  background: #fff;
  border-color: var(--iffi-ice-deep);
  color: var(--iffi-ink);
}
body.v4 .join-form input::placeholder { color: var(--iffi-mist); }
body.v4 .join-form input:focus,
body.v4 .join-form select:focus { border-color: var(--iffi-indicold); }
body.v4 .join-form select { color: var(--iffi-slate); }

/* ============ Resources: myth cards ============ */
body.v4 .myth-card {
  background: #F2F9FD;
  background-image: var(--crystal-b);
  background-repeat: no-repeat;
  background-size: 280px 280px;
  background-position: right -90px bottom -90px;
  border: 1px solid var(--iffi-ice-deep);
  color: var(--iffi-ink);
}
body.v4 .myth-card .m { color: var(--iffi-slate); }
body.v4 .myth-card .f { color: var(--iffi-navy); }
body.v4 .myth-card .src { color: var(--iffi-fresh-deep); }

/* ============ Footer — daylight ============ */
body.v4 .site-foot {
  background: #E4EFF7;
  background-image: var(--crystal-b);
  background-repeat: no-repeat;
  background-size: 420px 420px;
  background-position: right -140px bottom -140px;
  color: var(--iffi-slate);
}
body.v4 .site-foot .cols { border-bottom: 1px solid #CCDEEB; }
body.v4 .site-foot .brand .w { color: var(--iffi-navy); }
body.v4 .site-foot h4 { color: var(--iffi-navy); }
body.v4 .site-foot ul a { color: var(--iffi-slate); }
body.v4 .site-foot ul a:hover { color: var(--iffi-indicold-deep); }