/* ==========================================================================
FARMLAND INDIA — WIKI MASTER STYLESHEET (v2)
Load ONCE in the Next.js root layout (or paste in Admin > Blog & Wiki CSS).
Every wiki page/hub renders inside <div class="fi-wiki"> ... </div>
No page should ever contain its own <style> block or inline style="" again.
v2 = v1 unchanged + "V2 ADDITIONS" section appended at the bottom.
========================================================================== */
/* --------------------------------------------------------------------------
1. FONTS — loaded once, globally. No more per-page JS font injection.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
2. TOKENS — every color, font, spacing value used anywhere in the wiki.
Scoped to .fi-wiki so it can NEVER leak into the rest of the app.
-------------------------------------------------------------------------- */
.fi-wiki {
/* brand colors */
--fi-green-dark: #1C3A2A;
--fi-green-mid: #2D6B4A;
--fi-amber: #C9952A;
--fi-amber-dark: #B8841F;
--fi-white: #FFFFFF;
--fi-light: #F5F7F5;
--fi-border: #E0E8E2;
--fi-text: #1A1A1A;
--fi-muted: #6B7B72;
--fi-inactive: #C8D4CE;
/* traffic / status dots (used across article cards) */
--fi-dot-fire: #E65100;
--fi-dot-med: #2E7D32;
--fi-dot-low: #9CA3AF;
/* fonts */
--fi-font-display: 'Cormorant Garamond', serif;
--fi-font-body: 'Outfit', sans-serif;
--fi-font-mono: 'DM Mono', monospace;
/* spacing scale — 4px base */
--fi-sp-1: 4px; --fi-sp-2: 8px; --fi-sp-3: 12px; --fi-sp-4: 16px;
--fi-sp-5: 20px; --fi-sp-6: 24px; --fi-sp-8: 32px; --fi-sp-10: 40px;
--fi-sp-12: 48px; --fi-sp-16: 64px; --fi-sp-20: 80px;
/* radii & shadow */
--fi-r-sm: 8px; --fi-r-md: 12px; --fi-r-lg: 14px;
--fi-shadow-card: 0 14px 34px -18px rgba(28,58,42,0.4);
--fi-shadow-lift: 0 16px 38px -20px rgba(28,58,42,0.45);
/* base reset, scoped */
font-family: var(--fi-font-body);
color: var(--fi-text);
line-height: 1.6;
background: var(--fi-light);
}
.fi-wiki *{ box-sizing: border-box; }
.fi-wiki a{ text-decoration:none; color:inherit; }
.fi-wiki h1,.fi-wiki h2,.fi-wiki h3,.fi-wiki h4{ font-family:var(--fi-font-display); line-height:1.12; margin:0; }
.fi-wiki p{ margin:0; }
.fi-wiki .fi-mono{ font-family:var(--fi-font-mono); }
/* --------------------------------------------------------------------------
3. LAYOUT PRIMITIVES
-------------------------------------------------------------------------- */
.fi-wrap{ max-width:1240px; margin:0 auto; padding:0 var(--fi-sp-6); }
.fi-eyebrow{ font-family:var(--fi-font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.16em; color:var(--fi-amber); }
.fi-layout{ display:grid; grid-template-columns:200px 1fr 280px; gap:var(--fi-sp-8); padding:var(--fi-sp-10) 0; align-items:start; }
@media(max-width:1080px){ .fi-layout{ grid-template-columns:1fr 280px; } .fi-lnav{ display:none; } }
@media(max-width:820px){ .fi-layout{ grid-template-columns:1fr; } .fi-rrail{ order:2; } }
/* --------------------------------------------------------------------------
4. NAVIGATION
-------------------------------------------------------------------------- */
.fi-nav{ background:var(--fi-green-dark); position:sticky; top:0; z-index:60; border-bottom:1px solid rgba(255,255,255,0.08); }
.fi-nav-in{ display:flex; align-items:center; justify-content:space-between; padding:var(--fi-sp-3) var(--fi-sp-6); max-width:1240px; margin:0 auto; }
.fi-brand{ color:white; font-family:var(--fi-font-display); font-size:1.35rem; font-weight:700; }
.fi-brand span{ color:var(--fi-amber); }
.fi-nav-links{ display:flex; gap:var(--fi-sp-6); font-size:0.85rem; color:rgba(255,255,255,0.8); }
.fi-nav-links a:hover{ color:var(--fi-amber); }
.fi-nav-cta{ background:var(--fi-amber); color:var(--fi-green-dark); padding:var(--fi-sp-2) var(--fi-sp-4); border-radius:6px; font-size:0.82rem; font-weight:600; }
@media(max-width:820px){ .fi-nav-links{ display:none; } }
.fi-crumb{ background:var(--fi-white); border-bottom:1px solid var(--fi-border); font-family:var(--fi-font-mono); font-size:0.72rem; color:var(--fi-muted); }
.fi-crumb .fi-wrap{ padding:var(--fi-sp-3) var(--fi-sp-6); }
.fi-crumb a:hover{ color:var(--fi-green-mid); }
.fi-crumb b{ color:var(--fi-text); font-weight:500; }
/* --------------------------------------------------------------------------
5. HERO (hub pages)
-------------------------------------------------------------------------- */
.fi-hero{ background:radial-gradient(900px 380px at 85% -20%, rgba(45,107,74,0.5), transparent 60%), var(--fi-green-dark); color:white; position:relative; overflow:hidden; }
.fi-hero::before{ content:""; position:absolute; inset:0;
background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
background-size:44px 44px; mask-image:radial-gradient(circle at 70% 20%, black, transparent 75%); }
.fi-hero-in{ position:relative; padding:var(--fi-sp-12) 0 var(--fi-sp-10); }
.fi-hero-ico{ font-size:2.6rem; }
.fi-hero h1{ font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:600; margin-top:var(--fi-sp-2); }
.fi-hero h1 em{ font-style:italic; color:var(--fi-amber); }
.fi-hero-sub{ max-width:680px; margin-top:var(--fi-sp-3); color:rgba(255,255,255,0.82); font-weight:300; font-size:1.05rem; }
.fi-hero-meta{ display:flex; gap:var(--fi-sp-5); margin-top:var(--fi-sp-5); align-items:center; flex-wrap:wrap; }
.fi-chip{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:var(--fi-r-sm); padding:var(--fi-sp-2) var(--fi-sp-4); font-family:var(--fi-font-mono); font-size:0.75rem; color:rgba(255,255,255,0.85); }
.fi-chip b{ color:var(--fi-amber); }
.fi-search{ position:relative; max-width:380px; flex:1; min-width:240px; }
.fi-search input{ width:100%; padding:0.6rem 0.9rem 0.6rem 2.4rem; border-radius:var(--fi-r-sm); border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.07); color:white; font-family:var(--fi-font-body); font-size:0.88rem; }
.fi-search input::placeholder{ color:rgba(255,255,255,0.5); }
.fi-search input:focus{ outline:none; border-color:var(--fi-amber); }
.fi-search svg{ position:absolute; left:0.8rem; top:50%; transform:translateY(-50%); opacity:0.5; }
/* --------------------------------------------------------------------------
6. CARDS — pillar cards, article cards, feature cards, tool cards
-------------------------------------------------------------------------- */
.fi-pcard{ border:1px solid var(--fi-border); border-radius:var(--fi-r-lg); padding:var(--fi-sp-5); background:var(--fi-white);
transition:transform 0.18s,box-shadow 0.18s,border-color 0.18s; display:flex; flex-direction:column; }
.fi-pcard:hover{ transform:translateY(-3px); box-shadow:var(--fi-shadow-card); border-color:var(--fi-green-mid); }
.fi-pcard-ico{ font-size:1.5rem; }
.fi-pcard-title{ font-size:1.32rem; font-weight:600; margin-top:var(--fi-sp-2); color:var(--fi-green-dark); }
.fi-pcard-sub{ font-size:0.82rem; color:var(--fi-muted); margin-top:var(--fi-sp-1); line-height:1.45; }
.fi-acard{ background:var(--fi-white); border:1px solid var(--fi-border); border-radius:9px; padding:var(--fi-sp-3) var(--fi-sp-4);
display:flex; align-items:center; gap:var(--fi-sp-3); transition:all 0.15s; }
.fi-acard:hover{ border-color:var(--fi-green-mid); transform:translateX(2px); box-shadow:0 6px 16px -10px rgba(28,58,42,0.4); }
.fi-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.fi-dot-fire{ background:var(--fi-dot-fire); } .fi-dot-med{ background:var(--fi-dot-med); } .fi-dot-low{ background:var(--fi-dot-low); }
.fi-acard .fi-t{ font-size:0.86rem; font-weight:500; }
.fi-acard .fi-ar{ margin-left:auto; color:var(--fi-amber); opacity:0; transition:opacity 0.15s; }
.fi-acard:hover .fi-ar{ opacity:1; }
.fi-cluster{ margin-bottom:var(--fi-sp-10); scroll-margin-top:90px; }
.fi-cluster-h{ display:flex; align-items:baseline; gap:var(--fi-sp-3); border-bottom:2px solid var(--fi-border); padding-bottom:var(--fi-sp-2); margin-bottom:var(--fi-sp-4); }
.fi-cluster-h h3{ font-size:1.55rem; font-weight:600; color:var(--fi-green-dark); }
.fi-cluster-h .fi-c{ font-family:var(--fi-font-mono); font-size:0.7rem; color:var(--fi-muted); }
.fi-alist{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--fi-sp-3); }
@media(max-width:560px){ .fi-alist{ grid-template-columns:1fr; } }
/* --------------------------------------------------------------------------
7. RIGHT RAIL — tool box, related pillars, CTA
-------------------------------------------------------------------------- */
.fi-rrail{ position:sticky; top:90px; display:flex; flex-direction:column; gap:var(--fi-sp-4); }
.fi-toolbox{ background:var(--fi-white); border:1px solid var(--fi-border); border-radius:var(--fi-r-md); padding:var(--fi-sp-5); }
.fi-toolbox h4{ font-size:1.25rem; font-weight:600; color:var(--fi-green-dark); margin-top:var(--fi-sp-2); }
.fi-toolbox p{ font-size:0.8rem; color:var(--fi-muted); margin-top:var(--fi-sp-1); }
.fi-btn{ display:block; text-align:center; margin-top:var(--fi-sp-3); background:var(--fi-green-dark); color:white; border-radius:var(--fi-r-sm); padding:var(--fi-sp-3); font-size:0.82rem; font-weight:500; transition:background 0.15s; }
.fi-btn:hover{ background:var(--fi-green-mid); }
.fi-related{ background:var(--fi-white); border:1px solid var(--fi-border); border-radius:var(--fi-r-md); padding:var(--fi-sp-5); }
.fi-related a{ display:flex; align-items:center; gap:var(--fi-sp-2); font-size:0.85rem; padding:var(--fi-sp-2) 0; border-bottom:1px solid var(--fi-border); }
.fi-related a:last-child{ border-bottom:none; }
.fi-related a:hover{ color:var(--fi-green-mid); }
.fi-ctabox{ background:linear-gradient(135deg,var(--fi-amber),var(--fi-amber-dark)); color:var(--fi-green-dark); border-radius:var(--fi-r-md); padding:var(--fi-sp-5); }
.fi-ctabox h4{ font-size:1.3rem; font-weight:700; }
.fi-ctabox p{ font-size:0.8rem; margin-top:var(--fi-sp-1); opacity:0.85; }
.fi-ctabox a{ display:block; text-align:center; margin-top:var(--fi-sp-3); background:var(--fi-green-dark); color:white; border-radius:var(--fi-r-sm); padding:var(--fi-sp-3); font-size:0.82rem; font-weight:500; }
/* --------------------------------------------------------------------------
8. TABLE MODULE
-------------------------------------------------------------------------- */
.fi-table-wrap{ background:var(--fi-white); border:1px solid var(--fi-border); border-radius:var(--fi-r-md); overflow:hidden; margin-bottom:var(--fi-sp-10); }
.fi-table-wrap table{ width:100%; border-collapse:collapse; }
.fi-table-wrap th{ background:var(--fi-green-dark); color:white; font-family:var(--fi-font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:500; padding:var(--fi-sp-3) var(--fi-sp-4); text-align:left; }
.fi-table-wrap td{ padding:var(--fi-sp-3) var(--fi-sp-4); border-bottom:1px solid var(--fi-border); font-size:0.85rem; }
.fi-table-wrap td:first-child{ font-weight:600; color:var(--fi-green-dark); }
.fi-table-wrap tr:last-child td{ border-bottom:none; }
.fi-table-note{ padding:var(--fi-sp-3) var(--fi-sp-4); background:#FFF8E1; font-size:0.76rem; color:#5D4037; border-top:1px solid var(--fi-border); }
/* --------------------------------------------------------------------------
9. FAQ (native <details>, zero JS)
-------------------------------------------------------------------------- */
.fi-faq{ border:1px solid var(--fi-border); border-radius:var(--fi-r-sm); margin-bottom:var(--fi-sp-3); background:var(--fi-light); }
.fi-faq summary{ padding:var(--fi-sp-4); font-weight:500; cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-size:0.95rem; }
.fi-faq summary::-webkit-details-marker{ display:none; }
.fi-faq summary::after{ content:"+"; color:var(--fi-amber); font-size:1.4rem; font-family:var(--fi-font-mono); }
.fi-faq[open] summary::after{ content:"\2212"; }
.fi-faq p{ padding:0 var(--fi-sp-4) var(--fi-sp-4); color:var(--fi-muted); font-size:0.88rem; }
.fi-faq p a{ color:var(--fi-green-mid); font-family:var(--fi-font-mono); font-size:0.76rem; }
/* --------------------------------------------------------------------------
10. BUTTONS, BADGES, MISC
-------------------------------------------------------------------------- */
.fi-badge{ font-family:var(--fi-font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.08em; padding:2px 8px; border-radius:20px; border:1px solid var(--fi-border); background:var(--fi-light); color:var(--fi-green-mid); }
.fi-cta-btn{ display:inline-block; background:var(--fi-amber); color:var(--fi-green-dark); font-weight:600; padding:var(--fi-sp-4) var(--fi-sp-8); border-radius:var(--fi-r-sm); font-size:0.98rem; transition:transform 0.16s; }
.fi-cta-btn:hover{ transform:translateY(-2px); }
/* --------------------------------------------------------------------------
11. MOTION
-------------------------------------------------------------------------- */
.fi-reveal{ opacity:0; transform:translateY(12px); animation:fi-rise 0.55s ease forwards; }
@keyframes fi-rise{ to{ opacity:1; transform:none; } }
/* --------------------------------------------------------------------------
12. FOOTER
-------------------------------------------------------------------------- */
.fi-footer{ background:#142a1e; color:rgba(255,255,255,0.5); font-size:0.78rem; text-align:center; padding:var(--fi-sp-8) var(--fi-sp-6); }
.fi-footer .fi-mono{ color:rgba(255,255,255,0.4); }
/* ==========================================================================
██ V2 ADDITIONS — appended 18 Jul 2026. Nothing above this line changed.
██ New modules introduced by the P1 (Land Measurement) hub build.
██ All classes remain scoped under .fi-wiki.
========================================================================== */
/* --------------------------------------------------------------------------
13. LEFT RAIL — "On this page" nav (referenced by v1 media query,
now properly defined) with scroll-spy active state.
-------------------------------------------------------------------------- */
.fi-lnav{ position:sticky; top:90px; font-size:0.8rem; }
.fi-lnav-h{ font-family:var(--fi-font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--fi-muted); margin-bottom:var(--fi-sp-3); }
.fi-lnav a{ display:block; padding:var(--fi-sp-2) var(--fi-sp-3); color:var(--fi-muted); border-left:2px solid var(--fi-border); transition:all 0.15s; line-height:1.35; }
.fi-lnav a:hover{ color:var(--fi-green-mid); border-left-color:var(--fi-inactive); }
.fi-lnav a.fi-on{ color:var(--fi-green-dark); font-weight:600; border-left-color:var(--fi-amber); background:linear-gradient(90deg, rgba(201,149,42,0.08), transparent 70%); }
/* --------------------------------------------------------------------------
14. HERO EXTENSIONS — pillar hubs get a ghost glyph watermark, a pillar
tag, and staggered entrance. Add .fi-hero-hub next to .fi-hero.
-------------------------------------------------------------------------- */
.fi-hero-hub .fi-hero-in{ padding:var(--fi-sp-16) 0 var(--fi-sp-12); }
.fi-hero-ghost{ position:absolute; right:-1.5rem; bottom:-3.2rem; font-family:var(--fi-font-display); font-style:italic; font-weight:600;
font-size:clamp(7rem,18vw,15rem); line-height:1; color:rgba(255,255,255,0.045); pointer-events:none; user-select:none; white-space:nowrap; }
.fi-hero-tag{ display:inline-flex; align-items:center; gap:var(--fi-sp-2); background:rgba(201,149,42,0.12); border:1px solid rgba(201,149,42,0.4);
border-radius:20px; padding:var(--fi-sp-1) var(--fi-sp-4); font-family:var(--fi-font-mono); font-size:0.68rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--fi-amber); }
.fi-hero-rule{ width:64px; height:3px; margin-top:var(--fi-sp-5); background:linear-gradient(90deg,var(--fi-amber),transparent); border-radius:2px; }
/* stagger helpers for .fi-reveal */
.fi-d1{ animation-delay:0.08s; } .fi-d2{ animation-delay:0.16s; } .fi-d3{ animation-delay:0.24s; }
.fi-d4{ animation-delay:0.32s; } .fi-d5{ animation-delay:0.40s; } .fi-d6{ animation-delay:0.48s; }
/* --------------------------------------------------------------------------
15. SECTION HEADS — eyebrow + display heading + sub, used mid-column.
-------------------------------------------------------------------------- */
.fi-sechead{ margin-bottom:var(--fi-sp-5); }
.fi-sechead h2{ font-size:clamp(1.7rem,3vw,2.2rem); font-weight:600; color:var(--fi-green-dark); margin-top:var(--fi-sp-1); }
.fi-sechead .fi-ssub{ font-size:0.9rem; color:var(--fi-muted); margin-top:var(--fi-sp-2); max-width:640px; }
/* --------------------------------------------------------------------------
16. START-HERE BAND — three-step orientation strip for first-time readers.
-------------------------------------------------------------------------- */
.fi-start{ background:var(--fi-white); border:1px solid var(--fi-border); border-left:4px solid var(--fi-amber);
border-radius:0 var(--fi-r-md) var(--fi-r-md) 0; padding:var(--fi-sp-5); margin-bottom:var(--fi-sp-10);
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--fi-sp-5); }
.fi-start-step{ position:relative; padding-left:var(--fi-sp-8); }
.fi-start-n{ position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--fi-green-dark); color:var(--fi-amber);
font-family:var(--fi-font-mono); font-size:0.72rem; display:flex; align-items:center; justify-content:center; }
.fi-start-t{ font-weight:600; font-size:0.9rem; color:var(--fi-green-dark); }
.fi-start-d{ font-size:0.78rem; color:var(--fi-muted); margin-top:2px; line-height:1.45; }
.fi-start-t a{ border-bottom:1px dotted var(--fi-amber); }
@media(max-width:700px){ .fi-start{ grid-template-columns:1fr; } }
/* --------------------------------------------------------------------------
17. CONVERTER WIDGET — the pillar's signature interactive module.
-------------------------------------------------------------------------- */
.fi-conv{ background:var(--fi-green-dark); border-radius:var(--fi-r-lg); padding:var(--fi-sp-6); color:white; margin-bottom:var(--fi-sp-10);
position:relative; overflow:hidden; }
.fi-conv::before{ content:""; position:absolute; inset:0;
background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
background-size:36px 36px; mask-image:radial-gradient(circle at 85% 15%, black, transparent 70%); pointer-events:none; }
.fi-conv-in{ position:relative; }
.fi-conv-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--fi-sp-4); align-items:end; margin-top:var(--fi-sp-4); }
.fi-conv label{ display:block; font-family:var(--fi-font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.12em;
color:rgba(255,255,255,0.55); margin-bottom:var(--fi-sp-2); }
.fi-conv input,.fi-conv select{ width:100%; padding:0.65rem 0.8rem; border-radius:var(--fi-r-sm); border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.08); color:white; font-family:var(--fi-font-body); font-size:0.95rem; }
.fi-conv select option{ color:var(--fi-text); background:var(--fi-white); }
.fi-conv input:focus,.fi-conv select:focus{ outline:none; border-color:var(--fi-amber); }
.fi-conv-swap{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.08);
color:var(--fi-amber); font-size:1rem; cursor:pointer; transition:all 0.15s; align-self:end; margin-bottom:1px; }
.fi-conv-swap:hover{ background:var(--fi-amber); color:var(--fi-green-dark); transform:rotate(180deg); }
.fi-conv-out{ margin-top:var(--fi-sp-5); border-top:1px solid rgba(255,255,255,0.12); padding-top:var(--fi-sp-4);
display:flex; align-items:baseline; gap:var(--fi-sp-3); flex-wrap:wrap; }
.fi-conv-num{ font-family:var(--fi-font-mono); font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--fi-amber); font-weight:500; }
.fi-conv-unit{ font-size:0.9rem; color:rgba(255,255,255,0.75); }
.fi-conv-alt{ width:100%; display:flex; gap:var(--fi-sp-2); flex-wrap:wrap; margin-top:var(--fi-sp-3); }
.fi-conv-altchip{ font-family:var(--fi-font-mono); font-size:0.68rem; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
border-radius:20px; padding:3px 10px; color:rgba(255,255,255,0.75); }
.fi-conv-note{ font-size:0.72rem; color:rgba(255,255,255,0.45); margin-top:var(--fi-sp-3); }
@media(max-width:700px){ .fi-conv-grid{ grid-template-columns:1fr; } .fi-conv-swap{ justify-self:center; transform:rotate(90deg); } .fi-conv-swap:hover{ transform:rotate(270deg); } }
/* --------------------------------------------------------------------------
18. UNIT SCALE BARS — proportional size of every unit vs 1 acre.
-------------------------------------------------------------------------- */
.fi-scale{ background:var(--fi-white); border:1px solid var(--fi-border); border-radius:var(--fi-r-md); padding:var(--fi-sp-5); margin-bottom:var(--fi-sp-10); }
.fi-scale-row{ display:grid; grid-template-columns:170px 1fr 92px; gap:var(--fi-sp-3); align-items:center; padding:var(--fi-sp-2) 0; }
.fi-scale-row + .fi-scale-row{ border-top:1px dashed var(--fi-border); }
.fi-scale-n{ font-size:0.82rem; font-weight:500; color:var(--fi-green-dark); line-height:1.3; }
.fi-scale-n small{ display:block; font-family:var(--fi-font-mono); font-size:0.62rem; color:var(--fi-muted); font-weight:400; }
.fi-scale-track{ height:14px; background:var(--fi-light); border-radius:7px; overflow:hidden; }
.fi-scale-fill{ height:100%; border-radius:7px; background:linear-gradient(90deg,var(--fi-green-mid),var(--fi-green-dark)); min-width:4px;
transform-origin:left; animation:fi-grow 0.9s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.fi-scale-fill.fi-gold{ background:linear-gradient(90deg,var(--fi-amber),var(--fi-amber-dark)); }
@keyframes fi-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.fi-scale-v{ font-family:var(--fi-font-mono); font-size:0.7rem; color:var(--fi-muted); text-align:right; }
@media(max-width:640px){ .fi-scale-row{ grid-template-columns:1fr 70px; } .fi-scale-track{ grid-column:1 / -1; order:3; } }
/* --------------------------------------------------------------------------
19. STATE CARDS — corridor states grid with unit chips.
-------------------------------------------------------------------------- */
.fi-sgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--fi-sp-4); }
@media(max-width:700px){ .fi-sgrid{ grid-template-columns:1fr; } }
.fi-scard{ background:var(--fi-white); border:1px solid var(--fi-border); border-top:3px solid var(--fi-green-mid); border-radius:var(--fi-r-md);
padding:var(--fi-sp-5); transition:transform 0.18s, box-shadow 0.18s; display:flex; flex-direction:column; gap:var(--fi-sp-3); }
.fi-scard:hover{ transform:translateY(-3px); box-shadow:var(--fi-shadow-card); }
.fi-scard-h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--fi-sp-2); }
.fi-scard-h h3{ font-size:1.4rem; font-weight:600; color:var(--fi-green-dark); }
.fi-scard-units{ display:flex; flex-wrap:wrap; gap:var(--fi-sp-2); }
.fi-uchip{ font-family:var(--fi-font-mono); font-size:0.66rem; background:var(--fi-light); border:1px solid var(--fi-border); border-radius:20px;
padding:3px 10px; color:var(--fi-green-mid); }
.fi-scard-fact{ font-size:0.8rem; color:var(--fi-muted); line-height:1.5; border-left:2px solid var(--fi-amber); padding-left:var(--fi-sp-3); }
.fi-scard-fact b{ color:var(--fi-text); font-weight:600; }
.fi-scard-links{ margin-top:auto; display:flex; flex-direction:column; gap:var(--fi-sp-2); }
/* --------------------------------------------------------------------------
20. CALLOUTS — anomaly / caution / good-to-know notes.
-------------------------------------------------------------------------- */
.fi-callout{ border:1px solid var(--fi-border); border-left:4px solid var(--fi-green-mid); background:var(--fi-white);
border-radius:0 var(--fi-r-md) var(--fi-r-md) 0; padding:var(--fi-sp-5); margin-bottom:var(--fi-sp-10); }
.fi-callout.fi-warn{ border-left-color:var(--fi-dot-fire); background:#FFF9F2; }
.fi-callout-k{ font-family:var(--fi-font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--fi-muted); }
.fi-callout h3{ font-size:1.45rem; font-weight:600; color:var(--fi-green-dark); margin-top:var(--fi-sp-1); }
.fi-callout p{ font-size:0.88rem; color:var(--fi-muted); margin-top:var(--fi-sp-2); line-height:1.6; }
.fi-callout p b{ color:var(--fi-text); }
.fi-callout .fi-more{ display:inline-block; margin-top:var(--fi-sp-3); font-size:0.8rem; font-weight:600; color:var(--fi-green-mid); border-bottom:1px dotted var(--fi-amber); }
/* --------------------------------------------------------------------------
21. KEYWORD CLOUD + HINDI SECTION
-------------------------------------------------------------------------- */
.fi-kwcloud{ display:flex; flex-wrap:wrap; gap:var(--fi-sp-2); margin-bottom:var(--fi-sp-10); }
.fi-kwpill{ font-size:0.74rem; background:var(--fi-white); border:1px solid var(--fi-border); border-radius:20px; padding:5px 13px;
color:var(--fi-green-mid); font-weight:500; transition:all 0.15s; }
.fi-kwpill:hover{ border-color:var(--fi-green-mid); background:var(--fi-light); }
.fi-hindi{ scroll-margin-top:90px; margin-bottom:var(--fi-sp-10); }
.fi-hindi .fi-hey{ font-family:var(--fi-font-mono); font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--fi-amber); }
.fi-hindi h2{ font-size:clamp(1.6rem,2.8vw,2rem); color:var(--fi-green-dark); margin:var(--fi-sp-1) 0 var(--fi-sp-4); }
/* --------------------------------------------------------------------------
22. BACK-TO-TOP + ACCESSIBILITY
-------------------------------------------------------------------------- */
.fi-btt{ position:fixed; right:22px; bottom:22px; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
background:var(--fi-green-dark); color:var(--fi-amber); font-size:1.1rem; box-shadow:var(--fi-shadow-lift); opacity:0;
pointer-events:none; transition:opacity 0.25s; z-index:70; }
.fi-btt.fi-show{ opacity:1; pointer-events:auto; }
.fi-wiki a:focus-visible,.fi-wiki button:focus-visible,.fi-wiki input:focus-visible,.fi-wiki select:focus-visible,.fi-wiki summary:focus-visible{
outline:2px solid var(--fi-amber); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){
.fi-wiki *{ animation-duration:0.01ms !important; animation-delay:0s !important; transition-duration:0.01ms !important; }
.fi-reveal{ opacity:1; transform:none; }
}
/* ==========================================================================
END v2 — one file, every wiki page references these classes only.
========================================================================== */
/* --------------------------------------------------------------------------
23. UTILITIES USED BY P1 — converter heading, spacing, scale-bar widths.
(Width utilities keep pages free of inline style="" while letting
proportional bars stay data-accurate.)
-------------------------------------------------------------------------- */
.fi-conv-h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:600; color:#fff; margin-top:var(--fi-sp-1); }
.fi-conv-gap{ margin-top:var(--fi-sp-3); }
.fi-w100{ width:100%; } .fi-w62{ width:62.5%; } .fi-w50{ width:50%; } .fi-w40{ width:40%; }
.fi-w20{ width:20%; } .fi-w16{ width:15.6%; } .fi-w12{ width:12.5%; } .fi-w5{ width:5%; }
.fi-w3{ width:3.1%; } .fi-w1{ width:1.4%; }