/* ── SHARED VARIABLES & BASE ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

:root {
  --green:        #1a9e6e;
  --green-dark:   #157a56;
  --green-banner: #1a7a5e;
  --green-light:  #e8f7f1;
  --orange:       #f97316;
  --orange-dark:  #ea6c0a;
  --text:         #111827;
  --text-muted:   #6b7280;
  --border:       #e5e7eb;
  --bg-light:     #f9fafb;
  --bg-sidebar:   #0f172a;
  --white:        #ffffff;
  --radius:       12px;
  --shadow:       0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.13);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); line-height: 1.6; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.8px; }
h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.5px; }
h3 { font-size: 1rem; font-weight: 700; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px; border-radius: 8px; font-weight: 600;
  font-size: 0.85rem; cursor: pointer; border: none;
  text-decoration: none; transition: all .15s; white-space: nowrap;
  font-family: inherit;
}
.btn-sm { padding: 6px 14px; font-size: 0.78rem; border-radius: 6px; }
.btn-lg { padding: 12px 28px; font-size: 0.95rem; border-radius: 10px; }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--text); }
.btn-orange { background: var(--orange); color: var(--white); }
.btn-orange:hover { background: var(--orange-dark); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-dark); }
.btn-green-outline { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-green-outline:hover { background: var(--green-light); }
.btn-white-solid { background: var(--white); color: var(--green-dark); font-weight: 700; }
.btn-white-outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.5); }
.btn-white-outline:hover { background: rgba(255,255,255,0.1); }
.btn-danger { background: #fee2e2; color: #dc2626; border: 1.5px solid #fecaca; }
.btn-danger:hover { background: #fecaca; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 8px; }


/* ── FORM ELEMENTS ───────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.88rem; font-family: inherit; color: var(--text);
  background: var(--white); outline: none; transition: border-color .15s;
}
.form-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,158,110,0.1); }
.form-input::placeholder { color: #9ca3af; }
.form-select {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.88rem; font-family: inherit; color: var(--text);
  background: var(--white); outline: none; cursor: pointer;
}
.form-select:focus { border-color: var(--green); }
.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 0.75rem; color: #dc2626; margin-top: 4px; }

/* ── BADGES / TAGS ───────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 600; }
.badge-green { background: var(--green-light); color: var(--green-dark); }
.badge-orange { background: #fff7ed; color: #c2410c; }
.badge-blue { background: #eff6ff; color: #1d4ed8; }
.badge-purple { background: #f5f3ff; color: #6d28d9; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-gray { background: var(--bg-light); color: var(--text-muted); }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }

/* ── TABLES ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
thead th { padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: var(--bg-light); }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-light); }

/* ── APP LAYOUT (sidebar) ────────────────────────────────── */
.app-layout { display: flex; flex: 1; }

.sidebar, aside.sidebar, .app-layout > .sidebar {
  width: 240px; min-height: 100%;
  /* v3.99.421: match the footer's dark slate (#111827) instead of pure black.
     Max specificity + !important so no page-level or demo-mode rule re-tints it
     (served network-first via sw.js so it reaches users without a stale cycle). */
  background: #111827 !important;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  /* v3.99.404: the public top-nav (#navbar, 60px, sticky) is now injected
     above the app layout on every in-app page, so the sticky sidebar starts
     just below it instead of at the very top. */
  position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
}
/* v3.99.395: belt-and-braces — every child container inside the sidebar
   defaults to transparent at rest so nothing tints the column. Inline
   icon backgrounds (small green/blue/orange chip backgrounds on token
   widget icons) are scoped to .sidebar-sbt-action-icon so they survive. */
.sidebar > *, .sidebar nav, .sidebar-nav, .sidebar-sbt-widget, .sidebar-sbt-panel, .sidebar-user { background: transparent !important; }
/* v3.99.405: defensive override with enough specificity to beat any global
   `html[data-demo] nav` (0,1,2) tint — the in-app sidebar's inner <nav> must
   never pick up the demo-mode green; it stays transparent over the black aside. */
html[data-demo] .sidebar nav, html[data-demo] aside.sidebar .sidebar-nav, html[data-demo] .app-layout .sidebar nav { background: transparent !important; }

/* v3.99.409: connected-SfT badge mounted at the top of the sidebar (above the
   tab list, injected by shared-appnav.js). The pill reads on the black column;
   its dropdown would otherwise be clipped by .sidebar { overflow-y:auto }, so
   it's pinned position:fixed just under the button. */
.sidebar-sft { padding: 14px 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sidebar-sft .sf-sft-badge { display: block; }
.sidebar-sft .sf-sft-btn { width: 100%; justify-content: flex-start; }
.sidebar-sft .sf-sft-menu { position: fixed; left: 14px; top: 104px; right: auto; max-height: calc(100vh - 130px); overflow-y: auto; }
.sidebar-sft .sf-sft-btn { cursor: pointer; }
/* v3.99.413: the 2-item accordion that drops under the sidebar SfT button. */
.sidebar-sft-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.sidebar-sft-sub .sidebar-link { font-size: 0.84rem; }
/* v3.99.414: connected-token title row (replaces the pill) — dot + name + eject,
   or "Connect SfT" + Connect button when not connected. */
.sidebar-sft-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; min-height: 26px; }
.sidebar-sft-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,0.15); flex-shrink: 0; }
.sidebar-sft-name { flex: 1; font-size: 0.82rem; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-sft-eject { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 3px 5px; border-radius: 6px; flex-shrink: 0; }
.sidebar-sft-eject:hover { color: #f87171; background: rgba(255,255,255,0.07); }
.sidebar-sft-connect { background: linear-gradient(135deg,#1a9e6e,#0f7a55); color: #fff; border: none; border-radius: 7px; font-size: 0.7rem; font-weight: 700; padding: 5px 12px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.sidebar-sft-connect:hover { filter: brightness(1.08); }
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
}
.sidebar-logo-icon {
  width: 32px; height: 32px; background: none;
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 16px; flex-shrink: 0;
  padding: 0; overflow: hidden;
}
.sidebar-logo-text strong { color: #f8fafc; font-size: 0.95rem; font-weight: 700; display: block; letter-spacing: -0.2px; }
.sidebar-logo-text span { color: rgba(255,255,255,0.35); font-size: 0.65rem; }

/* ── Connected SbT token widget ──────────────────────────── */
/* v3.99.394: removed resting-state translucent overlays on sidebar widgets
   so the column reads as truly black; hover states keep their faint tint. */
.sidebar-sbt-widget { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sidebar-sbt-trigger { display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;background:transparent;transition:background .15s;user-select:none; }
.sidebar-sbt-trigger:hover { background:rgba(255,255,255,0.06); }
.sidebar-sbt-icon { width:24px;height:24px;border-radius:6px;overflow:hidden;flex-shrink:0;background:rgba(26,158,110,0.3);display:flex;align-items:center;justify-content:center; }
.sidebar-sbt-icon img { width:100%;height:100%;object-fit:cover;display:block; }
.sidebar-sbt-label { flex:1;min-width:0; }
.sidebar-sbt-label div:first-child { font-size:0.7rem;font-weight:700;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sidebar-sbt-label div:last-child { font-size:0.58rem;color:rgba(255,255,255,0.35); }
.sidebar-sbt-dot { width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0; }
.sidebar-sbt-panel { display:none;margin-top:4px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.07); }
.sidebar-sbt-panel.open { display:block; }
.sidebar-sbt-action { display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;transition:background .12s;text-decoration:none; }
.sidebar-sbt-action:hover { background:rgba(255,255,255,0.05); }
.sidebar-sbt-action-icon { width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0; }
.sidebar-sbt-action-text { font-size:0.74rem;font-weight:500;color:rgba(255,255,255,0.7); }
.sidebar-sbt-action-sub { font-size:0.58rem;color:rgba(255,255,255,0.3); }

.sidebar-nav { padding: 12px 10px; flex: 1; }
.sidebar-section-label { font-size: 0.59rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.28); padding: 10px 10px 6px; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  text-decoration: none; color: rgba(255,255,255,0.52);
  font-size: 0.84rem; font-weight: 500; transition: all .15s;
  margin-bottom: 2px;
}
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: #f1f5f9; }
.sidebar-link.active { background: rgba(26,158,110,0.18); color: #4ade80; }
.sidebar-link .icon { width: 18px; text-align: center; font-size: 0.95rem; flex-shrink: 0; }
.sidebar-link .badge-count { margin-left: auto; background: var(--green); color: var(--white); font-size: 0.65rem; font-weight: 700; padding: 1px 7px; border-radius: 50px; }

.sidebar-user {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); display: flex; align-items: center;
  justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--white);
  flex-shrink: 0;
}
.sidebar-user-name { font-size: 0.82rem; font-weight: 600; color: #f1f5f9; }
.sidebar-user-role { font-size: 0.68rem; color: rgba(255,255,255,0.35); }

/* Main app content */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-light); }

/* v3.99.404: the per-page app top-bar is replaced by the injected public
   #navbar (see shared-appnav.js). Hidden globally so we don't have to strip
   the <div class="topbar"> markup from every in-app page. */
.topbar {
  display: none !important;
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 0 28px; height: 60px;
  align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.topbar-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--bg-light); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; text-decoration: none; color: var(--text-muted);
  transition: all .15s;
}
.topbar-icon-btn:hover { background: var(--green-light); color: var(--green); }

.page-content { padding: 28px; flex: 1; }

/* ── STAT CARDS ──────────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.stat-card-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; margin-bottom: 6px; }
.stat-card-value { font-size: 1.6rem; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
.stat-card-value.green { color: var(--green); }
.stat-card-change { font-size: 0.72rem; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.stat-card-change.up { color: var(--green); }
.stat-card-change.down { color: #dc2626; }

/* ── DIVIDER ─────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ── AVATAR ──────────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; color: var(--white);
  flex-shrink: 0;
}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state-sub { font-size: 0.82rem; }

/* ── GRID UTILITIES ──────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gap-4 { gap: 16px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ── SITE FOOTER (matches landing page) ──────────────────── */
.sf-footer { background: #111827; padding: 56px 6% 28px; }
.sf-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; max-width: 1280px; margin-left: auto; margin-right: auto; }
.sf-footer-brand p { color: rgba(255,255,255,.45); font-size: .82rem; line-height: 1.7; margin-top: 12px; max-width: 260px; }
.sf-footer-brand-logo { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 1rem; }
.sf-footer-col h5 { color: #fff; font-size: .83rem; font-weight: 700; margin-bottom: 14px; }
.sf-footer-col ul { list-style: none; padding: 0; }
.sf-footer-col li { margin-bottom: 9px; font-size: .8rem; }
.sf-footer-col a { color: rgba(255,255,255,.45); font-size: .8rem; text-decoration: none; transition: color .15s; }
.sf-footer-col a:hover { color: #1a9e6e; }
.sf-footer-bottom { max-width: 1280px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.sf-footer-bottom p { color: rgba(255,255,255,.3); font-size: .75rem; }
.sf-footer-bottom-links { display: flex; gap: 18px; }
.sf-footer-bottom-links a { color: rgba(255,255,255,.3); font-size: .75rem; text-decoration: none; }
.sf-footer-bottom-links a:hover { color: rgba(255,255,255,.6); }
@media (max-width: 768px) {
  .sf-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sf-footer-top { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   LAND1 DESIGN SYSTEM (canonical — extracted from land1.html)
   Lets every page inherit the homepage's tokens, button, eyebrow,
   accent and ticker keyframe. Older --green/--orange/--text tokens
   above are kept for backwards-compat with app pages.
   ────────────────────────────────────────────────────────── */
:root{
  --sf-green:#15803d;
  --sf-green-dark:#14532d;
  --sf-green-bright:#22c55e;
  --sf-green-glow:#86efac;
  --sf-green-light:#d1fae5;
  --sf-green-tint:#f0fdf4;
  --sf-amber:#f59e0b;
  --sf-amber-dark:#7c2d12;
  --sf-amber-deep:#9a3412;
  --sf-amber-tint:#fef3c7;
  --sf-blue:#2563eb;
  --sf-blue-tint:#dbeafe;
  --sf-violet:#8b5cf6;
  --sf-fg:#0a0f1c;
  --sf-fg-soft:#475569;
  --sf-fg-mute:#94a3b8;
  --sf-border:#e2e8f0;
  --sf-border-strong:#cbd5e1;
  --sf-bg:#ffffff;
  --sf-bg-soft:#f8fafc;
  --sf-bg-warm:#f4f6fa;
  --sf-bg-tint:#f0fdf4;
  --sf-navy:#0f172a;
  --sf-navy-deep:#020617;
  --sf-silver-900:#1e293b;
  --sf-silver-700:#334155;
  --sf-silver-500:#64748b;
  --sf-silver-300:#94a3b8;
  --sf-silver-100:#e2e8f0;
  --sf-silver-50:#f1f5f9;
  --sf-silver-tint:#f4f6fa;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --shadow-sm-sf:0 1px 2px rgba(15,23,42,.04),0 1px 1px rgba(15,23,42,.03);
  --shadow-md-sf:0 4px 14px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --shadow-lg-sf:0 24px 60px -20px rgba(15,23,42,.18),0 8px 24px -8px rgba(15,23,42,.1);
}

/* Typography helpers */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;}
.accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--sf-green-dark);letter-spacing:-.005em;font-size:1.06em;}

/* Cluster pill — small green pilled tag used everywhere the user's selected
   cluster (region · sector · size) is surfaced. Originally defined inline on
   land1.html only; moved here in v3.99.293 so the chart pages
   (why / what / where / who) render it with the same look. Interactive:
   clicking opens the floating tailor popover (handler in shared-tailor.js). */
/* v3.99.695: white-space:nowrap added so the "for [Region] · [Sector]"
   text inside the green Tailor pill never wraps to a second line on
   narrow containers (back-face of hero card, narrow viewports, long
   sector names). The pill uses width:fit-content so it grows to fit
   the text horizontally instead. */
.sf-pchip{display:flex;width:fit-content;margin-inline:auto;margin-bottom:14px;align-items:center;gap:8px;background:var(--sf-green-tint);border:1px solid var(--sf-green-light);padding:5px 12px;border-radius:999px;font-size:.66rem;font-weight:600;color:var(--sf-green-dark);font-family:var(--mono);letter-spacing:.3px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.sf-pchip:hover{background:#dcfce7;border-color:var(--sf-green-bright);}
.sf-pchip svg{width:11px;height:11px;}
/* v3.99.959: pchip variant that straddles the chart card's TOP BORDER —
   center on the border line, horizontally centered. Parent card must
   carry position:relative. Margin-bottom from base .sf-pchip is reset
   since it no longer takes flow space (positioned absolute). */
.sf-pchip-on-border{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;background:#fff;z-index:5;box-shadow:0 1px 4px rgba(15,23,42,.06);}
.sf-pchip-on-border:hover{background:#fff;}
.sf-pchip .change{color:var(--sf-fg-mute);font-weight:500;}
.sf-pchip:hover .change{color:var(--sf-green-dark);}

/* Tailor modal — full-screen overlay used by the floating cluster pill on
   every page. Moved here from land1's inline <style> in v3.99.294 so the
   modal that opens from the pill on why/what/where/who looks identical to
   the one on the homepage. Single source of truth for the cluster picker
   visual. */
.sf-tailor-modal{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:20px;}
.sf-tailor-modal[hidden]{display:none;}
.sf-tailor-card{background:#fff;border-radius:18px;padding:18px 24px 0;max-width:560px;width:100%;box-shadow:0 30px 80px -20px rgba(15,23,42,.4);position:relative;max-height:calc(100vh - 40px);overflow-y:auto;display:flex;flex-direction:column;animation:sfTailorIn .25s cubic-bezier(.22,.68,0,1.2);}
@keyframes sfTailorIn{0%{opacity:0;transform:translateY(12px) scale(.97);}100%{opacity:1;transform:none;}}
.sf-tailor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-shrink:0;}
.sf-tailor-title{font-size:1.02rem;font-weight:800;color:var(--sf-fg);letter-spacing:-.01em;margin:0;}
.sf-tailor-sub{font-size:.74rem;color:var(--sf-fg-soft);margin:0 0 14px;line-height:1.5;flex-shrink:0;}
.sf-tailor-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--sf-fg-mute);line-height:1;padding:4px 8px;border-radius:8px;}
.sf-tailor-close:hover{background:var(--sf-bg-soft);color:var(--sf-fg);}
.sf-tailor-section{margin-bottom:12px;}
.sf-tailor-lbl{display:block;font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--sf-fg-mute);font-family:var(--mono);margin-bottom:5px;}
.sf-tailor-bizwrap{position:relative;display:flex;align-items:stretch;gap:6px;}
.sf-tailor-biz{flex:1;padding:9px 12px 9px 36px;border:1.5px solid var(--sf-border);border-radius:9px;font-size:.85rem;font-family:'Inter',sans-serif;outline:none;color:var(--sf-fg);background:#fff;transition:border-color .15s;}
.sf-tailor-biz:focus{border-color:var(--sf-green);}
.sf-tailor-pin{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--sf-green-dark);pointer-events:none;}
.sf-tailor-locate{appearance:none;border:1.5px solid var(--sf-border);background:#fff;border-radius:9px;padding:8px 11px;cursor:pointer;color:var(--sf-fg-soft);font-size:.7rem;font-weight:600;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;}
.sf-tailor-locate:hover{border-color:var(--sf-green);color:var(--sf-green-dark);}
.sf-tailor-chips{display:flex;flex-wrap:wrap;gap:4px;max-height:108px;overflow-y:auto;padding:5px;border:1px solid var(--sf-border);border-radius:9px;background:var(--sf-bg-soft);}
.sf-tailor-chip{appearance:none;background:#fff;border:1.5px solid var(--sf-border);font-size:.7rem;font-weight:500;color:var(--sf-fg-soft);padding:4px 9px;border-radius:7px;cursor:pointer;font-family:'Inter',sans-serif;transition:all .14s;line-height:1.2;}
.sf-tailor-chip:hover{border-color:var(--sf-fg-mute);color:var(--sf-fg);}
.sf-tailor-chip.on{background:var(--sf-green-tint);border-color:var(--sf-green);color:var(--sf-green-dark);font-weight:700;}
.sf-tailor-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 0 16px;border-top:1px solid var(--sf-border);background:#fff;position:sticky;bottom:0;margin-top:auto;flex-shrink:0;}
.sf-tailor-actions button{appearance:none;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;padding:8px 16px;border-radius:9px;cursor:pointer;border:1.5px solid;transition:all .15s;}
.sf-tailor-reset{background:#fff;border-color:var(--sf-border-strong);color:var(--sf-fg-soft);}
.sf-tailor-reset:hover{border-color:var(--sf-fg-mute);color:var(--sf-fg);}
.sf-tailor-apply{background:linear-gradient(135deg,var(--sf-green-bright),var(--sf-green));border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(21,128,61,.5);}
.sf-tailor-apply:hover{transform:translateY(-1px);box-shadow:0 12px 22px -8px rgba(21,128,61,.55);}

/* Biz row — the hidden stripe under the nav that appears when the user
   double-clicks the Seedfor logo. Moved here in v3.99.305 so the chart
   pages (why / what / where / who) can share land1's homepage design:
   position:absolute (overlays the page, doesn't push content), white
   background, soft drop-shadow, class-toggled via .on. */
/* v3.99.307: reinforce with !important on the layout-critical properties so
   any leftover per-page nav rule (chart pages have an inline `nav{display:
   flex;flex-wrap:wrap}` that turns the biz-row into a flex item) can't pull
   the stripe out of its absolute overlay position. */
.sf-biz-row{display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;align-items:center;gap:10px;background:#fff!important;border-top:1px solid #f3f4f6!important;border-bottom:1px solid var(--sf-border)!important;box-shadow:0 8px 24px -8px rgba(15,23,42,.10)!important;padding:5px 16px 7px!important;z-index:201;flex-basis:auto!important;flex-grow:0!important;flex-shrink:0!important;width:auto!important;margin:0!important;}
.sf-biz-row.on{display:flex!important;}
.sf-biz-bar{display:flex;flex-direction:column;gap:1px;flex-shrink:0;}
.sf-biz-bar-lbl{font-size:.48rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af;}
.sf-biz-row #sfBizInput{width:215px;padding:4px 11px;border:1.5px solid #e5e7eb;border-radius:7px;font-size:.72rem;font-family:'Inter',sans-serif;color:#111827;outline:none;transition:border-color .25s;background:#fff;}
.sf-biz-row #sfBizInput:focus{border-color:var(--sf-green);}
.sf-biz-sep{width:1px;height:26px;background:#e5e7eb;flex-shrink:0;}
.sf-biz-blurb{flex:1;font-size:.72rem;color:#111827;font-weight:700;font-family:'Inter',sans-serif;text-align:center;}

/* Page-scoped metric grid — mirrors the .sf-livegrid-* cell design used on
   land1's hero card 'Live Seedfor Data' back face. Added v3.99.301 so the
   metric boxes on why / what / where / who all share one consistent size and
   look, instead of each page using its own .stat-box / .w-stat / select-wrap
   variant. Auto-fit columns at 110px min so 7 cells line up on desktop and
   wrap cleanly on narrower screens. */
.sf-metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:16px;}
.sf-metric-cell{position:relative;padding:8px 10px 9px;border-radius:9px;background:#fff;border:1px solid var(--sf-border);overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:54px;}
.sf-metric-lbl{font-family:var(--mono);font-size:.54rem;color:var(--sf-fg-mute);letter-spacing:.4px;text-transform:uppercase;margin-bottom:4px;line-height:1;}
.sf-metric-val{font-family:var(--mono);font-size:.94rem;font-weight:700;color:var(--sf-fg);letter-spacing:-.01em;line-height:1.1;}
.sf-metric-val .sf-metric-sub,
.sf-metric-sub{font-family:var(--mono);font-size:.58rem;font-weight:600;color:var(--sf-fg-mute);margin-left:3px;letter-spacing:.3px;}
.sf-metric-foot{font-family:var(--mono);font-size:.5rem;color:var(--sf-fg-mute);letter-spacing:.3px;margin-top:3px;line-height:1.2;}
.underline-mark{background:linear-gradient(180deg,transparent 62%,rgba(34,197,94,.28) 62%,rgba(34,197,94,.28) 92%,transparent 92%);padding:0 2px;}

/* Buttons — land1 primary (green gradient) + outline secondary */
.sf-btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--sf-green-bright),var(--sf-green));
  color:#fff;font-weight:600;padding:9px 18px;border-radius:10px;
  font-size:.82rem;letter-spacing:.005em;border:none;cursor:pointer;
  line-height:1.2;text-decoration:none;font-family:inherit;
  box-shadow:0 6px 18px -6px rgba(21,128,61,.45);transition:all .18s;
}
.sf-btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(21,128,61,.55);}
.sf-btn-primary .arr{transition:transform .18s;display:inline-block;}
.sf-btn-primary:hover .arr{transform:translateX(3px);}

.sf-btn-secondary{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;color:var(--sf-fg-soft);
  font-weight:600;padding:9px 16px;border-radius:10px;
  font-size:.82rem;border:1px solid var(--sf-border-strong);
  text-decoration:none;line-height:1.2;font-family:inherit;
  transition:all .15s;
}
.sf-btn-secondary:hover{border-color:var(--sf-fg-soft);background:var(--sf-bg-soft);color:var(--sf-fg);}

/* Legacy alias: .btn-orange (flat #f97316) is repainted to the land1
   green-gradient so every existing CTA on older pages auto-unifies
   without touching markup. !important is needed because the legacy
   .btn-orange rule above sets a flat colour. */
.btn-orange{
  background:linear-gradient(135deg,var(--sf-green-bright),var(--sf-green))!important;
  box-shadow:0 6px 18px -6px rgba(21,128,61,.45)!important;
  color:#fff!important;
}
.btn-orange:hover{
  background:linear-gradient(135deg,var(--sf-green),var(--sf-green-dark))!important;
  box-shadow:0 12px 28px -8px rgba(21,128,61,.55)!important;
  transform:translateY(-1px);
}

/* On-chain action buttons (mint / tokenize / stake / deploy / buy token /
   delegate / connect wallet) — genuinely ORANGE to flag an on-chain trigger.
   Distinct from the legacy .btn-orange alias above (which is green). */
.btn-onchain{
  background:linear-gradient(135deg,var(--orange),var(--orange-dark))!important;
  border-color:var(--orange)!important;
  box-shadow:0 6px 18px -6px rgba(234,88,12,.45)!important;
  color:#fff!important;
}
.btn-onchain:hover{
  background:linear-gradient(135deg,var(--orange-dark),var(--orange-dark))!important;
  box-shadow:0 12px 28px -8px rgba(234,88,12,.55)!important;
  transform:translateY(-1px);
}

/* Eyebrow pill (land1) */
.sf-hero-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.65);
  border:1px solid var(--sf-border);
  padding:5px 12px;border-radius:999px;
  font-size:.64rem;font-weight:600;color:var(--sf-fg-soft);
  font-family:var(--mono);letter-spacing:.6px;text-transform:uppercase;
  box-shadow:var(--shadow-sm-sf);
}
.sf-hero-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--sf-green-bright);
  box-shadow:0 0 8px var(--sf-green-bright);
  animation:tickerPulse 2.2s ease-in-out infinite;
}
.sf-hero-eyebrow strong{color:var(--sf-green-dark);font-weight:800;}
@keyframes tickerPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.7);}}

/* Consistent treatment for <abbr title="…"> across every page so domain
   acronyms (ACRB / SyCR / PD / EL / DR / LGD / SBT / SDT) reveal their
   plain-English definition on hover. Dotted underline + help cursor +
   no italic so the markup blends with surrounding copy. */
abbr[title]{
  text-decoration:underline dotted;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  cursor:help;
  font-style:inherit;
  text-decoration-skip-ink:none;
}

/* ──────────────────────────────────────────────────────────
   UNIFIED NAV — both modern .sf-nav-* (used by land1.html) and the
   legacy .nav-* class set (used by every other marketing page) are
   aliased to the same land1 visual treatment. !important is used so
   per-page legacy nav rules don't override the unification.
   ────────────────────────────────────────────────────────── */
nav#navbar,
nav.sf-nav{
  position:sticky!important;top:0!important;z-index:200!important;
  background:rgba(255,255,255,.96)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px)!important;
  backdrop-filter:saturate(180%) blur(18px)!important;
  border-bottom:1px solid var(--sf-border)!important;
  padding:0 clamp(16px,4vw,40px)!important;
  /* v3.99.309: force same min-height on both nav variants so the hidden
     biz-row stripe (position:absolute; top:100%) sits at the same vertical
     position on land1 (where .sf-nav-row carries the 60px height) and on
     the chart pages (where their inline nav rule used 56px). */
  min-height:60px!important;
}
.sf-nav-row{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:nowrap;}

.nav-logo,
.sf-nav-logo{
  display:flex!important;align-items:center!important;gap:8px!important;
  flex-shrink:0!important;text-decoration:none!important;
  color:var(--sf-fg)!important;font-weight:700!important;
}
.nav-logo-icon,
.sf-nav-logo-icon{width:30px!important;height:30px!important;border-radius:8px!important;overflow:hidden!important;background:none!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.nav-logo strong,
.sf-nav-logo strong{font-size:1.04rem!important;font-weight:800!important;letter-spacing:-.02em!important;}
.nav-logo strong span,
.sf-nav-logo strong span{color:var(--sf-green)!important;}
.nav-logo-sub,
.sf-nav-logo-sub{
  font-family:'Inter',sans-serif!important;font-weight:600!important;
  font-size:1.04rem!important;color:var(--sf-green)!important;
  margin-left:-3px!important;display:inline-block;min-width:160px;white-space:nowrap;
  transition:opacity .3s ease,transform .3s ease;
}
.nav-logo-sub.fade-out,
.sf-nav-logo-sub.fade-out{opacity:0;transform:translateY(-6px);}
.nav-logo-sub.fade-in,
.sf-nav-logo-sub.fade-in{opacity:1;transform:translateY(0);}

.nav-pill,
.sf-nav-pill{
  padding:6px 14px!important;border-radius:9px!important;
  font-size:.82rem!important;font-weight:600!important;
  color:var(--sf-fg-soft)!important;text-decoration:none!important;
  border:1px solid transparent!important;transition:all .15s!important;
  white-space:nowrap!important;background:transparent!important;
}
.nav-pill:hover,
.sf-nav-pill:hover{background:var(--sf-bg-soft)!important;color:var(--sf-fg)!important;}
.nav-pill.nav-pill-active,
.sf-nav-pill.active{background:var(--sf-fg)!important;color:#fff!important;border-color:var(--sf-fg)!important;}

.nav-actions,
.sf-nav-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-shrink:0!important;}

/* Unified 'coming soon' placeholder treatment used in footers, nav lists
   and dataroom buttons. Pair the class on the parent span/li/button with
   an optional <span class="sf-soon-chip">SOON</span> child for the small
   uppercase chip. The class itself dims the parent and prevents clicks.
   Replaces a handful of inline `color:rgba(...);cursor:default` snippets
   that drifted across files. */
.sf-soon{color:rgba(255,255,255,.35);cursor:default;}
.sf-soon-chip{
  font-size:.62rem;color:rgba(255,255,255,.45);
  font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  margin-left:4px;
}
/* Demo-access marker. Unlike .sf-soon these entries ARE reachable — the page loads, but its
   content is demo-gated, so the chip sets expectations before the click. It disappears once
   demo mode is on, because then there is nothing left to warn about. */
.sf-demo-chip{
  font-size:.62rem;color:rgba(251,191,36,.75);
  font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  margin-left:4px;
}
html[data-demo] .sf-demo-chip{display:none;}

/* Light-bg variant for placeholder pills outside the dark footer. */
.sf-soon-light{color:#9ca3af;cursor:default;}
.sf-soon-light .sf-soon-chip{color:#6b7280;}

/* Mobile / tablet scroll-cue for chart containers that overflow horizontally
   on viewports < 1024px. The thin right-edge gradient hints that the chart
   is scrollable without occupying a fixed scrollbar. */
@media (max-width:1024px){
  .w-chart-wrap,.ob-chart-wrap,#whereSycrWrap,#whyChartWrap{
    position:relative;overflow-x:auto;
  }
  .w-chart-wrap::after,.ob-chart-wrap::after,#whereSycrWrap::after,#whyChartWrap::after{
    content:'';position:absolute;top:0;right:0;width:24px;height:100%;
    background:linear-gradient(to left,rgba(255,255,255,.9),transparent);
    pointer-events:none;z-index:3;
  }
}

/* ───────────────────────────────────────────
   v3.99.356: Hamburger menu for narrow viewports.
   Injected by shared-tailor.js into every nav. At >768px the nav-pills
   show normally; at ≤768px the pills are hidden and the hamburger
   button is shown. Click expands a dropdown panel containing the
   same page links the pills would have displayed.
   ─────────────────────────────────────────── */
.sf-nav-burger{
  display:none; /* hidden by default, shown at narrow widths */
  width:36px;height:36px;border:1px solid #e5e7eb;border-radius:8px;
  background:#fff;color:#111827;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
  padding:0;font-family:inherit;transition:background .15s;
}
.sf-nav-burger:hover{background:#f3f4f6;}
.sf-nav-burger-panel{
  display:none;position:absolute;top:calc(100% + 6px);right:clamp(16px,4vw,60px);
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
  min-width:240px;padding:8px;z-index:300;
  font-family:'Inter',sans-serif;
}
.sf-nav-burger-panel.open{display:block;}
.sf-nav-burger-item{
  display:block;padding:10px 14px;border-radius:8px;
  font-size:.82rem;font-weight:600;color:#374151;text-decoration:none;
  line-height:1.3;transition:background .12s,color .12s;
}
.sf-nav-burger-item:hover{background:#f0fdf4;color:#1a9e6e;}
.sf-nav-burger-item.is-active{background:#ecfdf5;color:#1a9e6e;}
.sf-nav-burger-sub{
  display:block;font-size:.66rem;font-weight:500;color:#9ca3af;
  margin-top:2px;line-height:1.4;
}
/* v3.99.490: raised the burger-menu breakpoint from 768 → 1024 px.
   The four main nav pills (Credit Access · Risk Transfer · Risk
   Forecast · On-Chain MSME) start getting cramped well above the old
   mobile-only threshold — on a desktop browser resized to ~900 px
   the pills overflowed but the hamburger wasn't yet visible, leaving
   the user with no way to reach the other pages. At 1024 px and below
   the pills now collapse into the hamburger; above 1024 px the
   regular pill row renders normally. Same UX for PC narrow-window and
   mobile/tablet. */
@media (max-width:1024px){
  /* v3.99.1010: also collapse `.sf-nav-pill` (land1's prefixed variant)
     into the hamburger at narrow widths. */
  nav#navbar > div .nav-pill,
  nav.sf-nav > div .nav-pill,
  nav.sf-nav > div .sf-nav-pill,
  nav.sf-nav .sf-nav-pills{display:none!important;}
  .sf-nav-burger{display:inline-flex;}
  /* v3.99.527: at ≤1024px the .sf-biz-row stripe (the "Discover Seedfor
     Value For" business-name input + descriptor blurb) was wrapping to
     a second / third row below the main nav — visible as "2 menus, 3
     rows" because the biz-bar items themselves wrapped onto multiple
     lines inside the absolutely-positioned stripe. Force-hide it at
     narrow widths so the user only ever sees ONE nav row + the
     hamburger menu reaching all pages. Desktop (>1024px) keeps the
     biz-row stripe fully functional. */
  .sf-biz-row,
  nav#navbar > .sf-biz-row,
  nav.sf-nav > .sf-biz-row{display:none!important;}
  /* v3.99.527: force every nav variant to single-row layout —
     prevents .nav-actions / hamburger / logo wrapping to a second line
     when cumulative width gets tight (the inner-page inline rule
     `nav { flex-wrap:wrap }` was the original culprit). The hamburger
     dropdown handles overflow; the nav itself must never wrap. */
  nav#navbar,
  nav.sf-nav{flex-wrap:nowrap!important;}
  /* Hide the rolling logo subtitle on narrow widths so the nav-logo
     itself doesn't push everything else over the wrap threshold. */
  .nav-logo-sub,
  .sf-nav-logo-sub{display:none!important;}
}

/* Permanently hide the simple #navSftBadge pill (the 'SfT · 0xDeM0…df0r'
   string). The rich #sfTokenBadge dropdown (injected by shared-modals.js
   into the same nav slot) is the single SfT-connected indicator now. */
#navSftBadge{display:none!important;}
/* When #sfTokenBadge is present, position it to the LEFT of the Launch App
   button using flex order — same affordance the simple pill used to have. */
.nav-actions #sfTokenBadge,
.sf-nav-actions #sfTokenBadge{order:-1;}

/* ──────────────────────────────────────────────────────────
   FLOATING TAILOR PILL + POPOVER — canonical land1 design,
   exposed here so shared-tailor.js can inject the same UI on every
   non-land1 page. land1.html still ships its own inline copy of these
   rules (kept for backwards-compat) — the two are visually identical.
   ────────────────────────────────────────────────────────── */
.sf-fpill{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--sf-border);border-radius:999px;padding:10px 16px 10px 12px;box-shadow:var(--shadow-lg-sf,0 24px 60px -20px rgba(15,23,42,.18));cursor:pointer;font-family:'Inter',sans-serif;transition:transform .2s,box-shadow .2s,border-color .2s;border:none;appearance:none;}
.sf-fpill:hover{transform:translateY(-2px);box-shadow:0 28px 70px -16px rgba(15,23,42,.22),0 10px 28px -8px rgba(15,23,42,.14);border-color:var(--sf-green);}
.sf-fpill-icon{width:30px;height:30px;border-radius:50%;background:var(--sf-green-tint);display:flex;align-items:center;justify-content:center;color:var(--sf-green-dark);flex-shrink:0;}
.sf-fpill-icon svg{width:15px;height:15px;}
.sf-fpill-main{display:flex;flex-direction:column;gap:1px;text-align:left;}
.sf-fpill-lbl{font-size:.6rem;color:var(--sf-fg-mute);font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;}
.sf-fpill-val{font-size:.78rem;font-weight:700;color:var(--sf-fg);}
.sf-fpill-arr{color:var(--sf-fg-mute);display:inline-flex;}
.sf-fpill.hidden{transform:translateY(80px);opacity:0;pointer-events:none;}

.sf-fpop{position:fixed;bottom:80px;right:22px;z-index:301;width:340px;background:#fff;border:1px solid var(--sf-border);border-radius:18px;box-shadow:var(--shadow-lg-sf,0 24px 60px -20px rgba(15,23,42,.18));padding:18px;transform:translateY(12px) scale(.96);opacity:0;pointer-events:none;transition:all .22s ease;font-family:'Inter',sans-serif;}
.sf-fpop.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.sf-fpop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.sf-fpop-title{font-size:.78rem;font-weight:700;color:var(--sf-fg);}
.sf-fpop-close{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--sf-fg-mute);line-height:1;padding:2px 6px;border-radius:6px;}
.sf-fpop-close:hover{background:var(--sf-bg-soft);color:var(--sf-fg);}
.sf-fpop-section{margin-bottom:12px;}
.sf-fpop-lbl{font-size:.66rem;color:var(--sf-fg-soft);font-weight:600;margin-bottom:6px;}
.sf-fpop-pills{display:flex;flex-wrap:wrap;gap:5px;}
.sf-fpop-pill{padding:5px 10px;border-radius:8px;background:#fff;border:1.5px solid var(--sf-border);font-size:.72rem;font-weight:600;color:var(--sf-fg-soft);cursor:pointer;transition:all .14s;font-family:'Inter',sans-serif;}
.sf-fpop-pill:hover{border-color:var(--sf-fg-mute);}
.sf-fpop-pill.on{background:var(--sf-green-tint);border-color:var(--sf-green);color:var(--sf-green-dark);}
.sf-fpop-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--sf-border);font-size:.66rem;color:var(--sf-fg-mute);text-align:center;font-family:var(--mono);}

/* ── v3.99.546 / v3.99.550: world-map sliding popups ─────────
   Side-button triggers + slide-in overlays for zoom-area (right)
   and color-basis (left) on every page that uses sf-world-map.js
   (land1, where, who) plus what.html's inline map. Wrap must be
   position:relative + overflow:hidden so the off-screen sliders
   stay clipped.

   v3.99.550: the side-button styling is now SHARED with the
   what.html chart-view popup buttons — .chart-side-btn rules
   live here in shared.css instead of being scoped to one page.
   Map pages reuse the exact same class (pastel mint left /
   pastel yellow right, vertical text label) so the cross-page
   interaction feels identical visually.                          */
.chart-side-btn{all:unset;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border-radius:12px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;min-width:36px;gap:6px;transition:opacity .15s;border:1px solid transparent;box-sizing:border-box;}
.chart-side-btn-left{background:#ecfdf5;color:#065f46;border-color:#a7f3d0;}
.chart-side-btn-right{background:#fefce8;color:#78350f;border-color:#fde68a;}
.chart-side-btn:hover{opacity:.85;}
.chart-side-btn .chart-side-btn-arrow{font-size:1.2rem;font-weight:900;display:block;line-height:1;text-align:center;}
.chart-side-btn .chart-side-btn-label{writing-mode:vertical-rl;line-height:1.5;}
.chart-side-btn-left .chart-side-btn-label{transform:rotate(180deg);}
/* v3.99.666: width 54% → 100% + padding 16px 18px → 14px 16px to
   match the canonical `#whyChartOverlay` on why.html's historical
   chart. Was visually inconsistent — the historical-chart popup
   covers the WHOLE chart area when open; the world-map sliders
   covered only half, leaving the other half of the map visible
   under the open panel. User asked for size parity across all
   chart sliding popups (why-page world map + what-page map). */
.sf-map-slider{position:absolute;top:0;height:100%;width:100%;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);border-radius:14px;padding:14px 16px;box-sizing:border-box;transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:11;display:flex;flex-direction:column;gap:0;overflow-y:auto;font-family:'Inter',sans-serif;}
.sf-map-slider-left{left:0;transform:translateX(-104%);border-right:1px solid #e5e7eb;}
.sf-map-slider-right{right:0;transform:translateX(104%);border-left:1px solid #e5e7eb;}
.sf-map-slider.is-open{transform:translateX(0);}
.sf-map-slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.sf-map-slider-title{font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.sf-map-slider-title-zoom{color:#0f172a;}
.sf-map-slider-title-basis{color:#3730a3;}
.sf-map-slider-close{all:unset;cursor:pointer;font-size:1.1rem;color:#9ca3af;padding:4px;}
.sf-map-slider-close:hover{color:#0f172a;}
.sf-map-slider-sub{font-size:.62rem;color:#9ca3af;margin-bottom:14px;line-height:1.45;}
.sf-map-slider-body{display:flex;flex-direction:column;gap:8px;}
.sf-map-slider-body .sf-zoom-btn,.sf-map-slider-body .sf-basis-btn{display:block;width:100%;text-align:left;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#374151;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;}
.sf-map-slider-body .sf-zoom-btn:hover{border-color:#0f172a;background:#f8fafc;}
.sf-map-slider-body .sf-zoom-btn.on{background:#0f172a;border-color:#0f172a;color:#fff;}
.sf-map-slider-body .sf-basis-btn:hover{border-color:#3730a3;background:#eef2ff;color:#3730a3;}
.sf-map-slider-body .sf-basis-btn.on{background:#3730a3;border-color:#3730a3;color:#fff;}
/* v3.99.666 → v3.99.668 → DELETED v3.99.681 (audit finding 6).
   The Reference Index UI on why.html's world map back face went
   through three designs (v3.99.666 channel + series rows;
   v3.99.668 3-tier tabs / sub / series; v3.99.673 slider widths)
   then the entire feature was removed in v3.99.678. The CSS rules
   for .why-basis-section-label / .why-basis-row / .why-channel-btn
   / .why-series-btn / .why-ref-tab-bar / .why-ref-tab / .why-ref-
   sub-bar / .why-ref-sub-btn no longer match any DOM. Deleted to
   stop wasting bytes on dead selectors. Re-add when restoring the
   feature — see why.html commit v3.99.678 message for the markup
   that needs to come back. */

/* v3.99.783: shared world-map TOOLBAR — small floating cluster of
   icon buttons that sits at the top-right of every world map across
   the site (land1 SRisk, what / who / where / why). Each map adds
   the same markup pattern inside its #xxxWorldMapWrap container;
   a single CSS rule keeps the visual consistent. The two buttons
   are the camera (snapshot via _wbSnapshot) and the ? (sfTip with
   a per-page description of what the map shows). */
/* v3.99.804: world-map toolbar restyled to match the historical-chart
   camera + ? icons exactly (14 px circles; green snap with SVG icon,
   grey ? with "?" character). Same look across what / why / where /
   who chart faces. */
.sf-map-toolbar{position:absolute;top:8px;right:8px;display:inline-flex;gap:5px;z-index:25;align-items:center;}
.sf-map-tb-btn{appearance:none;width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;padding:0;line-height:1;flex-shrink:0;transition:background .15s,border-color .15s,color .15s,opacity .15s;}
.sf-map-tb-btn-snap{background:#ecfdf5;color:#1a9e6e;border:1px solid #a7f3d0;}
.sf-map-tb-btn-snap:hover{background:#d1fae5;}
.sf-map-tb-btn-help{background:#e5e7eb;color:#6b7280;border:none;font-size:.58rem;font-weight:800;user-select:none;}
.sf-map-tb-btn-help:hover{background:#cbd5e1;color:#1f2937;}
.sf-map-tb-btn:focus-visible{outline:2px solid var(--sf-accent,#1a9e6e);outline-offset:2px;}
.sf-map-tb-btn[disabled]{opacity:.5;cursor:default;}