/* ============================================================
   Kestrel home rebuild — Spade overhaul
   Globe (ported from the live site) + the five animations + home helpers.
   Loaded after spade.css. Everything here is home-page scoped by usage.
   ============================================================ */

/* ---------------------------------------------------------------
   GLOBE  (ported verbatim from Design/site.css — d3 orthographic +
   ambient ticker that scrolls behind the disc)
   --------------------------------------------------------------- */
/* NOTE: these pulse/breathe animations drive scale via `transform`, NOT the
   SVG `r` attribute. Safari does not animate geometry attributes (r/cx/cy)
   from CSS keyframes, so an r-based animation sits frozen there. transform +
   transform-box:fill-box (origin = the circle's own centre) works in every
   browser. The .hq-pulse circle therefore needs a base r set in globe.jsx
   (scale multiplies it); the dots inherit their r=3.6 from the markup. */

/* Outward "ping" ring — expands and fades behind each dot. */
@keyframes kestrel-hq-pulse {
  0%   { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(3.3);  opacity: 0;   }
}
.hq-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: kestrel-hq-pulse 2.4s cubic-bezier(0.2, 0, 0.4, 1) infinite;
}

/* Core HQ dot — a gentle "breath" (slow scale + opacity swell) so each marker
   feels alive even between ping rings. Amplitude is deliberately small so it
   never reads as the hover state (r 4.6 + halo). Each dot gets a
   longitude-seeded animationDelay in globe.jsx so they breathe out of
   lockstep; hovered dots drop the class and sit still under the halo. */
@keyframes kestrel-hq-dot-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.82; }
  50%      { transform: scale(1.14); opacity: 1;    }
}
.hq-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: kestrel-hq-dot-breathe 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hq-pulse, .hq-dot { animation: none; }
}

html, body { overflow-x: clip; }

.globe-stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 1 / 1;
}
.globe-stage > svg { position: relative; z-index: 1; }
.globe-ticker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, black 5%,
    black calc(50% - clamp(120px, 43vw, 420px)),
    transparent calc(50% - clamp(80px, 32vw, 320px)),
    transparent calc(50% + clamp(80px, 32vw, 320px)),
    black calc(50% + clamp(120px, 43vw, 420px)),
    black 95%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, black 5%,
    black calc(50% - clamp(120px, 43vw, 420px)),
    transparent calc(50% - clamp(80px, 32vw, 320px)),
    transparent calc(50% + clamp(80px, 32vw, 320px)),
    black calc(50% + clamp(120px, 43vw, 420px)),
    black 95%, transparent 100%);
}
.globe-ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: kestrel-globe-ticker 80s linear infinite;
  will-change: transform;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--moss-deep);
  opacity: 0.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.globe-ticker-item { padding: 0 40px; display: inline-flex; align-items: center; gap: 18px; }
.globe-ticker-bullet { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); opacity: 0.9; }
@keyframes kestrel-globe-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .globe-ticker { height: 44px; }
  .globe-ticker-track { font-size: 12px; letter-spacing: 0.12em; }
  .globe-ticker-item { padding: 0 22px; gap: 12px; }
  .globe-ticker-bullet { width: 5px; height: 5px; }
}

/* ---------------------------------------------------------------
   ANIMATION 1 — FlipWords  (word swaps in with a soft blur-rise)
   --------------------------------------------------------------- */
.flip-words { display: inline-flex; position: relative; }
.flip-word { display: inline-block; animation: kestrel-flip-in 520ms var(--ease-quiet) both; will-change: transform, opacity, filter; }
@keyframes kestrel-flip-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(7px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ---------------------------------------------------------------
   ANIMATION 2 — Typewriter  (chars revealed in JS; CSS caret blink)
   --------------------------------------------------------------- */
.tw-line { display: inline; }
.tw-cursor {
  display: inline-block; width: 3px; height: 0.92em;
  margin-left: 4px; transform: translateY(2px);
  background: currentColor; border-radius: 1px;
  animation: kestrel-caret 1s step-end infinite;
}
@keyframes kestrel-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------------------------------------------------------------
   ANIMATION 3 — TextGenerate  (each word blurs in, staggered, on view)
   --------------------------------------------------------------- */
.tg-word {
  display: inline-block;
  opacity: 0; filter: blur(9px);
  transition: opacity 620ms var(--ease-quiet), filter 620ms var(--ease-quiet);
  will-change: opacity, filter;
}
.tg-word.in { opacity: 1; filter: blur(0); }

/* ---------------------------------------------------------------
   ANIMATION 4 — TextReveal  (hover/drag a spotlight to swap the line)
   --------------------------------------------------------------- */
.tr-card {
  position: relative; overflow: hidden;
  border-radius: 18px;
  cursor: pointer; user-select: none;
}
.tr-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8%; }
.tr-base  { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 64px 8%; }
.tr-bar {
  position: absolute; top: 8%; bottom: 8%; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--lime), transparent);
  box-shadow: 0 0 18px 2px rgba(166, 225, 94, 0.55);
  opacity: 0; transition: opacity 220ms var(--ease-quiet);
  pointer-events: none;
}
.tr-card.is-live .tr-bar { opacity: 1; }
.tr-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); }
/* The hint borrows .mono-eyebrow for its type, but the ► marker that class adds
   reads as a stray glyph beside the ◂ ▸ sweep arrows — drop it for this hint. */
.tr-hint.mono-eyebrow::before { content: none; }

/* ---------------------------------------------------------------
   ANIMATION 5 — HeroParallax  (rows drift sideways on scroll)
   --------------------------------------------------------------- */
.hp-rows { display: flex; flex-direction: column; gap: 22px; }
.hp-row { display: flex; gap: 22px; will-change: transform; }
.hp-row.rev { justify-content: flex-end; }
.hp-card {
  position: relative; flex: 0 0 auto;
  width: 300px; height: 168px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--canvas);
  padding: 20px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; text-decoration: none;
  transition: transform 220ms var(--ease-quiet), box-shadow 220ms var(--ease-quiet), border-color 220ms var(--ease-quiet);
  overflow: hidden;
}
.hp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: var(--moss); }
.hp-card .hp-logo { height: 30px; color: var(--ink); opacity: 0.85; }
.hp-card .hp-logo svg { height: 30px; width: auto; }
.hp-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.hp-mask {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* Gentle continuous float for the scattered corner-tick labels (hero scene +
   "Behind every disclosure" scene) and that headline. Applied inline on the
   elements — NOT via the .drift/.chip-float utilities — so the prefers-reduced-
   motion blanket that silences those classes doesn't also kill this, and so the
   ±12px travel is actually noticeable (the old .drift was ±6px and read as
   static). Each element is given a negative delay so they bob out of phase. */
@keyframes kestrel-label-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------------------------------------------------------------
   Home helpers
   --------------------------------------------------------------- */
/* Stat band — equalize the corner-tick frames. "Global mining majors" has a
   single-line label while its neighbours wrap to two lines, so its frame came
   out ~15px short and pulled its figure + bottom ticks up. The grid already
   stretches every cell to the tallest; make the frame fill that height and
   drop the figure to a shared baseline so all four ticks + numbers line up. */
.home-statgrid > .sp-reveal { display: flex; }
.home-statgrid .stat-frame { flex: 1 1 auto; display: flex; flex-direction: column; }
.home-statgrid .stat-frame .sf-value { margin-top: auto; }

/* Strix scrutiny example rows */
.sx-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 16px 0; border-top: 1px solid rgba(166, 225, 94, 0.18);
  font-family: var(--mono);
}
.sx-row:last-child { border-bottom: 1px solid rgba(166, 225, 94, 0.18); }
.sx-strike { text-decoration: line-through; opacity: 0.55; }

/* Register-interest form */
.ri-field {
  width: 100%;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  outline: none; transition: border-color 160ms var(--ease-quiet), box-shadow 160ms var(--ease-quiet);
  box-sizing: border-box;
}
.ri-field:focus { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(107, 122, 90, 0.14); }
.ri-field::placeholder { color: var(--ink-3); }
.ri-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .ri-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Header — responsive mobile menu (hamburger + Spade drawer)
   Desktop nav collapses to a hamburger that opens a full-sheet
   portal drawer (≤760px). Adapted from the live Design site.
   --------------------------------------------------------------- */
.kh-nav-desktop { display: flex; align-items: center; gap: 32px; }

.kh-nav-toggle {
  display: none;                 /* desktop: hidden — shown ≤760px */
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms var(--ease-quiet), border-color 160ms var(--ease-quiet);
}
.kh-nav-toggle:hover { background: var(--canvas-2); border-color: var(--line-strong); }
.kh-nav-toggle:active { transform: translateY(1px); }

.kh-drawer {
  position: fixed;
  top: 72px; left: 0; right: 0; bottom: 0;   /* anchored under the 72px sticky header bar */
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  z-index: 49;                   /* below the header (50) so the toggle stays clickable */
  padding: 8px 22px 28px;
  background: var(--canvas);      /* opaque full sheet */
  border-top: 1px solid var(--line);
  animation: kh-drawer-in 220ms var(--ease-quiet) both;
}
@keyframes kh-drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kh-drawer-list { display: flex; flex-direction: column; }
.kh-drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  font-family: var(--mono);
  font-size: 15px; letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 160ms var(--ease-quiet);
}
.kh-drawer-link:hover,
.kh-drawer-link.is-active { color: var(--ink); }
.kh-drawer-actions { margin-top: 22px; }

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero-scene-wrap { display: none; }   /* decorative floating chips — drop on small screens */
}
@media (max-width: 760px) {
  /* header: hide the inline desktop nav, reveal the hamburger → drawer */
  .kh-nav-desktop { display: none; }
  .kh-nav-toggle { display: inline-flex; }
  .home-statgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px 0 !important; }
  .home-criteria { grid-template-columns: 1fr 1fr !important; }
  .section .panel-round { padding: 34px 22px 40px !important; }
  .hp-card { width: 244px; height: 152px; }
  .sx-row { grid-template-columns: 1fr; gap: 4px; }
  .sx-row > div:last-child { text-align: left !important; }
}
@media (max-width: 480px) {
  .home-statgrid, .home-criteria { grid-template-columns: 1fr !important; }
}

/* Reduced motion — let the data still read, just stop the loops/reveals */
@media (prefers-reduced-motion: reduce) {
  .kh-drawer { animation: none !important; }
  .flip-word { animation: none !important; }
  .globe-ticker-track { animation: none !important; }
  .tw-cursor { animation: none !important; }
  .tg-word { opacity: 1 !important; filter: none !important; transition: none !important; }
  .hp-row { transform: none !important; }
}

/* ---------------------------------------------------------------
   ANIMATION 6 — EncryptedText  (glyphs resolve into the real line)
   --------------------------------------------------------------- */
.enc-text { font-family: var(--mono); font-variant-ligatures: none; }
.enc-done-part { color: inherit; }
.enc-live { color: var(--lime); }
.enc-text.is-scrambling .enc-live { animation: enc-flicker 1.1s steps(2) infinite; }
@keyframes enc-flicker { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.68; } }

/* ---------------------------------------------------------------
   ANIMATION 7 — EvervaultCard  (cursor spotlight over a glyph field)
   --------------------------------------------------------------- */
.evervault {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 360px; border-radius: 18px;
  background: #0C1607;
  border: 1px solid rgba(166, 225, 94, 0.18);
  display: flex; align-items: center; justify-content: center;
  padding: 28px; cursor: crosshair;
}
.evervault-glow, .evervault-noise {
  position: absolute; inset: 0; pointer-events: none;
  transition: opacity 300ms var(--ease-quiet);
}
.evervault-glow {
  z-index: 1;
  background:
    radial-gradient(60% 60% at 50% 32%, rgba(166, 225, 94, 0.85), transparent 70%),
    linear-gradient(135deg, #C5EE86 0%, #6B7A5A 55%, #16240E 100%);
}
.evervault-noise {
  z-index: 2;
  font-family: var(--mono); font-size: 13px; line-height: 1.3;
  letter-spacing: 2px; word-break: break-all; overflow: hidden;
  color: rgba(13, 24, 7, 0.92); user-select: none;
  padding: 12px 14px;
}
.evervault-core {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.evervault-blob {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 225, 94, 0.16), transparent 68%);
  filter: blur(4px); z-index: -1;
}
.evervault-text {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(44px, 7.5vw, 68px); letter-spacing: -0.04em;
  line-height: 1; color: #F4F7EE;
  text-shadow: 0 2px 24px rgba(12, 22, 7, 0.55);
}
.evervault-caption {
  margin-top: 14px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lime-soft); max-width: 240px;
}
@media (prefers-reduced-motion: reduce) {
  .evervault { cursor: default; }
  .enc-text.is-scrambling .enc-live { animation: none !important; }
}

/* ---------------------------------------------------------------
   Tabs — animated tab bar (sliding pill) + stacked-card deck.
   Used by the Companies page; one deck card per company.
   --------------------------------------------------------------- */
.tabs-comp { width: 100%; }
.tabs-bar {
  position: relative; display: flex; gap: 4px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px; margin: 0 0 26px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }
.tabs-pill {
  position: absolute; top: 4px; bottom: 4px; left: 0;
  background: var(--sage-tint); border: 1px solid var(--line);
  border-radius: 999px; z-index: 0; pointer-events: none;
  transition: transform 340ms var(--ease-quiet), width 340ms var(--ease-quiet), opacity 200ms var(--ease-quiet);
}
.tabs-btn {
  position: relative; z-index: 1; flex: 0 0 auto;
  padding: 9px 18px; background: transparent; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em;
  color: var(--ink-2); white-space: nowrap; border-radius: 999px;
  transition: color 200ms var(--ease-quiet);
}
.tabs-btn:hover { color: var(--ink); }
.tabs-btn.is-active { color: var(--moss-deep); font-weight: 600; }

.tabs-deck {
  position: relative; width: 100%;
  height: clamp(460px, 60vw, 520px);
  margin-bottom: 72px;                 /* headroom for the hover fan */
  perspective: 1200px;
}
.tabs-card {
  position: absolute; inset: 0;
  transform-origin: top center; border-radius: 22px; will-change: transform;
  transition: transform 400ms var(--ease-quiet), opacity 320ms var(--ease-quiet), filter 320ms var(--ease-quiet);
}

/* Company panel inside each deck card */
.co-tab {
  height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(166, 225, 94, 0.16), transparent 58%),
    linear-gradient(158deg, #1C2D12 0%, #16240E 55%, #0E1A09 100%);
  border: 1px solid rgba(166, 225, 94, 0.18);
  box-shadow: 0 34px 60px -34px rgba(12, 22, 7, 0.7);
  padding: clamp(26px, 4vw, 46px);
  display: flex; flex-direction: column; color: #F4F7EE;
}
.co-tab-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.co-tab-logo { height: 34px; color: #F4F7EE; opacity: 0.92; }
.co-tab-logo svg { height: 34px; width: auto; }
.co-tab-meta {
  font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lime); text-align: right; flex: 0 0 auto;
}
.co-tab-name {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(30px, 4.6vw, 52px); margin: clamp(16px, 3vw, 26px) 0 0;
  color: #F4F7EE;   /* override the global h3 ink colour on the dark card */
}
.co-tab-splitbar {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  margin-top: clamp(18px, 3vw, 26px); background: rgba(255, 255, 255, 0.06);
}
.co-tab-splitbar > i { display: block; height: 100%; }
.co-tab-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: auto;                    /* push stats + CTA to the card's base */
  padding-top: clamp(22px, 4vw, 34px);
}
.co-tab-stat { border-top: 1px solid rgba(166, 225, 94, 0.2); padding-top: 14px; }
.co-tab-stat-v {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(23px, 3.2vw, 36px); color: #F4F7EE;
}
.co-tab-stat-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #9DAC8C; margin-top: 8px;
}
.co-tab-cta { margin-top: clamp(20px, 3vw, 30px); }

@media (max-width: 560px) {
  .co-tab-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tabs-pill, .tabs-card { transition: none !important; }
}

/* ---------------------------------------------------------------
   Header desktop nav — sliding pill active/hover indicator
   --------------------------------------------------------------- */
.kh-navpill-wrap { position: relative; display: flex; align-items: center; gap: 2px; }
.kh-navpill {
  position: absolute; top: 50%; left: 0; height: 34px; width: 0;
  border-radius: 999px; background: var(--sage-tint); border: 1px solid var(--line);
  transform: translate(0, -50%); opacity: 0; z-index: 0; pointer-events: none;
  transition: transform 340ms var(--ease-quiet), width 340ms var(--ease-quiet), opacity 220ms var(--ease-quiet);
}
.kh-navitem {
  position: relative; z-index: 1;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; font-weight: 500;
  color: var(--ink-2); white-space: nowrap;
  transition: color 200ms var(--ease-quiet);
}
.kh-navitem:hover { color: var(--ink); }
.kh-navitem.is-active { color: var(--ink); }

/* ---------------------------------------------------------------
   Companies page — search box + home-card marquee + filtered grid
   --------------------------------------------------------------- */
.co-search {
  display: flex; align-items: center; gap: 10px;
  margin-top: clamp(26px, 4vw, 38px); max-width: 460px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas);
  transition: border-color 160ms var(--ease-quiet), box-shadow 160ms var(--ease-quiet);
}
.co-search:focus-within { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(107, 122, 90, 0.14); }
.co-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: 14.5px; color: var(--ink);
}
.co-search input::placeholder { color: var(--ink-3); }
.co-search-clear { display: flex; padding: 2px; border: none; background: transparent; color: var(--ink-3); cursor: pointer; }
.co-search-clear:hover { color: var(--ink); }
.co-count { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
.co-empty {
  margin-top: clamp(24px, 4vw, 36px); padding: 48px 24px; text-align: center;
  color: var(--ink-3); font-family: var(--mono); font-size: 13px;
  border: 1px dashed var(--line-strong); border-radius: 16px;
}

/* card footer — which data layers cover this company (Kestrel / Strix) + counts */
.co-sources { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-src {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink); white-space: nowrap;
}
.co-src-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.co-src-kestrel .co-src-dot { background: var(--moss); }
.co-src-strix   .co-src-dot { background: var(--lime); }
.co-src-n { font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.co-card-go {
  display: inline-flex; flex: 0 0 auto; color: var(--ink-3);
  transition: transform var(--dur-micro) var(--ease-quiet), color var(--dur-micro) var(--ease-quiet);
}
.co-card:hover .co-card-go { transform: translateX(3px); color: var(--moss-deep); }

/* Hover highlight: swap the flat moss border for the moss→lime gradient glow
   used by the methods-section stat cards (the GlowingEffect palette). Colour
   only — the card's lift + shadow from .hp-card:hover are untouched. A masked
   ::after paints just the rounded border ring; on hover the underlying flat
   border goes transparent so the gradient ring reads as the single highlight. */
.co-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 2px;
  background: conic-gradient(from 315deg at 50% 50%,
    var(--moss-deep), var(--moss), var(--lime), var(--moss), var(--moss-deep));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lime) 35%, transparent));
  opacity: 0; transition: opacity 220ms var(--ease-quiet); pointer-events: none;
}
.co-card:hover::after { opacity: 1; }
.co-card:hover { border-color: transparent; }

/* filtered grid (search results) */
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 18px; }
.co-grid .hp-card { width: auto; }

/* auto-scrolling marquee (full-bleed banner): top/bottom →, middle ← */
.co-marquee { display: flex; flex-direction: column; gap: 0; }
.co-mq-row {
  overflow: hidden;
  /* Vertical breathing room: this row clips overflow (for the horizontal marquee
     mask), which also clipped a card's hover lift (translateY(-6px)) + shadow at
     the top. The padding keeps the lifted card inside the clip box. */
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.co-mq-track { display: flex; width: max-content; will-change: transform; }
.co-mq-track .hp-card { margin-right: 20px; }
.co-mq-track.co-mq-left  { animation: co-mq-left  linear infinite; }
.co-mq-track.co-mq-right { animation: co-mq-right linear infinite; }
.co-mq-row:hover .co-mq-track { animation-play-state: paused; }
@keyframes co-mq-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes co-mq-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

@media (prefers-reduced-motion: reduce) {
  .kh-navpill { transition: none !important; }
  .co-mq-track { animation: none !important; }
}

/* ---------------------------------------------------------------
   Main menu (Tabs) — destination panels inside the deck
   --------------------------------------------------------------- */
.menu-panel {
  height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(166, 225, 94, 0.16), transparent 58%),
    linear-gradient(158deg, #1C2D12 0%, #16240E 55%, #0E1A09 100%);
  border: 1px solid rgba(166, 225, 94, 0.18); box-shadow: 0 34px 60px -34px rgba(12, 22, 7, 0.7);
  padding: clamp(28px, 5vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between; color: #F4F7EE;
}
.menu-panel-title {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(34px, 6vw, 64px); color: #F4F7EE; margin: 0;
}
.menu-panel-blurb {
  margin-top: 18px; max-width: 560px; color: #C2CDB5;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55;
}
.menu-panel-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.menu-panel-stat-v { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-size: clamp(34px, 5vw, 56px); color: var(--lime); }
.menu-panel-stat-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9DAC8C; margin-top: 8px; }

/* ---------------------------------------------------------------
   Header mega-menu — hover-revealed stacked-card deck of page heroes.
   The slim bar (.kh-bar, z2) sits above the dropdown (.kh-mega, z1) so the
   deck slides out from behind it. Each page keeps its own on-page hero.
   --------------------------------------------------------------- */
.kh-bar {
  position: relative; z-index: 2;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.kh-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
  background: rgba(250, 250, 247, 0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity 0.26s var(--ease-quiet), transform 0.26s var(--ease-quiet);
}
.kh-mega.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kh-mega .site-wrap { padding-top: 22px; padding-bottom: 28px; }
.mega-deck { position: relative; height: 300px; max-width: 920px; margin: 0 auto; perspective: 1200px; }
.mega-card {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; cursor: pointer;
  transform-origin: top center;
  transition: transform 0.42s var(--ease-quiet), opacity 0.35s var(--ease-quiet), filter 0.35s var(--ease-quiet);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(166, 225, 94, 0.16), transparent 58%),
    linear-gradient(158deg, #1C2D12 0%, #16240E 55%, #0E1A09 100%);
  border: 1px solid rgba(166, 225, 94, 0.2); box-shadow: 0 24px 50px -28px rgba(12, 22, 7, 0.6);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; justify-content: space-between; color: #F4F7EE;
}
.mega-card .menu-panel-title { font-size: clamp(28px, 3.2vw, 44px); }
.mega-card .menu-panel-blurb { margin-top: 12px; font-size: 14.5px; max-width: 520px; }
.mega-card .menu-panel-foot { margin-top: 18px; }
.mega-card .menu-panel-stat-v { font-size: clamp(26px, 3vw, 38px); }
@media (max-width: 760px) { .kh-mega { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .kh-mega { transition: opacity 0.12s linear; transform: none; }
  .mega-card { transition: none !important; }
}

/* ---------------------------------------------------------------
   Hero deck — the page hero IS the front card of a shuffling stack.
   Nav hover (kx-menu events) floats the hovered page's card to the front;
   the rest fan down behind. The fan lives in the .section.first bottom pad.
   --------------------------------------------------------------- */
.hero-deck { position: relative; height: clamp(520px, 52vw, 600px); perspective: 1300px; }
.hero-deck-card {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden; cursor: pointer;
  transform-origin: top center;
  transition: transform 0.62s var(--ease-quiet), opacity 0.46s var(--ease-quiet), filter 0.46s var(--ease-quiet);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(166, 225, 94, 0.16), transparent 58%),
    linear-gradient(158deg, #1C2D12 0%, #16240E 55%, #0E1A09 100%);
  border: 1px solid rgba(166, 225, 94, 0.2); box-shadow: 0 34px 60px -34px rgba(12, 22, 7, 0.7);
}
.hero-deck-card.is-hero { cursor: default; }
.hero-deck-card .menu-panel-title { font-size: clamp(30px, 4.4vw, 50px); }
.hero-deck-inner {
  position: relative; z-index: 2;
  height: 100%; box-sizing: border-box; padding: clamp(30px, 5vw, 60px);
  display: flex; flex-direction: column; justify-content: space-between; color: #F4F7EE;
}
@media (prefers-reduced-motion: reduce) { .hero-deck-card { transition: none !important; } }

/* CardSpotlight — a mouse-following spotlight reveals an animated lime dot-matrix.
   --spot-x / --spot-y (px, set on the card by onMouseMove) position the mask;
   the overlay sits below the content (z-index 1) and is pointer-transparent. */
.card-spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease-quiet);
  -webkit-mask-image: radial-gradient(circle var(--spot-r, 200px) at var(--spot-x, 50%) var(--spot-y, 50%), #000 0%, #000 16%, transparent 78%);
          mask-image: radial-gradient(circle var(--spot-r, 200px) at var(--spot-x, 50%) var(--spot-y, 50%), #000 0%, #000 16%, transparent 78%);
}
.hero-deck-card:hover .card-spotlight { opacity: 1; }
.card-spotlight::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle var(--spot-r, 200px) at var(--spot-x, 50%) var(--spot-y, 50%), rgba(166, 225, 94, 0.12), transparent 70%);
}
.card-spotlight-dots {
  position: absolute; inset: -1px;
  background-image:
    radial-gradient(circle, rgba(166, 225, 94, 0.95) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(130, 175, 88, 0.6) 1px, transparent 1.6px);
  background-size: 14px 14px, 14px 14px;
  background-position: 0 0, 7px 7px;
  animation: card-spot-twinkle 3.4s ease-in-out infinite;
}
@keyframes card-spot-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .card-spotlight-dots { animation: none; } }

/* ---------------------------------------------------------------
   Methods · Strix — Evervault-style animated pipeline steps.
   Hover reveals a scrambling character matrix + lime→teal gradient
   under a cursor-tracking radial spotlight (--ev-x / --ev-y).
   --------------------------------------------------------------- */
.ev-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ev-card {
  position: relative; border-radius: 14px; isolation: isolate;
  border: 1px solid rgba(166, 225, 94, 0.20);
  background: rgba(255, 255, 255, 0.02);
  padding: 30px 22px 26px; min-height: 244px; cursor: default;
}
.ev-pattern { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; z-index: 1; pointer-events: none; }
.ev-gradient {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, var(--lime) 0%, #34d39a 46%, #0ea5b7 100%);
  transition: opacity 0.5s var(--ease-quiet);
  -webkit-mask-image: radial-gradient(210px at var(--ev-x, 50%) var(--ev-y, 50%), #000 0%, transparent 72%);
          mask-image: radial-gradient(210px at var(--ev-x, 50%) var(--ev-y, 50%), #000 0%, transparent 72%);
}
.ev-chars {
  position: absolute; inset: 0; margin: 0; padding: 2px;
  font-family: var(--mono); font-size: 11px; line-height: 1.3; font-weight: 700;
  color: #EAF7D8; word-break: break-all; white-space: pre-wrap; overflow: hidden;
  opacity: 0; mix-blend-mode: overlay; transition: opacity 0.5s var(--ease-quiet);
  -webkit-mask-image: radial-gradient(210px at var(--ev-x, 50%) var(--ev-y, 50%), #000 0%, transparent 72%);
          mask-image: radial-gradient(210px at var(--ev-x, 50%) var(--ev-y, 50%), #000 0%, transparent 72%);
}
.ev-card:hover .ev-gradient { opacity: 1; }
.ev-card:hover .ev-chars { opacity: 1; }
.ev-content { position: relative; z-index: 2; }
.ev-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--lime); }
.ev-title { font-size: 19px; font-weight: 500; color: #F4F7EE; margin-top: 12px; letter-spacing: -0.015em; }
.ev-desc { font-size: 12.5px; line-height: 21px; color: #C2CDB5; margin-top: 10px; }
.ev-corner { position: absolute; color: var(--lime); opacity: 0.5; z-index: 3; }
.ev-corner.tl { top: -7px; left: -7px; }
.ev-corner.tr { top: -7px; right: -7px; }
.ev-corner.bl { bottom: -7px; left: -7px; }
.ev-corner.br { bottom: -7px; right: -7px; }
@media (prefers-reduced-motion: reduce) { .ev-gradient, .ev-chars { transition: none; } }
@media (max-width: 940px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ev-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Methods · Strix — animated terminal panel (typed CLI run).
   --------------------------------------------------------------- */
.term { border-radius: 12px; overflow: hidden; border: 1px solid rgba(166, 225, 94, 0.18); background: #0A0E08; box-shadow: 0 30px 60px -42px rgba(0, 0, 0, 0.8); }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.term-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.term-dot.r { background: #ff5f56; }
.term-dot.y { background: #ffbd2e; }
.term-dot.g { background: #27c93f; }
.term-title { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: #7E8B70; letter-spacing: 0.04em; }
.term-body { padding: 18px 20px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #C2CDB5; min-height: 322px; }
.term-block { margin-bottom: 8px; }
.term-cmd { color: #EAF7E0; white-space: pre-wrap; word-break: break-word; }
.term-prompt { color: var(--lime); margin-right: 10px; font-weight: 700; }
.term-out { color: #93A581; padding-left: 24px; }
.term-out.warn { color: #E8B84B; }
.term-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--lime); margin-left: 4px; transform: translateY(2px); border-radius: 1px; animation: term-blink 1s step-end infinite; }
@keyframes term-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term-caret { animation: none; } }

/* Methods · Strix — 2×2 layout: provenance | terminal · basis | what the numbers hid */
.strix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 56px; align-items: start; }
@media (max-width: 600px) { .strix-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ===============================================================
   COMPARE PAGE  (.kc-*)  — forest hero + Strix/Kestrel head-to-head
   =============================================================== */

/* growth bar used across comparable charts, grouped bars, size table */
.kc-bar { transform-origin: left center; animation: kc-grow 820ms var(--ease-quiet) both; }
@keyframes kc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kc-fade { animation: kc-fade 360ms var(--ease-quiet) both; }
@keyframes kc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- compare intro · what the page presents ---- */
.kc-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.kc-guide-item { position: relative; padding: 22px 22px 24px; }
.kc-guide-num { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--moss); }
.kc-guide-label { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-top: 10px; }
.kc-guide-body { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* ---- company picker ---- */
.kc-picker-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 60px; padding-top: 36px; border-top: 1px solid var(--line);
}
.kc-picker-title { font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 12px 0 0; }
.kc-picker-hint { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-3); max-width: 330px; }
.kc-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.kc-picker-cell {
  position: relative; background: var(--canvas); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-quiet), box-shadow var(--dur-layout) var(--ease-quiet), transform var(--dur-micro) var(--ease-quiet);
}
.kc-picker-cell:hover { border-color: var(--line-strong); box-shadow: var(--shadow-float); }
.kc-picker-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); opacity: 0.9; }
.kc-picker-slot { display: flex; align-items: center; gap: 9px; }
.kc-picker-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--accent); flex: 0 0 auto; }
.kc-picker-slotlabel { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.kc-picker-logo { height: 30px; display: flex; align-items: center; }
.kc-picker-logo svg { max-height: 26px; width: auto; }
.kc-select-wrap { position: relative; }
.kc-select {
  width: 100%; height: 46px; padding: 0 40px 0 16px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--canvas-2); font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color var(--dur-micro) var(--ease-quiet), background var(--dur-micro) var(--ease-quiet), box-shadow var(--dur-micro) var(--ease-quiet);
}
.kc-select:hover { border-color: var(--moss); background: var(--canvas); }
.kc-select:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(107,122,90,0.14); }
.kc-picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.kc-picker-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- KPI cards ---- */
.kc-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kc-kpi-card {
  position: relative; text-align: left; background: var(--canvas); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px 18px; cursor: pointer; overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-quiet), box-shadow var(--dur-layout) var(--ease-quiet), transform var(--dur-micro) var(--ease-quiet);
}
.kc-kpi-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); opacity: 0.85; }
.kc-kpi-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.kc-kpi-v { font-family: var(--font-sans); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.kc-kpi-v2 { font-family: var(--font-sans); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.kc-kpi-foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.kc-kpi-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--moss-deep); }
.kc-kpi-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-float); }
.kc-kpi-card:hover .kc-kpi-cta { color: var(--ink); }

/* ---- light content card ---- */
.kc-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px; }
.kc-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.kc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.kc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- classification donuts ---- */
.kc-donut-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.kc-donut-cell {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px;
  background: transparent; border: none; cursor: pointer; border-radius: 12px;
  transition: background var(--dur-micro) var(--ease-quiet);
}
.kc-donut-cell:hover { background: var(--canvas-2); }
.kc-donut-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.kc-donut-label i, .kc-donut-label span:first-child { flex: 0 0 auto; }
.kc-donut-cell .kc-donut-label svg { color: var(--ink-3); }

/* ---- dimension grouped bars (disclosure quality) ---- */
.kc-gb { display: flex; flex-direction: column; gap: 4px; }
.kc-gb-cat {
  display: grid; grid-template-columns: 184px 1fr; gap: 18px; align-items: center;
  padding: 9px 12px; margin: 0 -12px; border-radius: 12px;
  transition: background var(--dur-micro) var(--ease-quiet);
}
.kc-gb-cat:hover { background: var(--sage-tint); }
.kc-gb-catlabel { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.kc-gb-mark { width: 3px; height: 15px; border-radius: 2px; flex: 0 0 auto; }
.kc-gb-bars { display: flex; flex-direction: column; gap: 7px; }
.kc-gb-row { display: grid; grid-template-columns: 1fr 62px; gap: 12px; align-items: center; }
.kc-gb-track {
  position: relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--canvas-3); box-shadow: inset 0 0 0 1px rgba(22, 36, 14, 0.03);
}
.kc-gb-fill { height: 100%; border-radius: 999px; min-width: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.kc-gb-val { font-size: 12px; font-weight: 600; text-align: right; letter-spacing: -0.01em; }
.kc-gb-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2);
}
.kc-gb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.kc-gb-legend i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 620px) {
  .kc-gb-cat { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
}

/* ---- comparable metric grid ---- */
.kc-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ---- notes ---- */
.kc-note {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px;
  background: #fdf6e3; border: 1px solid #ecd9a8; color: #8a6a1f; font-size: 13px; line-height: 1.45;
}
.kc-note svg { flex: 0 0 auto; }
.kc-note-lg { padding: 18px 22px; font-size: 14.5px; }

/* ---- dark "not comparable" cards/tables ---- */
.kc-darkcard { background: #16240E; border: 1px solid rgba(166,225,94,0.22); border-radius: 16px; padding: 20px 22px; }
.kc-darkcard-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.kc-darkcard-head > div { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.kc-dark-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.kc-dark-badge-red { color: #E89A9A; background: rgba(232,154,154,0.12); border: 1px solid rgba(232,154,154,0.4); }
.kc-dark-badge-amber { color: #E8C77A; background: rgba(232,199,122,0.12); border: 1px solid rgba(232,199,122,0.4); }
.kc-darkcard-rows { margin-top: 14px; display: flex; flex-direction: column; }
.kc-darkcard-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: #C2CDB5; }
.kc-darkcard-row:last-child { border-bottom: none; }
.kc-dark-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kc-dark-table th { text-align: left; padding: 8px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #7E8E6D; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.1); }
.kc-dark-table td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: middle; }
.kc-dark-table th:first-child, .kc-dark-table td:first-child { padding-left: 22px; }
.kc-dark-table th:last-child, .kc-dark-table td:last-child { padding-right: 18px; }
.kc-dark-table tr:last-child td { border-bottom: none; }
.kc-dark-srcbtn { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 12.5px; color: #E8EFDF; text-decoration: underline; text-decoration-color: rgba(166,225,94,0.4); text-decoration-style: dotted; text-underline-offset: 3px; }
.kc-dark-srcbtn:hover { text-decoration-color: var(--lime); }

/* ---- matrix / source tables (light) ---- */
.kc-matrix, .kc-src-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kc-matrix th, .kc-src-table th { text-align: left; padding: 12px 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid var(--line); background: var(--canvas-2); white-space: nowrap; }
.kc-matrix td, .kc-src-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.kc-matrix tr:hover td, .kc-src-table tr:hover td { background: var(--canvas-2); }
.kc-cellbtn { background: none; border: none; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; cursor: pointer; }
.kc-cellbtn:hover { background: var(--sage-tint); }
.kc-srcpill { transition: border-color var(--dur-micro), color var(--dur-micro); }
.kc-srcpill:hover { border-color: var(--moss); color: var(--moss-deep); }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .kc-metric-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .kc-hero-chips { display: none; }
}
@media (max-width: 760px) {
  .kc-picker, .kc-kpi-row, .kc-donut-row, .kc-guide { grid-template-columns: 1fr; }
}
/* ---- hero (home-menu Compare panel, standalone) ---- */
.kc-hero-panel { min-height: clamp(300px, 34vw, 400px); }

/* ---- small icon button (expand / close) ---- */
.kc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); background: var(--canvas); color: var(--ink-2);
  cursor: pointer; transition: border-color var(--dur-micro) var(--ease-quiet), color var(--dur-micro) var(--ease-quiet), background var(--dur-micro) var(--ease-quiet);
}
.kc-iconbtn:hover { border-color: var(--moss); color: var(--moss-deep); background: var(--sage-tint); }

/* ---- clickable dark-card rows ---- */
.kc-rowbtn { cursor: pointer; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; transition: background var(--dur-micro) var(--ease-quiet); }
.kc-rowbtn:hover { background: rgba(166, 225, 94, 0.07); }

/* ---- not-comparable two-column layout: explainers left, "Other" right ---- */
.kc-nc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; margin-top: 26px; }
/* Right column: the card's only child is absolutely positioned, so the column
   contributes 0 intrinsic height — the grid row height is driven entirely by the
   left stack. The card then fills that height (inset:0) and scrolls its table
   internally, so its bottom lines up with the bottom of the energy-intensity card. */
.kc-other-col { position: relative; min-width: 0; }
.kc-other-card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 0 0; overflow: hidden; }
.kc-other-card .kc-darkcard-head { flex: 0 0 auto; }
.kc-other-foot { flex: 0 0 auto; }
.kc-other-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.kc-other-scroll .kc-dark-table thead th { position: sticky; top: 0; background: #16240E; z-index: 1; }
.kc-other-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.kc-other-scroll::-webkit-scrollbar-thumb { background: rgba(166, 225, 94, 0.22); border-radius: 999px; }
.kc-other-scroll::-webkit-scrollbar-thumb:hover { background: rgba(166, 225, 94, 0.38); }
.kc-other-scroll::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 980px) {
  .kc-nc-grid { grid-template-columns: 1fr; }
  .kc-other-col { position: static; }
  .kc-other-card { position: static; max-height: 72vh; }
}

/* ---- expanded chart lightbox ---- */
.kc-modal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(12, 18, 8, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  animation: kc-fade 220ms var(--ease-quiet) both;
}
.kc-modal {
  width: min(1080px, 100%); max-height: calc(100vh - 56px); overflow: auto;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(12, 22, 7, 0.45); padding: 26px 30px 28px;
}
@media (max-width: 640px) { .kc-modal-overlay { padding: 12px; } .kc-modal { padding: 18px 16px; } }

@media (prefers-reduced-motion: reduce) {
  .kc-bar, .kc-fade, .kc-modal-overlay { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ---------------------------------------------------------------
   Methods · Kestrel — the pipeline as a dark forest band with an
   animated lime "flow" running step → step (model → rules → profiles).
   --------------------------------------------------------------- */
.km-pipe-band {
  border-radius: 22px; padding: clamp(26px, 4vw, 44px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(166, 225, 94, 0.13), transparent 56%),
    linear-gradient(158deg, #1C2D12 0%, #16240E 55%, #0E1A09 100%);
  border: 1px solid rgba(166, 225, 94, 0.18);
  box-shadow: 0 34px 60px -38px rgba(12, 22, 7, 0.65);
}
.km-pipe-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.km-pipe-sub { font-family: var(--mono); font-size: 12px; color: #9DAC8C; letter-spacing: 0.03em; }
.km-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.km-step {
  position: relative; padding: 24px 22px 22px; border-radius: 14px;
  border: 1px solid rgba(166, 225, 94, 0.16); background: rgba(255, 255, 255, 0.035);
  transition: transform 0.25s var(--ease-quiet), border-color 0.25s var(--ease-quiet), box-shadow 0.25s var(--ease-quiet);
}
.km-step:hover {
  transform: translateY(-5px);
  border-color: rgba(166, 225, 94, 0.55);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}
.km-step-badge {
  width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: rgba(166, 225, 94, 0.12); color: var(--lime); border: 1px solid rgba(166, 225, 94, 0.3);
  transition: background 0.25s var(--ease-quiet), color 0.25s var(--ease-quiet), transform 0.25s var(--ease-quiet);
}
.km-step:hover .km-step-badge { background: var(--lime); color: #16240E; transform: scale(1.07); }
.km-step-meta { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.km-step-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--lime); }
.km-step-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #7E8E6D; border: 1px solid rgba(166, 225, 94, 0.18); border-radius: 999px; padding: 2px 8px; }
.km-step-k { font-size: 20px; font-weight: 600; color: #F4F7EE; margin-top: 8px; letter-spacing: -0.015em; }
.km-step-v { font-size: 12.5px; line-height: 20px; color: #C2CDB5; margin-top: 10px; }
/* flow connector — a dim dashed rail in each gap. A single bright pulse sweeps
   the dashes left→right, and the three gaps are staggered so the pulse appears
   to travel 01 → 02 → 03 → 04 (no travelling dot; the dashes themselves pulse).
   Layer 1 = the moving highlight (250% wide, parked off-screen until its turn);
   layer 2 = the always-on dim rail. A dash-shaped mask cuts both into dashes. */
.km-step:not(:last-child)::after {
  content: ''; position: absolute; top: 47px; right: -40px; width: 40px; height: 2px; z-index: 1;
  background:
    linear-gradient(90deg, transparent 40%, rgba(226, 255, 158, 0.95) 50%, transparent 60%),
    linear-gradient(rgba(166, 225, 94, 0.30), rgba(166, 225, 94, 0.30));
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0, 0 0;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 14px);
          mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 14px);
  filter: drop-shadow(0 0 3px rgba(166, 225, 94, 0.45));
  animation: km-pulse 4s linear infinite;
}
.km-step:nth-child(1)::after { animation-delay: 0s; }
.km-step:nth-child(2)::after { animation-delay: 1.2s; }
.km-step:nth-child(3)::after { animation-delay: 2.4s; }
/* the highlight sweeps across in the first quarter of the loop, then parks
   off-screen (dim rail only) — the 1.2s stagger chains the three into one pulse */
@keyframes km-pulse {
  0%   { background-position: 100% 0, 0 0; }
  25%  { background-position: 0% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}
@media (max-width: 880px) {
  .km-pipe { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .km-step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) { .km-pipe { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .km-step:not(:last-child)::after { animation: none !important; }
  .km-step { transition: none; }
}