/**

 * finances.nw — Stylesheet

 * R14: CSS variables only — no hardcoded hex

 * R3:  No inline CSS

 * R13: Fonts from S3 only

 */



@import url('https://neuraweb-storage.s3.us-east-2.amazonaws.com/dapps/fonts/neuraweb-fonts-reference.css');



/* ── THEME TOKENS ── */

[data-theme="light"] {

  --fn-bg:          #F7F5F0;

  --fn-bg2:         #FFFFFF;

  --fn-bg3:         #EEECE7;

  --fn-bg4:         #E5E2DB;

  --fn-ink:         #1A1814;

  --fn-ink2:        #3A3730;

  --fn-ink3:        #6B6860;

  --fn-ink4:        #9A9890;

  --fn-border:      rgba(0,0,0,0.08);

  --fn-border2:     rgba(0,0,0,0.14);

  --fn-card:        #FFFFFF;

  --fn-card2:       #F2F0EB;

  --fn-gold:        #9A6200;

  --fn-gold-lt:     #FDF3DC;

  --fn-gold-mid:    #C8860A;

  --fn-teal:        #0A7A58;

  --fn-teal-lt:     #DFF4EC;

  --fn-teal-mid:    #0FA87A;

  --fn-red:         #B02020;

  --fn-red-lt:      #FCEAEA;

  --fn-red-mid:     #C94040;

  --fn-blue:        #1A5FA0;

  --fn-blue-lt:     #E0EEFB;

  --fn-blue-mid:    #2D7DD2;

  --fn-amber-lt:    #FEF3DC;

  --fn-amber:       #9A6200;

  --fn-shadow:      0 1px 3px rgba(0,0,0,0.07),0 4px 12px rgba(0,0,0,0.05);

  --fn-manifesto-bg:#1A1814;

  --fn-manifesto-txt:#F5F0E8;

  --fn-manifesto-sub:rgba(245,240,232,0.6);

  --fn-pillar-bg:   rgba(255,255,255,0.03);

  --fn-pillar-h:    #F0EDE8;

  --fn-pillar-p:    rgba(240,237,232,0.55);

  --fn-pillar-brd:  rgba(255,255,255,0.08);

  --fn-cta-bg:      linear-gradient(135deg,#6A4200,#B87800,#6A4200);

}



[data-theme="dark"] {

  --fn-bg:          #0D0E11;

  --fn-bg2:         #141519;

  --fn-bg3:         #1A1C22;

  --fn-bg4:         #222530;

  --fn-ink:         #F0EDE8;

  --fn-ink2:        #C8C5C0;

  --fn-ink3:        #8A8880;

  --fn-ink4:        #5A5855;

  --fn-border:      rgba(255,255,255,0.08);

  --fn-border2:     rgba(255,255,255,0.14);

  --fn-card:        #141519;

  --fn-card2:       #1A1C22;

  --fn-gold:        #F0D080;

  --fn-gold-lt:     rgba(200,134,10,0.15);

  --fn-gold-mid:    #D4920E;

  --fn-teal:        #6DDBB4;

  --fn-teal-lt:     rgba(15,168,122,0.12);

  --fn-teal-mid:    #0FA87A;

  --fn-red:         #F09090;

  --fn-red-lt:      rgba(201,64,64,0.12);

  --fn-red-mid:     #C94040;

  --fn-blue:        #90BBEE;

  --fn-blue-lt:     rgba(45,125,210,0.12);

  --fn-blue-mid:    #2D7DD2;

  --fn-amber-lt:    rgba(200,134,10,0.12);

  --fn-amber:       #F0D080;

  --fn-shadow:      0 1px 3px rgba(0,0,0,0.3),0 4px 12px rgba(0,0,0,0.2);

  --fn-manifesto-bg:var(--fn-bg3);

  --fn-manifesto-txt:var(--fn-ink);

  --fn-manifesto-sub:var(--fn-ink3);

  --fn-pillar-bg:   var(--fn-bg2);

  --fn-pillar-h:    var(--fn-ink);

  --fn-pillar-p:    var(--fn-ink3);

  --fn-pillar-brd:  var(--fn-border);

  --fn-cta-bg:      linear-gradient(135deg,#5A3800,#9A6600,#5A3800);

}



/* ── RESET & BASE ── */

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

html, body { width: 100%; min-height: 100vh; }

body {

  background: var(--fn-bg);

  color: var(--fn-ink);

  font-family: var(--ds-font, 'DM Sans', system-ui, sans-serif);

  font-size: 15px;

  line-height: 1.6;

  transition: background 0.3s, color 0.3s;

}

a { color: inherit; text-decoration: none; }

strong { font-weight: 500; }



/* ── TOPBAR ── */

.fn-topbar {

  position: fixed; top: 0; left: 0; right: 0; z-index: 200;

  height: 60px; display: flex; align-items: center;

  padding: 0 2.5rem;

  background: var(--fn-bg2);

  border-bottom: 1px solid var(--fn-border);

  box-shadow: var(--fn-shadow);

}

.fn-brand {

  display: flex; align-items: center; gap: 10px;

  margin-right: 2.5rem; cursor: pointer;

}

.fn-brand-gem {

  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;

  background: linear-gradient(135deg,#7A5006,#D4920E);

  display: flex; align-items: center; justify-content: center;

}

.fn-brand-gem svg { width: 20px; height: 20px; }

.fn-brand-name {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 19px; color: var(--fn-gold-mid); letter-spacing: -0.01em;

}

.fn-brand-tld { color: var(--fn-ink3); }

.fn-nav { display: flex; gap: 2px; flex: 1; }

.fn-ntab {

  padding: 6px 16px; border-radius: 6px; font-size: 13px;

  cursor: pointer; color: var(--fn-ink3);

  border: none; background: none; transition: all 0.15s;

  font-family: inherit;

}

.fn-ntab:hover { color: var(--fn-ink); background: var(--fn-bg3); }

.fn-ntab.on  { color: var(--fn-gold-mid); background: var(--fn-gold-lt); font-weight: 500; }

.fn-topbar-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.fn-theme-btn {

  width: 38px; height: 38px; border-radius: 50%;

  border: 1px solid var(--fn-border2); background: var(--fn-bg3);

  cursor: pointer; display: flex; align-items: center; justify-content: center;

  color: var(--fn-ink2); font-size: 18px; transition: all 0.2s;

}

.fn-theme-btn:hover { background: var(--fn-bg4); }

.fn-btn-ghost {

  padding: 7px 16px; border-radius: 7px; font-size: 13px;

  border: 1px solid var(--fn-border2); background: none;

  color: var(--fn-ink2); cursor: pointer; font-family: inherit;

}

.fn-btn-gold {

  padding: 8px 20px; border-radius: 7px; font-size: 13px; font-weight: 500;

  border: none; background: linear-gradient(135deg,#8A5200,#D4920E);

  color: #FFF8E7; cursor: pointer; font-family: inherit;

}



/* ── LAYOUT ── */

body { padding-top: 60px; }

.fn-container { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }



/* ── SHARED ── */

.fn-section-rule { display: flex; align-items: center; gap: 14px; margin: 3rem 0 1.5rem; }

.fn-sr-label {

  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;

  color: var(--fn-ink4); text-transform: uppercase; white-space: nowrap;

}

.fn-sr-line { flex: 1; height: 1px; background: var(--fn-border); }



.fn-chip { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 500; letter-spacing: 0.03em; }

.fn-chip-warn { background: var(--fn-amber-lt); color: var(--fn-amber); border: 1px solid rgba(200,134,10,0.25); }

.fn-chip-ok   { background: var(--fn-teal-lt);  color: var(--fn-teal);  border: 1px solid rgba(15,168,122,0.25); }

.fn-chip-bad  { background: var(--fn-red-lt);   color: var(--fn-red);   border: 1px solid rgba(201,64,64,0.25); }

.fn-chip-info { background: var(--fn-blue-lt);  color: var(--fn-blue);  border: 1px solid rgba(45,125,210,0.25); }



/* bar rows */

.fn-brow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.fn-blabel { font-size: 13px; color: var(--fn-ink3); width: 130px; flex-shrink: 0; }

.fn-btrack { flex: 1; height: 7px; background: var(--fn-bg3); border-radius: 4px; overflow: hidden; }

.fn-bfill  { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

.fn-bar-red   { background: var(--fn-red-mid); }

.fn-bar-teal  { background: var(--fn-teal-mid); }

.fn-bar-amber { background: var(--fn-gold-mid); }

.fn-bar-blue  { background: var(--fn-blue-mid); }

.fn-bval { font-size: 13px; font-weight: 500; width: 52px; text-align: right; }



/* color text helpers */

.fn-red       { color: var(--fn-red); }

.fn-teal-text { color: var(--fn-teal); }

.fn-amber     { color: var(--fn-amber); }

.fn-blue-text { color: var(--fn-blue); }



/* cards */

.fn-card {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 14px; box-shadow: var(--fn-shadow);

}



/* ── HERO ── */

.fn-hero {

  background: var(--fn-bg2); border-bottom: 1px solid var(--fn-border);

  position: relative; overflow: hidden;

}

.fn-hero-glow {

  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);

  width: 700px; height: 300px; pointer-events: none;

  background: radial-gradient(ellipse, rgba(200,134,10,0.08) 0%, transparent 70%);

}

.fn-hero .fn-container { padding-top: 4.5rem; padding-bottom: 0; }

.fn-hero-eyebrow {

  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 1.5rem;

  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;

  color: var(--fn-gold-mid); background: var(--fn-gold-lt);

  border: 1px solid rgba(200,134,10,0.25); padding: 5px 16px; border-radius: 20px;

}

.fn-pulse {

  width: 7px; height: 7px; border-radius: 50%;

  background: var(--fn-gold-mid); animation: fnPulse 2s infinite;

}

@keyframes fnPulse { 0%,100%{opacity:1} 50%{opacity:0.25} }

.fn-hero-h1 {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 58px; line-height: 1.08; color: var(--fn-ink);

  max-width: 800px; margin: 0 auto 1.5rem; letter-spacing: -0.02em;

  text-align: center;

}

.fn-hero-h1 em { font-style: italic; color: var(--fn-gold-mid); }

.fn-hero-deck {

  font-size: 17px; color: var(--fn-ink3); line-height: 1.75;

  max-width: 640px; margin: 0 auto 2.5rem; font-weight: 300; text-align: center;

}

.fn-hero-ctas {

  display: flex; justify-content: center; gap: 12px;

  flex-wrap: wrap; margin-bottom: 3rem;

}

.fn-cta-gold {

  padding: 14px 32px; border-radius: 8px; font-size: 15px; font-weight: 500;

  border: none; background: linear-gradient(135deg,#8A5200,#D4920E);

  color: #FFF8E7; cursor: pointer; font-family: inherit;

}

.fn-cta-teal {

  padding: 14px 32px; border-radius: 8px; font-size: 15px; font-weight: 500;

  border: 1px solid rgba(10,122,88,0.35); background: var(--fn-teal-lt);

  color: var(--fn-teal); cursor: pointer; font-family: inherit;

}

.fn-cta-outline {

  padding: 14px 32px; border-radius: 8px; font-size: 15px;

  border: 1px solid var(--fn-border2); background: none;

  color: var(--fn-ink2); cursor: pointer; font-family: inherit;

}



/* ticker */

.fn-ticker {

  display: grid; grid-template-columns: repeat(4,1fr);

  border-top: 1px solid var(--fn-border);

}

.fn-tick {

  padding: 1.5rem 2rem; border-right: 1px solid var(--fn-border);

}

.fn-tick:last-child { border-right: none; }

.fn-tick-label {

  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;

  text-transform: uppercase; color: var(--fn-ink4); margin-bottom: 6px;

}

.fn-tick-val {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 28px; line-height: 1; margin-bottom: 4px;

}

.fn-tick-val.fn-red   { color: var(--fn-red); }

.fn-tick-val.fn-amber { color: var(--fn-gold-mid); }

.fn-tick-sub { font-size: 12px; color: var(--fn-ink3); }



/* ── EDITORIAL ── */

.fn-editorial { padding: 5rem 0; }

.fn-bg-alt    { background: var(--fn-bg); }

.fn-editorial-grid {

  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;

}

.fn-ed-label {

  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;

  text-transform: uppercase; color: var(--fn-gold-mid); margin-bottom: 0.75rem;

}

.fn-ed-h2 {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 34px; line-height: 1.2; color: var(--fn-ink);

  margin-bottom: 1.25rem; letter-spacing: -0.01em;

}

.fn-ed-h2 em { font-style: italic; color: var(--fn-red); }

.fn-ed-body { font-size: 15px; color: var(--fn-ink2); line-height: 1.8; font-weight: 300; }

.fn-ed-body p { margin-bottom: 1rem; }

.fn-ed-body p:last-child { margin-bottom: 0; }

.fn-ed-body strong { font-weight: 500; color: var(--fn-ink); }



/* fact stack */

.fn-fact-stack { display: flex; flex-direction: column; gap: 12px; }

.fn-fact-card {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 12px; padding: 1.25rem 1.5rem;

  display: flex; align-items: center; gap: 1.25rem;

  box-shadow: var(--fn-shadow);

}

.fn-fact-num {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 30px; line-height: 1; flex-shrink: 0; width: 90px;

}

.fn-fact-num.fn-red   { color: var(--fn-red); }

.fn-fact-num.fn-amber { color: var(--fn-gold-mid); }

.fn-fact-num.fn-teal  { color: var(--fn-teal); }

.fn-fact-text h4 { font-size: 14px; font-weight: 500; color: var(--fn-ink); margin-bottom: 3px; }

.fn-fact-text p  { font-size: 12px; color: var(--fn-ink3); line-height: 1.6; }



/* ── MANIFESTO BAND ── */

.fn-manifesto-band {

  background: var(--fn-manifesto-bg);

  padding: 5rem 0; position: relative; overflow: hidden;

}

.fn-manifesto-band::before {

  content: ''; position: absolute; inset: 0;

  background: radial-gradient(ellipse 60% 80% at 30% 50%,rgba(200,134,10,0.08),transparent);

  pointer-events: none;

}

.fn-mb-quote {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 32px; line-height: 1.35; color: var(--fn-manifesto-txt);

  max-width: 880px; margin: 0 auto 2rem; text-align: center; font-style: italic;

}

.fn-mb-sub {

  font-size: 15px; color: var(--fn-manifesto-sub); text-align: center;

  max-width: 680px; margin: 0 auto 3rem; font-weight: 300; line-height: 1.75;

}

.fn-pillar-grid {

  display: grid; grid-template-columns: repeat(3,1fr);

  gap: 1px; background: var(--fn-pillar-brd);

  border: 1px solid var(--fn-pillar-brd);

  border-radius: 14px; overflow: hidden;

}

.fn-pillar { background: var(--fn-pillar-bg); padding: 2rem; }

.fn-pillar-icon {

  width: 40px; height: 40px; border-radius: 10px;

  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;

}

.fn-pillar-gold { background: rgba(200,134,10,0.15); color: var(--fn-gold-mid); }

.fn-pillar-teal { background: rgba(15,168,122,0.15); color: var(--fn-teal-mid); }

.fn-pillar-blue { background: rgba(45,125,210,0.15); color: var(--fn-blue-mid); }

.fn-pillar h3 { font-size: 16px; font-weight: 500; color: var(--fn-pillar-h); margin-bottom: 0.5rem; }

.fn-pillar p  { font-size: 13px; color: var(--fn-pillar-p); line-height: 1.7; font-weight: 300; }



/* ── 99% SECTION ── */

.fn-pct-section {

  padding: 5rem 0;

  background: var(--fn-bg2); border-top: 1px solid var(--fn-border);

  border-bottom: 1px solid var(--fn-border);

}

.fn-pct-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }

.fn-pct-divider { width: 40px; height: 3px; border-radius: 2px; margin-bottom: 1rem; }

.fn-div-red   { background: var(--fn-red-mid); }

.fn-div-amber { background: var(--fn-gold-mid); }

.fn-div-blue  { background: var(--fn-blue-mid); }

.fn-pct-block h3 {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 20px; color: var(--fn-ink); margin-bottom: 0.75rem; line-height: 1.3;

}

.fn-pct-block p { font-size: 14px; color: var(--fn-ink3); line-height: 1.75; font-weight: 300; }

.fn-pct-block p strong { color: var(--fn-ink); font-weight: 500; }



/* gap card */

.fn-gap-card {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 14px; padding: 2rem; box-shadow: var(--fn-shadow); margin-top: 2.5rem;

}

.fn-gap-title { font-size: 14px; font-weight: 500; color: var(--fn-ink); margin-bottom: 1.5rem; }

.fn-gap-note {

  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--fn-border);

  font-size: 13px; color: var(--fn-ink3); font-weight: 300; line-height: 1.75;

}



/* ── SOLUTION ── */

.fn-solution {

  padding: 5rem 0;

  background: var(--fn-bg2); border-top: 1px solid var(--fn-border);

}

.fn-npos-box {

  background: var(--fn-gold-lt); border: 1px solid rgba(200,134,10,0.25);

  border-radius: 10px; padding: 1.5rem; border-left: 4px solid var(--fn-gold-mid);

}

.fn-npos-title { font-size: 14px; font-weight: 500; color: var(--fn-ink); margin-bottom: 0.75rem; }

.fn-npos-box p { font-size: 13px; color: var(--fn-ink2); line-height: 1.7; font-weight: 300; }

.fn-sol-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }

.fn-sol-card {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 14px; padding: 1.75rem; box-shadow: var(--fn-shadow);

}

.fn-sol-icon {

  width: 44px; height: 44px; border-radius: 10px;

  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;

}

.fn-sol-gold { background: var(--fn-gold-lt); color: var(--fn-gold-mid); }

.fn-sol-blue { background: var(--fn-blue-lt); color: var(--fn-blue-mid); }

.fn-sol-teal { background: var(--fn-teal-lt); color: var(--fn-teal-mid); }

.fn-sol-red  { background: var(--fn-red-lt);  color: var(--fn-red-mid); }

.fn-sol-card h3 { font-size: 16px; font-weight: 500; color: var(--fn-ink); margin-bottom: 0.5rem; }

.fn-sol-card p  { font-size: 13px; color: var(--fn-ink3); line-height: 1.7; font-weight: 300; }

.fn-sol-tag {

  font-size: 11px; font-weight: 500; margin-top: 1rem;

  display: inline-block; padding: 3px 10px; border-radius: 20px;

}

.fn-tag-teal { background: var(--fn-teal-lt); color: var(--fn-teal); }

.fn-tag-blue { background: var(--fn-blue-lt); color: var(--fn-blue); }

.fn-tag-red  { background: var(--fn-red-lt);  color: var(--fn-red); }



/* ── CTA BAND ── */

.fn-cta-band {

  background: var(--fn-cta-bg);

  padding: 4rem 0; text-align: center;

}

.fn-cta-h2 {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 36px; color: #FFF8E7; margin-bottom: 0.75rem; font-style: italic;

}

.fn-cta-sub {

  font-size: 16px; color: rgba(255,248,231,0.7);

  max-width: 600px; margin: 0 auto 2rem; font-weight: 300; line-height: 1.75;

}

.fn-btn-w {

  display: inline-block; padding: 14px 36px; border-radius: 8px; font-size: 15px;

  font-weight: 500; border: 2px solid rgba(255,248,231,0.4);

  background: rgba(255,248,231,0.1); color: #FFF8E7;

  cursor: pointer; font-family: inherit;

}



/* ── DASHBOARD / TRANSPARENCY SHARED ── */

.fn-dash-head {

  background: var(--fn-bg2); border-bottom: 1px solid var(--fn-border);

  padding: 3rem 0 2rem;

}

.fn-dash-h2 {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 32px; color: var(--fn-ink); margin-bottom: 0.25rem;

}

.fn-dash-sub { font-size: 14px; color: var(--fn-ink3); font-weight: 300; }

.fn-dash-body { padding: 2.5rem 0; }



.fn-stat4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 2rem; }

.fn-stat-c {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 12px; padding: 1.5rem; box-shadow: var(--fn-shadow);

}

.fn-slabel {

  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;

  text-transform: uppercase; color: var(--fn-ink4); margin-bottom: 8px;

}

.fn-sval {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 30px; line-height: 1; margin-bottom: 4px;

}

.fn-sval.fn-amber { color: var(--fn-gold-mid); }

.fn-sval.fn-red   { color: var(--fn-red); }

.fn-ssub { font-size: 12px; color: var(--fn-ink3); }

.fn-ssub.fn-teal-text { color: var(--fn-teal); }



.fn-dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }

.fn-ind-card {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 14px; padding: 1.75rem; box-shadow: var(--fn-shadow);

}

.fn-ind-head {

  display: flex; justify-content: space-between; align-items: flex-start;

  margin-bottom: 1.25rem; gap: 1rem;

}

.fn-ind-title { font-size: 14px; font-weight: 500; color: var(--fn-ink); }

.fn-ind-note  { font-size: 12px; color: var(--fn-ink3); line-height: 1.65; font-weight: 300; }



.fn-col-total-row {

  display: flex; justify-content: space-between; align-items: baseline;

  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fn-border);

  margin-bottom: 8px;

}

.fn-col-total-label { font-size: 13px; color: var(--fn-ink3); }

.fn-col-total-val {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 26px; color: var(--fn-ink);

}



.fn-world-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 2rem; }

.fn-wc {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 10px; padding: 1.25rem; box-shadow: var(--fn-shadow);

}

.fn-wc-n { font-size: 13px; font-weight: 500; color: var(--fn-ink); margin-bottom: 2px; }

.fn-wc-m { font-size: 11px; color: var(--fn-ink4); margin-bottom: 8px; }

.fn-wc-v {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 24px; line-height: 1; margin-bottom: 6px;

}

.fn-source-note {

  font-size: 12px; color: var(--fn-ink4); padding: 1rem 1.25rem;

  border: 1px solid var(--fn-border); border-radius: 10px;

  line-height: 1.7; font-weight: 300;

}



/* ── TRANSPARENCY ── */

.fn-principle-box {

  background: var(--fn-gold-lt); border: 1px solid rgba(200,134,10,0.25);

  border-left: 4px solid var(--fn-gold-mid); border-radius: 0 14px 14px 0;

  padding: 2rem; margin-bottom: 2.5rem;

}

.fn-pb-quote {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 20px; color: var(--fn-ink); line-height: 1.4;

  margin-bottom: 0.75rem; font-style: italic;

}

.fn-pb-sub { font-size: 13px; color: var(--fn-ink2); line-height: 1.7; font-weight: 300; }



.fn-sp-table {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 14px; overflow: hidden; margin-bottom: 2rem;

  box-shadow: var(--fn-shadow);

}

.fn-sp-row {

  display: flex; align-items: center; gap: 1.5rem;

  padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--fn-border);

}

.fn-sp-row:last-child { border-bottom: none; }

.fn-sp-accent { width: 4px; height: 52px; border-radius: 2px; flex-shrink: 0; }

.fn-bar-red-accent   { background: var(--fn-red-mid); }

.fn-bar-blue-accent  { background: var(--fn-blue-mid); }

.fn-bar-teal-accent  { background: var(--fn-teal-mid); }

.fn-bar-amber-accent { background: var(--fn-gold-mid); }

.fn-sp-info { flex: 1; }

.fn-sp-name { font-size: 14px; font-weight: 500; color: var(--fn-ink); margin-bottom: 3px; }

.fn-sp-note { font-size: 12px; color: var(--fn-ink3); margin-bottom: 8px; font-weight: 300; }

.fn-sp-note.fn-red { color: var(--fn-red); }

.fn-sp-bar-row { display: flex; align-items: center; gap: 10px; }

.fn-sp-track { flex: 1; height: 5px; background: var(--fn-bg3); border-radius: 3px; overflow: hidden; }

.fn-sp-fill  { height: 100%; border-radius: 3px; }

.fn-sp-pct  { font-size: 11px; color: var(--fn-ink4); width: 36px; }

.fn-sp-right { text-align: right; flex-shrink: 0; }

.fn-sp-big {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 22px; line-height: 1; color: var(--fn-ink);

}

.fn-sp-big.fn-red { color: var(--fn-red); }

.fn-sp-per    { font-size: 11px; color: var(--fn-ink3); margin-top: 3px; }

.fn-sp-source { font-size: 10px; color: var(--fn-ink4); margin-top: 2px; }



.fn-waste-total {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 44px; line-height: 1; margin-bottom: 6px;

}

.fn-eff2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }



/* ── GATEWAY ── */

.fn-gw-hero {

  padding: 4rem 0; text-align: center;

  background: var(--fn-bg2); border-bottom: 1px solid var(--fn-border);

  position: relative; overflow: hidden;

}

.fn-gw-glow {

  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);

  width: 700px; height: 200px; pointer-events: none;

  background: radial-gradient(ellipse,rgba(15,168,122,0.06),transparent);

}

.fn-gw-h2 {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 38px; color: var(--fn-ink); margin-bottom: 0.75rem; letter-spacing: -0.01em;

}

.fn-gw-sub {

  font-size: 16px; color: var(--fn-ink3); max-width: 560px;

  margin: 0 auto; font-weight: 300; line-height: 1.75;

}

.fn-gw-body { padding: 3rem 0; }

.fn-path2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }

.fn-pcard {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 16px; padding: 2.5rem; box-shadow: var(--fn-shadow);

}

.fn-pcard-feat { border-color: rgba(15,168,122,0.35); background: linear-gradient(135deg,rgba(15,168,122,0.04),var(--fn-card)); }

.fn-pcard-biz  { border-color: rgba(45,125,210,0.3);  background: linear-gradient(135deg,rgba(45,125,210,0.04),var(--fn-card)); }

.fn-feat-badge {

  display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.05em;

  text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 1.25rem;

  background: var(--fn-teal-lt); color: var(--fn-teal); border: 1px solid rgba(15,168,122,0.3);

}

.fn-biz-badge {

  display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.05em;

  text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 1.25rem;

  background: var(--fn-blue-lt); color: var(--fn-blue); border: 1px solid rgba(45,125,210,0.3);

}

.fn-pcard-icon {

  width: 52px; height: 52px; border-radius: 12px;

  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;

}

.fn-pcard-icon-teal { background: var(--fn-teal-lt); color: var(--fn-teal); }

.fn-pcard-icon-blue { background: var(--fn-blue-lt); color: var(--fn-blue); }

.fn-pcard-h3 {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 24px; color: var(--fn-ink); margin-bottom: 0.5rem;

}

.fn-pcard-desc { font-size: 14px; color: var(--fn-ink3); line-height: 1.7; margin-bottom: 1.5rem; font-weight: 300; }

.fn-fl { list-style: none; border-top: 1px solid var(--fn-border); padding-top: 1rem; margin-bottom: 1.5rem; }

.fn-fl li {

  font-size: 13px; color: var(--fn-ink3); padding: 7px 0;

  border-bottom: 1px solid var(--fn-border);

  display: flex; align-items: center; gap: 10px; font-weight: 300;

}

.fn-fl li:last-child { border-bottom: none; }

.fn-fck {

  width: 18px; height: 18px; border-radius: 50%;

  display: flex; align-items: center; justify-content: center; flex-shrink: 0;

}

.fn-fck-teal { background: var(--fn-teal-lt); color: var(--fn-teal); }

.fn-fck-blue { background: var(--fn-blue-lt); color: var(--fn-blue); }

.fn-pr-big {

  font-family: var(--ds-font-serif, 'DM Serif Display', serif);

  font-size: 28px; color: var(--fn-ink); line-height: 1; margin-bottom: 4px;

}

.fn-pr-big.fn-teal-text { color: var(--fn-teal); }

.fn-pr-mo   { font-family: inherit; font-size: 15px; color: var(--fn-ink3); }

.fn-pr-note { font-size: 12px; color: var(--fn-ink3); margin-bottom: 1.25rem; }

.fn-btn-teal-f {

  display: block; width: 100%; padding: 13px; border-radius: 8px; font-size: 14px;

  font-weight: 500; border: 1px solid rgba(10,122,88,0.4);

  background: var(--fn-teal-lt); color: var(--fn-teal);

  cursor: pointer; font-family: inherit; text-align: center;

}

.fn-btn-blue-f {

  display: block; width: 100%; padding: 13px; border-radius: 8px; font-size: 14px;

  font-weight: 500; border: 1px solid rgba(45,125,210,0.35);

  background: var(--fn-blue-lt); color: var(--fn-blue);

  cursor: pointer; font-family: inherit; text-align: center;

}

.fn-pp-box {

  background: var(--fn-card); border: 1px solid var(--fn-border);

  border-radius: 14px; padding: 2rem;

  display: flex; align-items: center; gap: 1.5rem;

  box-shadow: var(--fn-shadow);

}

.fn-pp-icon {

  width: 54px; height: 54px; border-radius: 12px;

  background: var(--fn-gold-lt); border: 1px solid rgba(200,134,10,0.3);

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0; color: var(--fn-gold-mid);

}

.fn-pp-txt h4 { font-size: 16px; font-weight: 500; color: var(--fn-ink); margin-bottom: 5px; }

.fn-pp-txt p  { font-size: 13px; color: var(--fn-ink3); font-weight: 300; }

.fn-btn-pp {

  padding: 10px 22px; border-radius: 8px; font-size: 13px;

  border: 1px solid rgba(200,134,10,0.4); background: var(--fn-gold-lt);

  color: var(--fn-gold-mid); cursor: pointer; margin-left: auto;

  flex-shrink: 0; font-family: inherit; font-weight: 500; white-space: nowrap;

}



/* ── FOOTER ── */

.fn-footer {

  background: var(--fn-ink); padding: 2.5rem; text-align: center;

}

[data-theme="dark"] .fn-footer {

  background: var(--fn-bg3); border-top: 1px solid var(--fn-border);

}

.fn-footer p { font-size: 12px; color: rgba(255,255,255,0.3); font-weight: 300; }

[data-theme="dark"] .fn-footer p { color: var(--fn-ink3); }



/* ── RESPONSIVE ── */

@media (max-width: 900px) {

  .fn-hero-h1 { font-size: 38px; }

  .fn-editorial-grid,

  .fn-pyr-grid,

  .fn-dash-2col,

  .fn-path2,

  .fn-eff2 { grid-template-columns: 1fr; }

  .fn-stat4,

  .fn-world-grid { grid-template-columns: repeat(2,1fr); }

  .fn-pillar-grid,

  .fn-pct-grid,

  .fn-sol-grid { grid-template-columns: 1fr; }

  .fn-ticker { grid-template-columns: repeat(2,1fr); }

  .fn-pp-box { flex-wrap: wrap; }

  .fn-btn-pp { margin-left: 0; }

}