/* Plutonium - exact reproduction of the Figma (t9ggNos7) Plutonium pages.
   Tints + pink/teal section bands + illustrated-planet hero + verbatim
   ClaudeSec/CopilotSec component CSS (injected) + Figma-exact overrides. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Unbounded:wght@600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
html { scroll-padding-top: 110px; scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #111013; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease both; }

/* ---- Smart-Animate-style cross-document transition (Figma flow 5) ---- */
/* Spring(mass 1, stiffness 100, damping 15) -> wn=10, zeta=0.75: ~0.55s, mild overshoot */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.8s;
  animation-timing-function: linear(0.0000 0.0%, 0.0181 2.5%, 0.0653 5.0%, 0.1325 7.5%, 0.2121 10.0%, 0.2982 12.5%, 0.3862 15.0%, 0.4726 17.5%, 0.5547 20.0%, 0.6308 22.5%, 0.7000 25.0%, 0.7615 27.5%, 0.8153 30.0%, 0.8616 32.5%, 0.9006 35.0%, 0.9329 37.5%, 0.9592 40.0%, 0.9800 42.5%, 0.9962 45.0%, 1.0083 47.5%, 1.0169 50.0%, 1.0228 52.5%, 1.0263 55.0%, 1.0280 57.5%, 1.0283 60.0%, 1.0276 62.5%, 1.0261 65.0%, 1.0241 67.5%, 1.0218 70.0%, 1.0193 72.5%, 1.0168 75.0%, 1.0144 77.5%, 1.0121 80.0%, 1.0100 82.5%, 1.0081 85.0%, 1.0064 87.5%, 1.0049 90.0%, 1.0036 92.5%, 1.0026 95.0%, 1.0017 97.5%, 1.0010 100.0%); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: ease; }
.welcome  { view-transition-name: vt-welcome; }
.wordmark { view-transition-name: vt-wordmark; }
.bigplanet { view-transition-name: vt-bigplanet; }
.header-outer { view-transition-name: vt-header; }
.site-footer { view-transition-name: vt-footer; }
.hero-search { view-transition-name: vt-search; }
.lead { view-transition-name: vt-lead; }
.sub { view-transition-name: vt-sub; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*){ animation: none; } }

/* ---- page + full-bleed section bands ---- */
.home-page { min-height: 100vh; position: relative; display: flex; flex-direction: column; overflow-x: clip; background-color: var(--tint); transition: background-color .7s ease; }
.band { position: relative; width: 100%; }
.band > .inner { max-width: 1184px; margin: 0 auto; padding: 0 44px; position: relative; }
.band-browse { background: var(--band); }

/* per-page themes */
.theme-home { --tint:#fcf2d4; --band:#fee2e2; --accent:#ff8a5c; --bigplanet:#ffb89f;
  --grid: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='40' y1='30' x2='40' y2='50' stroke='rgba(224,103,63,0.16)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='30' y1='40' x2='50' y2='40' stroke='rgba(224,103,63,0.16)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.theme-claudesec { --tint:#ffb89f; --band:#fee2e2; --accent:#ff7a4d; --bigplanet:#ffbc65;
  --grid: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='40' y1='30' x2='40' y2='50' stroke='rgba(255,255,255,0.42)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='30' y1='40' x2='50' y2='40' stroke='rgba(255,255,255,0.42)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.theme-copilotsec { --tint:#edf2ee; --band:#fee2e2; --accent:#5b9cff; --bigplanet:#93c0ff;
  --grid: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='40' y1='30' x2='40' y2='50' stroke='rgba(70,95,82,0.13)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='30' y1='40' x2='50' y2='40' stroke='rgba(70,95,82,0.13)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.theme-marketplace { --tint:#eeffe8; --band:#ecf8f5; --accent:#2eae86; --bigplanet:#9be86f;
  --grid: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='40' y1='30' x2='40' y2='50' stroke='rgba(55,150,95,0.15)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='30' y1='40' x2='50' y2='40' stroke='rgba(55,150,95,0.15)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Background "+" crosses - thin sharp plus signs (figma vector), sparse grid. */
.home-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='69.2' y='59' width='1.6' height='22' fill='%23111013' fill-opacity='0.13'/%3E%3Crect x='59' y='69.2' width='22' height='1.6' fill='%23111013' fill-opacity='0.13'/%3E%3C/svg%3E");
  background-size: 140px 140px; }
.theme-home { --planet-img: url(img/planet-home.svg); }
.theme-claudesec { --planet-img: url(img/planet-claude.svg); }
.theme-copilotsec { --planet-img: url(img/planet-copilot.svg); }
.theme-marketplace { --planet-img: url(img/planet-market.svg); }

/* ---- hero ---- */
.hero { position: relative; overflow: visible; z-index: 5; }
.hero.searching { z-index: 50; }
.home-page.eco .hero .inner { min-height: 0; padding-bottom: 150px; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.hero .inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 36px; padding-bottom: 40px; min-height: 850px; }
/* Home: room under the search row for the chamfered banner's pull-up (the
   lifted hero left it overlapping the search + Browse All). */
.home-page:not(.eco) .hero .inner { padding-bottom: 140px; }
.hero-bg, .planets { pointer-events: none; }
.orbit-planet { pointer-events: auto; }
.bigplanet { transition: transform .8s linear(0,0.018 2.5%,0.065 5%,0.133 7.5%,0.212 10%,0.298 12.5%,0.386 15%,0.473 17.5%,0.555 20%,0.631 22.5%,0.7 25%,0.762 27.5%,0.815 30%,0.862 32.5%,0.901 35%,0.933 37.5%,0.959 40%,0.98 42.5%,0.996 45%,1.008 47.5%,1.017 50%,1.023 52.5%,1.026 55%,1.028 57.5%,1.028 60%,1.026 65%,1.022 70%,1.017 75%,1.012 80%,1.008 85%,1.005 90%,1.003 95%,1.001 100%), opacity .5s ease; }
.bigplanet.gone { transform: translateY(85vh); opacity: 0; }
/* Deep-link into an ecosystem: hide the home planet instantly (no flash) until
   selectTool takes over. */
.preselect .bigplanet { transition: none !important; transform: translateY(85vh); opacity: 0; }

/* tool planets (buttons on the arc) */
.planets { z-index: 2; }
.orbit-planet { background: none; border: none; padding: 0; margin: 0; cursor: pointer; }
.orbit-planet img { display: block; width: 100%; height: auto; transition: transform .25s cubic-bezier(.34,1.4,.5,1), filter .25s ease; }
.orbit-planet.orb-live:hover > img,
.orbit-planet.orb-live:hover .mkt-planet { transform: translateY(-7px) scale(1.06); filter: saturate(1.25) brightness(1.04) drop-shadow(0 9px 16px color-mix(in srgb, var(--accent) 45%, transparent)); }
.orbit-planet.orb-soon:hover > img { transform: translateY(-4px); filter: saturate(1.12); }
/* Market-Space: static sphere + continuously spinning text ring */
.mkt-planet { position: relative; display: block; width: 100%; transition: transform .25s cubic-bezier(.34,1.4,.5,1), filter .25s ease; }
.mkt-sphere { position: relative; }
.mkt-ring { position: absolute; top: 0; left: 0; transform-origin: 49.2% 51.5%; animation: mkt-spin 24s linear infinite; }
@keyframes mkt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mkt-ring { animation: none; } }
.orbit-planet.orb-soon { cursor: default; }
.orbit-planet.orb-soon img { opacity: .82; }
.orbit-planet.dimmed { opacity: .9; }
.orb-badge { position: absolute; left: 50%; top: -10px; transform: translateX(-50%) scale(.6); transform-origin: bottom center;
  opacity: 0; transition: transform .2s cubic-bezier(.34,1.4,.5,1), opacity .18s ease; white-space: nowrap; pointer-events: none;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; padding: 4px 11px; border-radius: 100px; border: 1.5px solid #000; }
.orbit-planet:hover .orb-badge { opacity: 1; transform: translateX(-50%) scale(1); }
.badge-new { background: #ffdf78; color: #000; }
/* "Coming soon" - a tilted white tag with a hard black drop-shadow that drops
   in below the planet on hover (matches the figma sticker treatment). */
.badge-soon { top: auto; bottom: -30%; left: 50%; padding: 7px 14px; border: 2px solid #111013;
  border-radius: 3px; background: #fff; color: #111013; font-family: 'Unbounded','Poppins',sans-serif;
  font-weight: 700; font-size: clamp(9.5px,0.84vw,12px); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 4px 4px 0 #111013; transform: translateX(-50%) translateY(8px) rotate(-5deg) scale(.85); z-index: 4; }
.orbit-planet:hover .badge-soon { transform: translateX(-50%) translateY(0) rotate(-5deg) scale(1); }
.orbit-planet { position: absolute; }

/* "Explore [planet] Ecosystems" center slot */
.lead-slot { display: inline-block; width: 0; height: clamp(46px,5.5vw,86px); vertical-align: middle; transition: width .8s ease; }
.eco .lead-slot { width: clamp(86px, 9.5vw, 122px); }

/* content swap crossfade */
#content { transition: opacity .35s ease; }
#content.swapping { opacity: 0; }
.bigplanet { position: absolute; left: 0; transform: none; top: 150px; width: 100%; height: 52vw;
  background: var(--planet-img) no-repeat center top; background-size: 100% 100%; }
.planets { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 1440px; height: 100%; max-width: 100%; z-index: 2; pointer-events: none; }
.orbit-planet { position: absolute; display: block; pointer-events: auto; }
.orbit-planet img { display: block; width: 100%; height: auto; }

.welcome { font-family: 'Unbounded', 'Poppins', sans-serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); color: #000; text-align: center; position: relative; z-index: 3; line-height: 1.1; margin-top: 48px; }
/* Ecosystem views keep the planets in the compact TOP arc, so the title needs
   its original clearance there (the lifted 48px is home-only). */
.home-page.eco .welcome { margin-top: 112px; }
@media (max-width: 760px){ .welcome { margin-top: 96px; } }
.wordmark { display: block; width: clamp(280px, 41vw, 580px); height: auto; margin: 10px auto 0; position: relative; z-index: 3; }
.lead { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(26px, 3.3vw, 46px); color: #000; margin-top: 279px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; position: relative; z-index: 3; text-align: center; line-height: 1; }
.lead .lead-planet { width: clamp(90px, 11vw, 150px); height: auto; margin: 0 2px; }
.lead .lead-planet-green { display: inline-block; width: clamp(64px, 8vw, 116px); height: clamp(64px, 8vw, 116px); border-radius: 50%; margin: 0 8px; vertical-align: middle; border: 1.5px solid #000; background: radial-gradient(circle at 38% 30%, #c7f0a6, #7ed957 55%, #4fae3a); box-shadow: inset -8px -8px 18px rgba(0,0,0,.18); }
.sub { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(15px, 1.55vw, 20px); line-height: 1.5; color: #1c1917; text-align: center; max-width: 620px; margin: 14px auto 0; position: relative; z-index: 3; }
/* Home subtitle: three standalone sentences, one under the other. The home sub
   runs wider than the eco subs so the middle sentence holds one line on
   desktop (it wraps naturally on narrow screens). */
.sub:has(.sub-line) { max-width: 860px; }
.sub-line { display: block; }

/* ---- Mobile hero (<=760px) ----------------------------------------------
   On desktop the 5 planets sit on an absolutely-positioned 1440px arc above
   the title. On a phone that arc collides with "Welcome to Plutonium". Here we
   put the planets into normal flow as a compact cluster ABOVE the title, at a
   fixed height, and trim the big desktop top-margins. The planets stay
   position:absolute (rules scoped :not(.to-slot)) so flyPlanetToSlot's inline
   left/top/width still drive the fly-into-slot animation. Desktop is untouched. */
@media (max-width: 760px){
  .hero-bg { display: none; }                 /* desktop big-planet backdrop */
  .hero .inner { min-height: 0; padding-top: 4px; }
  .home-page:not(.eco) .hero .inner { padding-bottom: 52px; }
  .planets {
    position: relative; left: auto; transform: none;
    width: 100%; height: 175px; margin: 6px auto 0;
  }
  /* symmetric formation: the three LIVE planets prominent (Claude on the
     crest, Copilot / Market-Space flanking), coming-soon small on row two */
  .orbit-planet:not(.to-slot) { width: 84px !important; }
  .orbit-planet:not(.to-slot)[data-key="claudesec"]   { left: 38% !important;  top: 0    !important; }
  .orbit-planet:not(.to-slot)[data-key="copilotsec"]  { left: 5% !important;   top: 30px !important; }
  .orbit-planet:not(.to-slot)[data-key="marketplace"] { left: 66% !important;  top: 22px !important; width: 108px !important; }
  .orbit-planet:not(.to-slot)[data-key="gemini"]      { left: 17% !important;  top: 106px !important; width: 60px !important; }
  .orbit-planet:not(.to-slot)[data-key="codex"]       { left: 62% !important;  top: 112px !important; width: 60px !important; }
  .welcome { margin-top: 18px; }
  .lead { margin-top: 28px; }
}

.hero-search { width: 100%; max-width: 695px; margin: 30px auto 0; position: relative; z-index: 4; }
.hero-search .search-input-wrap { width: 100%; }
/* Results sit IN FLOW (relative, not absolute) so they push the stats and the
   content below them down instead of covering them. */
.hero-search .search-results:not(:empty) { position: relative; margin-top: 12px; z-index: 5;
  background: #fff; border: 1.5px solid #000; border-radius: 16px; box-shadow: 6px 6px 0 #000; max-height: 60vh; overflow-y: auto; }
.search-scrim { display: none; }
.hero-search .search-dropdown { margin: 0; padding: 6px; gap: 0; }
.hero-search .search-dropdown-item { border: none; border-radius: 10px; box-shadow: none; padding: 14px 16px; }
.hero-search .search-dropdown-item:hover { background: #faf8f2; transform: none; box-shadow: none; }
.hero-search .search-dropdown-item + .search-dropdown-item { border-top: 1px solid #ece7da; }
.hero-search .search-dropdown-empty { border: none; }

/* ---- chamfered banner ---- */
.bannerwrap { display: flex; justify-content: center; width: 100%; }
.topbanner { position: relative; top: -62px; z-index: 10; margin-bottom: -52px; }
/* While searching, drop the banner's pull-up so it can't overlap the in-flow
   search results that now extend to the bottom of the (shortened) hero. The
   pull-up is set inline by centerTopBanner(), so this needs !important. */
/* While searching, the in-flow results list grows the hero: drop the idle
   850px min-height so the hero hugs the results (no empty gap), and add bottom
   room so the next section's chamfered banner (which pulls up over the
   hero/band seam, as it does at idle) can't overlap the results. */
.searching .hero .inner { min-height: 0; padding-bottom: 96px; }
/* The planet's pink always continues DOWN to the hero's real bottom: the
   rounded dome stays as drawn, and a full-width fill below it (clipped by
   .hero-bg's overflow:hidden) covers whatever height the hero grows to - no
   cream strip between the dome bottom and the band below, at any width or
   content height. */
/* The searching hero is raised (z-index 50) so its pink covers the results area;
   lift the next section's chamfered banner above it so it still straddles the
   seam fully (both lines visible), exactly as it does at idle. */
.searching .topbanner { z-index: 60; }
.bigplanet::after {
  content: '';
  position: absolute;
  left: 0;
  /* Start partway UP the dome, not at its bottom: the dome SVG's pink fill ends
     a little above the element's bottom edge (transparent tail in the viewBox),
     so anchoring at 100% would leave a cream gap. 60% is safely inside the dome's
     solid, full-width lower half, so the fill overlaps it seamlessly. */
  top: 60%;
  width: 100%;
  height: 300vh;      /* over-long; clipped to the hero by .hero-bg overflow:hidden */
  background: var(--bigplanet);
}

/* Market-Space: the hero search bar relocates into the Top Trusted band
   (title -> search -> chips); reset its hero margin once it's in the slot. */
.hero-search-slot { width: 100%; display: flex; justify-content: center; }
.hero-search-slot .hero-search { margin: 0 auto; }

/* Compress the Market-Space hero so the Top Trusted band is visible on entry
   without scrolling (the search bar has moved out of the hero into the band). */
/* Match the wordmark size to the ClaudeSec / CopilotSec views (the base
   .wordmark size); keep the tighter top margin for the compressed hero. */
.home-page.eco[data-eco="marketplace"] .hero .wordmark { width: clamp(280px, 41vw, 580px); margin-top: 4px; }
.home-page.eco[data-eco="marketplace"] .hero .lead { margin-top: 16px; }
.home-page.eco[data-eco="marketplace"] .hero .inner { padding-bottom: 34px; }
/* Keep the blue band's top border where it is, but drop the content a little
   so the Top Trusted banner sits below the border with blue framing above it. */
.home-page.eco[data-eco="marketplace"] #high-risk .browse-inner { padding-top: 76px; }
/* Hexagon: equal-width top and bottom edges, with the left/right sides angling
   out to a point at mid-height. The section background meets those points, so
   the banner's sides read as covered - only the top and bottom are exposed. */
.hexbar { position: relative; display: inline-flex; --tab: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }
.hexbar::before { content: ""; position: absolute; inset: -2px; background: #000; clip-path: var(--tab); filter: drop-shadow(0 5px 0 #000); }
.hexbar .fill { position: relative; background: var(--banner, #ffdf78); clip-path: var(--tab); padding: 22px 124px; display: flex; align-items: center; justify-content: center; }
.theme-marketplace .hexbar .fill { background: #9fe384; }
.hexbar .fill h2 { font-family: 'Unbounded', 'Poppins', sans-serif; font-weight: 700; font-size: clamp(16px, 1.9vw, 26px); text-align: center; margin: 0; line-height: 1.45; color: #111013; text-transform: capitalize; max-width: 440px; }
/* On mobile the 124px side padding squeezed the banner text into 4 lines,
   making the hexbar tall enough that its straddle (top:-h/2) overlapped the
   search bar above it. Tighten padding so it sits on ~2 lines as designed. */
@media (max-width: 760px) {
  .hexbar .fill { padding: 16px 30px; }
  .hexbar .fill h2 { font-size: 16px; max-width: 260px; }
}
.vm-btn { background: #000; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; border-radius: 100px; padding: 14px 42px; }

/* thin black lines along the pink section's top (planet->pink) and bottom
   (pink->guides/news) boundaries; the banners straddle them centered. */
.band-browse { position: relative; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.band-browse .inner { position: relative; }
/* pull the band's bottom edge up to the View More banner's center so it
   straddles the lower border (mirrors the topbanner at the top). */
#vmwrap { position: relative; z-index: 10; margin-bottom: -48px; }
.tlights { position: absolute; top: 16px; left: 60px; display: inline-flex; gap: 9px; z-index: 6; }
@media (max-width: 900px){ .tlights { left: 20px; top: 12px; } }
.tlights svg { width: 92px; height: auto; display: block; }
/* marketplace "across / by" stat bar (sits below the Top Trusted Add-ons grid) */
.mkt-stats { width: 100%; max-width: 1097px; margin: 0 auto; position: relative; }
.mkt-stats-svg { width: 100%; height: auto; display: block; }
/* Clickable overlay on the leftmost "Total Safe Add-ons" box -> full catalog. */
.mkt-total-link {
  position: absolute;
  left: 2.5%; top: 20%; width: 23.2%; height: 80%;
  display: block;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.mkt-total-link:hover { background: rgba(46,174,134,.10); box-shadow: 0 0 0 2px var(--accent, #2eae86); }
.mkt-total-link:focus-visible { outline: none; background: rgba(46,174,134,.10); box-shadow: 0 0 0 2px var(--accent, #2eae86); }

/* ---- browse + controls ---- */
.browse-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 92px; padding-bottom: 96px; }
/* `.band > .inner { padding: 0 44px }` (more specific) otherwise zeroes the
   vertical padding above, so the grid sits flush against the next section.
   Restore breathing room with id-level rules (high enough specificity to win)
   without shifting the topbanner, which is offset from the section top. */
/* On home the news follows the grid directly, so give it top room here. On the
   ecosystem pages the Guides section (its own top margin) sits between, so the
   grid needs no extra bottom padding - that would double the gap. */
#news > .browse-inner { padding-top: 80px; padding-bottom: 60px; }

/* floating side decorations - recolor per ecosystem via --accent */
/* Figma floating "planets" pinned to the hero's left/right edges, cut off by
   the page border. One pair per ecosystem; the home pair shows when no tool is
   selected. Each pair fades/floats in when its view becomes active. */
.hero-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.float { position: absolute; display: none; opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.float.shown { opacity: 1; transform: translateY(0); }
.float-a { left: -14px; }
.float-b { right: -14px; }
/* which pair is visible */
#page:not(.eco) .float-home { display: block; }
#page.eco[data-eco="claudesec"]  .float-claudesec  { display: block; }
#page.eco[data-eco="copilotsec"] .float-copilotsec { display: block; }
#page.eco[data-eco="marketplace"] .float-marketplace { display: block; }
/* per-element placement + size (native art is small; SVG scales crisply) */
.float-home.float-a      { top: 190px; width: 104px; }
.float-home.float-b      { top: 300px; width: 128px; }
.float-claudesec.float-a { top: 218px; width: 168px; left: -22px; }
.float-claudesec.float-b { top: 372px; width: 104px; right: -20px; }
.float-copilotsec.float-a{ top: 252px; width: 92px;  left: -8px; }
.float-copilotsec.float-b{ top: 360px; width: 118px; }
.float-marketplace.float-a{ top: 256px; width: 70px;  left: -2px; }
.float-marketplace.float-b{ top: 344px; width: 176px; }
.hexbar.clickable { cursor: pointer; transition: transform .12s ease; }
.hexbar.clickable:hover { transform: translateY(-2px); }
@media (max-width: 1080px){ .hero-deco { display: none; } }
.browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 1100px; }
@media (max-width: 900px) { .browse-grid { grid-template-columns: 1fr; } }
.controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.chip { background: #fff; border: 1px solid #000; border-radius: 100px; padding: 9px 20px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; cursor: pointer; box-shadow: 3px 3px 0 #000; transition: transform .1s, background .15s; text-transform: capitalize; }
.chip:hover { transform: translate(-1px,-1px); }
.chip.active { background: #000; color: #fff; }
.count-line { text-align: center; color: #1c1917; font-size: 13px; }
.more-btn { background: #000; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .5px; border: 1px solid #000; border-radius: 100px; padding: 14px 34px; cursor: pointer; }

/* news pager */
.pager { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
.pager span, .pager .page-dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #000; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; background: #fff; color: #111013; }
.pager .page-dot { cursor: pointer; transition: transform .1s ease, background .15s, color .15s; padding: 0; }
.pager .page-dot:hover { transform: translateY(-2px); }
.pager span.on, .pager .page-dot.on { background: #000; color: #fff; }

/* back to all */
/* Absolute so it never pushes "Welcome to PLUTONIUM" down - the wordmark stays
   in the exact same spot on the home and ecosystem views. */
.back-all { position: absolute; top: 28px; left: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #000; border-radius: 100px; padding: 12px 26px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; box-shadow: 4px 4px 0 #000; }
@media (max-width: 900px){ .back-all { left: 6px; top: 18px; } }
a.nav-link { display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 760px) {
  /* Remove the cramped navbar on mobile - the nav links don't fit and the
     hero wordmark already carries the branding. */
  .home-page .header-outer { display: none; }
  /* Let the "Back to all" button flow at the top of the hero (pushing the
     welcome down) instead of being absolutely positioned on top of it. */
  .back-all { position: static; align-self: flex-start; top: auto; left: auto;
    margin: 0 0 16px; padding: 9px 18px; font-size: 13px; }
}

/* risk-pill medium/none variants */
.risk-pill-medium { background: #FEF3C7; color: #854D0E; }
.risk-pill-none { background: #F1F5F9; color: #475569; }

/* stat badges (catalog) */
.stats-card-badge-low { background: #E0EFFF; color: #1d63c4; }

/* ---- modal ---- */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.overlay.open { display: flex; }
.modal { background: #fff; border: 1px solid #000; box-shadow: 8px 8px 0 #000; border-radius: 20px; max-width: 660px; width: 100%; max-height: 86vh; overflow: auto; padding: 28px; }
.modal .close { float: right; background: #ffff78; border: 1px solid #000; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.modal h2 { font-family: 'Poppins', sans-serif; font-weight: 700; margin: 8px 0 2px; font-size: 22px; }
.modal .m-pub { color: #78716c; font-size: 13px; }
.modal .m-desc { color: #334155; font-size: 14px; line-height: 21px; margin-top: 12px; }
.modal a { text-decoration: underline; }
.modal a.m-dir-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: #000; color: #fff; font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 100px; }
.modal a.m-dir-link:hover { background: #1c1917; }
.kv { margin: 16px 0; } .kv h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #78716c; }
.modal pre { background: #0F172A; color: #E2E8F0; border-radius: 10px; padding: 12px 14px; overflow: auto; font-size: 12px; white-space: pre-wrap; font-family: 'SF Mono','Fira Code',Menlo,monospace; }
.risknote { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; margin: 6px 0; }
.tag { display: inline-block; background: #f5f5f4; border: 1px solid #d6d3d1; color: #1c1917; font-size: 11px; padding: 3px 10px; border-radius: 100px; margin: 0 6px 6px 0; }

.platform-tag { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; border: 1px solid #000; text-transform: uppercase; letter-spacing: .04em; flex: none; }
.platform-tag.claudesec { color: #000; background: #ffc7b3; }
.platform-tag.copilotsec { color: #000; background: #bcd3ff; }

/* ===== components/Header.css ===== */
.header-outer {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 50px;
  background: transparent;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 16px 42px;
  background: #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-radius: 0 0 45px 45px;
}

.header-logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
  text-transform: capitalize;
  white-space: nowrap;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.nav-link {
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-transform: capitalize;
  padding: 8px 22px;
  height: 48px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.nav-link:hover {
  background: #ffff78;
  color: #000;
}

.btn-sneak-peak {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #000;
  background: #fff;
  border: none;
  border-radius: 100px;
  padding: 8px 28px 8px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-sneak-peak:hover {
  background: #f5f5f5;
}

.pluto-logo-wrap {
  position: relative;
  width: 105px;
  height: 32px;
  display: inline-block;
}

.pluto-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pluto-logo-inner {
  position: absolute;
  top: 35%;
  left: 19.5%;
  width: 62%;
  height: 30%;
}

@media (max-width: 900px) {
  .header-outer { padding: 0 16px; }
  .header { padding: 12px 14px 12px 18px; gap: 8px; border-radius: 0 0 28px 28px; }
  .header-logo { font-size: 20px; }
  .header-nav { gap: 8px; }
  .nav-link { display: none; }
}

@media (max-width: 900px) {
  .btn-sneak-peak {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 6px 14px 6px 14px;
    gap: 6px;
  }
  .btn-sneak-peak > span:first-child { display: none; }
  .pluto-logo-wrap { width: 78px; height: 24px; }
}

@media (max-width: 420px) {
  .header-outer { padding: 0 10px; }
  .header { padding: 10px 10px 10px 14px; }
  .header-logo { font-size: 17px; }
}

/* ===== components/Footer.css ===== */
.site-footer {
  background: #ffff78;
  border-top: 1px solid #000;
  padding: 28px 60px;
  position: relative;
  z-index: 2;
}

.site-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-copy {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #000;
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 28px;
}

.footer-link {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #000;
  text-decoration: underline;
}

.footer-link:hover {
  opacity: 0.7;
}

@media (max-width: 700px) {
  .site-footer { padding: 20px 20px; }
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
  .footer-copy { font-size: 13px; }
}

/* ===== components/SearchBox.css ===== */
/* Shared opacity driver so head + hands always fade together */
@property --monkey-opacity {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.search-box-wrapper {
  width: 100%;
  max-width: 695px;
  position: relative;
}

/* Wraps the frame, monkey, and decorative shapes so they
   stay anchored to the search frame even when the dropdown
   below expands the overall wrapper height. */
.search-box-top {
  position: relative;
  width: 100%;
}

/* Monkey positioned at top edge of frame */
.search-box-monkey-group,
.search-box-monkey-hands {
  position: absolute;
  top: -70px;
  right: 10px;
  width: 150px;
  height: 110px;
  pointer-events: none;
  transform-origin: bottom center;
}

.search-box-monkey-group {
  z-index: 0;
  animation: monkey-slide 16s ease-in-out 2s infinite;
}

.search-box-monkey-hands {
  animation: monkey-slide-hands 16s ease-in-out 2s infinite;
}

.search-box-monkey {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 72px;
  animation: monkey-head 16s ease-in-out 2s infinite;
  transform-origin: 50% 90%;
}

.search-box-monkey-hand {
  position: absolute;
  bottom: 0;
  width: 44px;
  height: 50px;
  z-index: 1;
}

.search-box-monkey-hand-left {
  left: 14px;
}

.search-box-monkey-hand-right {
  right: 14px;
  transform: scaleX(-1); /* mirror so the hand points opposite the left one */
}

@keyframes monkey-slide {
  0%      { transform: translateY(90px); opacity: 0; }
  4%      { transform: translateY(5px);  opacity: 0; }
  6%      { transform: translateY(0px);  opacity: 1; }
  69%     { transform: translateY(0px);  opacity: 1; }
  71%     { transform: translateY(5px);  opacity: 0; }
  75%     { transform: translateY(90px); opacity: 0; }
  100%    { transform: translateY(90px); opacity: 0; }
}

@keyframes monkey-slide-hands {
  0%      { transform: translateY(90px); opacity: 0; z-index: 2; }
  4%      { transform: translateY(5px); opacity: 0; z-index: 2; }
  6%      { transform: translateY(0px); opacity: 1; z-index: 2; }
  69%     { transform: translateY(0px); opacity: 1; z-index: 2; }
  71%     { transform: translateY(5px); opacity: 0; z-index: 2; }
  75%     { transform: translateY(90px); opacity: 0; z-index: 2; }
  100%    { transform: translateY(90px); opacity: 0; z-index: 2; }
}

@keyframes monkey-head {
  0%, 6%   { transform: translateX(-50%) rotate(0deg); }
  18%      { transform: translateX(-50%) rotate(-10deg); }
  37%      { transform: translateX(-50%) rotate(0deg); }
  56%      { transform: translateX(-50%) rotate(10deg); }
  69%,100% { transform: translateX(-50%) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .search-box-wrapper,
  .search-box-monkey { animation: none; }
}

.search-box-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.search-frame-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Corner screws */
.screw {
  position: absolute;
  z-index: 2;
}
.screw-tl { top: 10px; left: 18px; }
.screw-tr { top: 10px; right: 18px; }
.screw-bl { bottom: 10px; left: 18px; }
.screw-br { bottom: 10px; right: 18px; }

/* Decorative top/bottom bars */
.search-box-bar {
  position: absolute;
  left: 23px;
  right: 23px;
  height: 2px;
}
.search-box-bar-top {
  top: 8px;
  height: 20px;
  border: 1.5px solid #555;
  border-top: none;
  border-radius: 0 0 100px 100px;
  background: none;
  opacity: 1;
}
.search-box-bar-bottom {
  bottom: 8px;
  height: 20px;
  border: 1.5px solid #555;
  border-bottom: none;
  border-radius: 100px 100px 0 0;
  background: none;
  opacity: 1;
}

.search-box-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 16px;
  width: 76%;
}

.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  padding: 14px 22px;
  gap: 12px;
}

.search-icon {
  color: #888;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #000;
  background: transparent;
}

.search-input::placeholder {
  color: #999;
}

.search-button {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: #000;
  border: none;
  border-radius: 100px;
  padding: 16px 32px;
  cursor: pointer;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: background 0.15s;
}

.search-button:hover {
  background: #222;
}

@media (max-width: 700px) {
  .search-box-monkey-group,
  .search-box-monkey-hands { top: -35px; }

  .search-deco { display: none; }

  .search-box-frame { padding: 32px 18px; border-radius: 16px; }
  .search-box-inner { gap: 8px; }
  .search-input-wrap { padding: 12px 14px; gap: 8px; border-radius: 12px; }
  .search-input { font-size: 16px; min-width: 0; }
  .search-icon { width: 20px; height: 20px; }
  .search-button { padding: 12px 14px; font-size: 13px; letter-spacing: 0; border-radius: 12px; }
}

@media (max-width: 480px) {
  .search-box-monkey-group,
  .search-box-monkey-hands { top: -50px; }

  /* Keep the playful SVG frame on portrait mobile too — it scales via
     preserveAspectRatio="none". The standalone "SEARCH" button gets dropped
     because it overflows the narrow frame; users can press Enter to search. */
  .search-box-frame { padding: 26px 16px; }

  .search-box-inner { gap: 0; }

  .search-input-wrap { border-radius: 10px; width: 100%; }

  .search-button { display: none; }

  .search-dropdown-item { padding: 12px 14px; gap: 6px; }
  .search-dropdown-body { gap: 10px; flex-wrap: nowrap; }
  .search-dropdown-meta { width: 100%; min-width: 0; }
  .search-dropdown-icon { width: 28px; height: 28px; }
  .search-dropdown-name { font-size: 15px; line-height: 18px; }
  .search-dropdown-desc {
    font-size: 13px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .search-dropdown-badges { gap: 6px; flex-wrap: nowrap; overflow: hidden; }
  .search-dropdown-badge { font-size: 12px; padding: 2px 8px; }
  .search-dropdown-badge-publisher { display: none; }
}

/* Live search dropdown */
.search-dropdown {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}

.search-dropdown-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.search-dropdown-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  line-height: 20px;
}

.search-dropdown-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.search-dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.search-dropdown-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.search-dropdown-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #334155;
  line-height: 20px;
}

.search-dropdown-badges {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.search-dropdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #f5f5f4;
  border: 1px solid #d6d3d1;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1c1917;
  line-height: 20px;
  white-space: nowrap;
}
/* Per-category label on a search result - tinted with the category's own colour
   (set inline, matching the catalog page category chips). */
.search-dropdown-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 100px;
  border: 1px solid rgba(0,0,0,.08);
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
  color: #1c1917; line-height: 20px; white-space: nowrap;
}
/* Ecosystem label on a search result (Claude / Copilot / Claude Code) - reuses
   the card eco-badge tints but matches the dropdown badges' pill sizing, so a
   user can tell an add-on is ecosystem-specific before opening its page.
   Ecosystem-agnostic add-ons carry no badge (same rule as the catalog cards). */
.search-dropdown-badges .eco-badge {
  padding: 4px 12px 4px 9px; border-radius: 100px;
  font-size: 14px; font-weight: 500; line-height: 20px;
}
.search-dropdown-badges .eco-badge-logo { width: 16px; height: 16px; }

.search-dropdown-badge-icon {
  width: 16px;
  height: 16px;
}

.search-dropdown-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Amber tint to match the Medium severity color elsewhere on the site. */
.search-dropdown-badge-private {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #854D0E;
}

.search-dropdown-badge-star {
  width: 12px;
  height: 12px;
}

.search-dropdown-empty {
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #78716c;
  text-align: center;
}

/* Pagination (shared with search results page) */
.search-dropdown .pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.search-dropdown .page-btn {
  min-width: 36px;
  height: 36px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}

.search-dropdown .page-btn:hover:not(:disabled) {
  background: #fdf2d4;
  transform: translateY(-1px);
}

.search-dropdown .page-btn.active {
  background: #000;
  color: #fff;
}

.search-dropdown .page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.search-dropdown .page-nav {
  padding: 4px 10px;
}

.search-dropdown .page-ellipsis {
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  color: #000;
}

/* Decorative floating elements around search - Figma layout */
.search-deco {
  position: absolute;
  inset: -50px -150px;
  pointer-events: none;
  z-index: 0;
}

.deco {
  position: absolute;
}

/* 4-point diamond - upper left */
.deco-diamond-ul { top: 6%; left: 5%; }
/* Small filled circle - left mid */
.deco-filled-circle-l { top: 40%; left: 16%; }
/* Curved star - left lower */
.deco-curved-star-l { top: 65%; left: 2%; }
/* 4-point star - far bottom-left */
.deco-star-fl { top: 88%; left: 10%; }
/* Small open circle - mid left */
.deco-circle-ml { top: 8%; left: 9%; }
/* Curved star - upper right */
.deco-curved-star-r { top: 8%; right: 3%; }
/* 4-point star - far right */
.deco-star-r { top: 60%; right: -2%; }
/* Medium open circle - lower right */
.deco-circle-br { top: 85%; right: 8%; }


/* ===== components/StatsBar.css ===== */
.stats-display {
  position: relative;
  width: 100%;
  aspect-ratio: 1097 / 172;
}

.stats-deco-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Card region inside SVG (1097x172 coords): cards span y=34.5 to y=167.5
   top:    34.5/172 = 20.06%
   bottom: (172-167.5)/172 = 2.6%
   left/right padding from SVG card x positions (30 and 1071) */
.stats-cards {
  position: absolute;
  top: 20.06%;
  bottom: 2.6%;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
  padding: 0 2.73%;
  gap: 9.9%;
}

.stats-card {
  flex: 1;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 8px;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.stats-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.stats-card-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #000;
}

.stats-card-link:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #000;
}

.stats-card-label {
  align-self: flex-start;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1.35vw, 16px);
  color: #1c1917;
  line-height: 1.3;
  padding: 5px 0;
}

.stats-card-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 42px);
  color: #1c1917;
  line-height: 1;
  letter-spacing: -0.01em;
}

.stats-card-badge {
  align-self: flex-start;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.2vw, 14px);
  padding: 0 10px 0 6px;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
  height: 28px;
}

.stats-card-badge svg {
  flex: none;
  width: 16px;
  height: 16px;
  display: block;
}

.stats-card-badge-safe {
  background: #ECFDF5;
  color: #065f46;
}

.stats-card-badge-risk {
  background: #FEE2E2;
  color: #991b1b;
}

@media (max-width: 900px) {
  .stats-display { display: none; }
}

/* ===== components/HighRiskGrid.css ===== */
.high-risk-section {
  width: 100%;
  max-width: 996px;
  margin: 128px auto 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.high-risk-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  color: #000;
  text-transform: capitalize;
  margin: 0;
  text-align: center;
}

.high-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 18px;
  width: 100%;
}

.hr-card {
  position: relative;
  background: #fff;
  border: 1px solid #000;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  box-shadow: 6px 6px 0 0 #000;
  transition: transform 0.12s, box-shadow 0.12s;
  height: 100%;
  overflow: hidden;
}


.hr-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 0 #000;
}

.hr-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hr-card-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.hr-card-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* wrap long tool names to two lines instead of truncating mid-title, and
     always reserve two lines of height so the description below starts at the
     same vertical spot whether the title is one or two lines */
  white-space: normal;
  min-height: 2.2em; /* 2 lines @ line-height 1.1 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hr-badge-critical {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: #dc2626;
  white-space: nowrap;
}

.hr-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hr-card-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #111013;
  margin: 0;
  letter-spacing: 0.14px;
  /* Clamp description so cards in the same row stay identical regardless
     of how long the underlying text is. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-card-pub {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #111013;
  margin: 0;
}

.hr-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  overflow: hidden;
}

.hr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: #f5f5f4;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #1c1917;
}

.hr-badge-icon { width: 14px; height: 14px; }
.hr-badge-star { width: 12px; height: 12px; }

/* Ecosystem badge - which agent a Market-Space add-on plugs into. */
.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 6px;
  background: #fff3ed;
  border: 1px solid #ffd9c7;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #c2410c;
  white-space: nowrap;
}
.eco-badge-logo { width: 14px; height: 14px; border-radius: 3px; flex: none; }
/* Copilot variant - blue tint (Claude keeps the default orange). */
.eco-badge-copilot { background: #eaf2ff; border-color: #cfe0fb; color: #1f5fbf; }

/* Category (topic) tag for browsing the Market-Space. */
.cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: #f3f0ff;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #1c1917;
  white-space: nowrap;
}

/* Email gate popup - shown after a few add-on views (see email-gate.js).
   "Connect to Plutonium's Brain" subscription modal (Figma 1135:29546): pink
   card with the astronaut-monkey illustration, Unbounded title, and an inline
   Email Address + GET API ACCESS row. Dismissed via the X / backdrop / Esc. */
.email-gate-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
.email-gate-modal {
  position: relative; box-sizing: border-box;
  width: 100%; max-width: 600px; padding: 36px 32px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  background: #ffb89f; border: 1px solid #000; border-radius: 42px; box-shadow: 8px 8px 0 #000;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.email-gate-close {
  position: absolute; top: 20px; right: 22px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px; color: #000; cursor: pointer;
  transition: background .15s;
}
.email-gate-close:hover { background: rgba(0,0,0,.08); }
.email-gate-close svg { width: 22px; height: 22px; }
.email-gate-art { display: block; width: min(300px, 100%); max-height: 30vh; height: auto; object-fit: contain; }
.email-gate-title {
  margin: 0; font-family: 'Unbounded', 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.4; color: #000;
}
.email-gate-desc {
  margin: 0; font-family: 'Poppins', sans-serif; font-weight: 400;
  font-size: clamp(14px, 1.6vw, 16.5px); line-height: 1.6; color: #000; max-width: 520px;
}
.email-gate-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 638px; }
.email-gate-row { display: flex; gap: 16px; width: 100%; }
.email-gate-input {
  flex: 1; min-width: 0; box-sizing: border-box; height: 50px; padding: 10px 24px;
  border: 1px solid #000; border-radius: 100px; background: #fff;
  font-family: 'Poppins', sans-serif; font-size: 15px; color: #1c1917; outline: none;
}
.email-gate-input::placeholder { color: rgba(0,0,0,0.3); }
.email-gate-input:focus { box-shadow: 3px 3px 0 #000; }
.email-gate-error { font-family: 'Poppins', sans-serif; font-size: 13px; color: #991b1b; }
.email-gate-btn {
  flex: none; height: 50px; padding: 14px 26px; background: #000; color: #fff; border: 1px solid #000;
  border-radius: 100px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 1.6px; text-transform: uppercase; line-height: 1;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.email-gate-btn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #4b5563; }
.email-gate-btn:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 640px) {
  .email-gate-modal { padding: 36px 22px 34px; gap: 18px; border-radius: 28px; }
  .email-gate-close { top: 14px; right: 14px; }
  .email-gate-row { flex-direction: column; gap: 12px; }
  .email-gate-btn { width: 100%; }
  .email-gate-art { max-height: 30vh; }
}

/* "What makes an Add-on SAFE" - Market-Space vetting promise. Heading + hand are
   the exact design SVGs; the checklist is native CSS so text/borders stay crisp.
   overflow:hidden lets the pointing hand be cut by the page's left edge. */
.band-safe { position: relative; overflow: hidden; }
.band-safe .inner { max-width: 1300px; padding: 44px 44px 64px; }
.mkt-safe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mkt-safe-title { display: block; width: min(460px, 78%); height: auto; position: relative; z-index: 2; }
.mkt-safe-list { display: block; width: min(980px, 100%); height: auto; }
/* The pointing hand's arm runs off the page's top-left edge (clipped by the
   band's overflow), with the finger gesturing down toward the first list item.
   Anchored to the page CENTER (like the centered checklist card) rather than
   the left edge, so the fingertip always lands in the card's left padding and
   never covers the checklist text at any viewport width. */
.mkt-safe-hand {
  position: absolute; z-index: 4; pointer-events: none;
  width: 680px; height: auto; left: calc(50% - 1026px); top: -130px;
}
@media (max-width: 1024px) { .mkt-safe-hand { display: none; } }
@media (max-width: 620px) {
  .band-safe .inner { padding: 28px 16px 48px; }
  .mkt-safe-title { width: 86%; }
  .mkt-safe-list { padding: 26px 22px; gap: 16px; }
  .mkt-safe-check { width: 32px; height: 32px; }
}


.hr-card-cta {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

.hr-card-cta-arrow {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 900px) {
  .high-risk-section { margin-top: 56px; }
  .high-risk-grid { grid-template-columns: 1fr; gap: 14px; }
  .high-risk-title { font-size: 20px; line-height: 28px; }
  .hr-card { box-shadow: 4px 4px 0 0 #000; }
  .hr-card:hover { box-shadow: 5px 5px 0 0 #000; }
}

/* ===== components/NewsGrid.css ===== */
.news-section {
  width: 100%;
  max-width: 996px;
  margin: 128px auto 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.news-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  color: #000;
  text-transform: capitalize;
  margin: 0;
  text-align: center;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #000;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 6px 6px 0 0 #000;
  transition: transform 0.12s, box-shadow 0.12s;
}

.news-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 0 #000;
}

.news-illustration {
  position: relative;
  height: 149px;
  overflow: hidden;
  padding-top: 16px;
  background:
    radial-gradient(circle at 70% 60%, #fff2a8 0 16%, transparent 17%),
    repeating-linear-gradient(115deg, #ffb703 0 22px, #fb8500 22px 44px, #fd9e02 44px 66px);
}

.news-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.news-tag {
  position: relative;
  z-index: 1;
}

.news-tag {
  display: inline-block;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #111013;
  padding: 8px 22px;
  border-radius: 0 100px 100px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 0;
}

.news-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #111013;
  letter-spacing: 0.12px;
}

.news-meta-sep { opacity: 0.6; }

.news-headline {
  font-family: 'Unbounded', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #111013;
  margin: 0;
}

.news-summary {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #111013;
  margin: 0;
  letter-spacing: 0.12px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.news-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  line-height: 15px;
  color: #111013;
  letter-spacing: -0.45px;
}

.news-source-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fb8500, #ffb703);
  display: inline-block;
}

.news-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  color: #111013;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .news-section { margin-top: 56px; }
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
  .news-title { font-size: 20px; line-height: 28px; }
  .news-card { box-shadow: 4px 4px 0 0 #000; border-radius: 16px; }
  .news-card:hover { box-shadow: 5px 5px 0 0 #000; }
  .news-body { padding: 20px; gap: 12px; }
  .news-illustration { height: 120px; }
  .news-card:nth-child(n+4) { display: none; }
}

/* ===== components/ConnectorCard.css ===== */
.connector-card {
  appearance: none;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 12.28px;
  box-shadow: 3px 3px 0 #10143A;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 177px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.connector-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #10143A;
}

.connector-card:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #10143A;
}

.connector-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.connector-card-icon {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 4px;
  object-fit: contain;
}

.connector-card-name {
  flex: 1;
  min-width: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: #000000;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}

.risk-pill svg {
  flex: none;
  display: block;
}

.risk-pill-high {
  background: #FEE2E2;
  color: #DC2626;
}

.risk-pill-safe {
  background: #ECFDF5;
  color: #39BF97;
}

.connector-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.connector-card-desc {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.14px;
  color: #111013;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.connector-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  overflow: hidden;
}

.connector-card-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  background: #F5F5F4;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #1C1917;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connector-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: #000000;
}

.connector-card-cta-diamond {
  display: inline-block;
  width: 5px;
  height: 5px;
  border: 1.23px solid #000000;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
}

/* ===== components/RiskBadge.css ===== */
.risk-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: capitalize;
}

.risk-badge-sm {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.2px;
}

.risk-badge-md {
  padding: 4px 12px;
  font-size: 13px;
  line-height: 18px;
}

/* ===== components/Subscribe.css ===== */
.subscribe-wrap {
  margin: 128px auto 40px;
  padding: 0 44px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.subscribe-card {
  position: relative;
  background: #fdf2d4;
  border: 1px solid #000;
  border-radius: 29px;
  padding: 52px 62px;
  display: flex;
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  box-shadow: 8px 8px 0 0 #000;
}

.subscribe-copy {
  flex: 1;
  min-width: 0;
}

.subscribe-heading {
  font-family: 'Unbounded', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 38px;
  color: #111013;
  margin: 0;
}

/* Supporting line under the contact-Pluto heading (API access / environment
   visibility pitch). */
.subscribe-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.6;
  color: #1c1917;
  margin: 14px 0 0;
  max-width: 560px;
}

.subscribe-star {
  display: inline-block;
  color: #f59e0b;
  font-size: 26px;
  margin: 0 4px;
  transform: translateY(-2px);
}

.subscribe-claude-logo {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 4px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 512px;
}

.subscribe-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #111013;
}

.subscribe-input {
  height: 56px;
  padding: 12px 28px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #000;
  outline: none;
}

.subscribe-input::placeholder {
  color: #a8a29e;
}

.subscribe-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Contact-Pluto button: black pill carrying the yellow Pluto logo (same
   two-layer lozenge as the header's "Powered by Pluto"), with the site's
   hard-shadow hover lift. The text lives in .subscribe-btn-label so the JS
   state changes (Sending… / Request sent) never wipe the logo. */
.subscribe-btn {
  height: 56px;
  background: #000;
  color: #fff;
  border: 1.5px solid #000;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.subscribe-btn .pluto-logo-wrap { width: 88px; height: 27px; flex: none; }

.subscribe-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.32);
}
.subscribe-btn:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
}

.subscribe-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.subscribe-error {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #b91c1c;
}

.subscribe-sparkle {
  position: absolute;
  top: 22px;
  right: 28px;
  font-size: 28px;
  color: #111013;
  transform: rotate(12deg);
}

/* Two curved 4-point stars peeking from behind the card's left edge.
   z-index: -1 puts them behind the card's own background so only the
   portion extending past the card's left edge is visible. */
.subscribe-deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* SVG 1 (89x89) naturally has corner points (× shape).
   SVG 2 (124x124) naturally has axis points (+ shape).
   Leave both unrotated and center them on the same point so they
   interlock into an 8-point star with half visible behind the card.
   Each shape is offset by its own half-size so the centers match. */
.subscribe-deco-1 {
  left: -44.5px;
  top: 95.5px;
}

.subscribe-deco-2 {
  left: -62px;
  top: 78px;
}

@media (max-width: 900px) {
  .subscribe-wrap { padding: 0 16px; margin: 56px auto 32px; }
  .subscribe-card {
    flex-direction: column;
    padding: 32px 24px;
    gap: 24px;
  }
  .subscribe-heading { font-size: 20px; line-height: 30px; }
  .subscribe-sparkle { top: 14px; right: 16px; font-size: 22px; }
}

@media (max-width: 480px) {
  .subscribe-wrap { padding: 0 12px; }
  .subscribe-card { padding: 28px 20px; border-radius: 22px; }
  .subscribe-heading { font-size: 18px; line-height: 26px; }
  .subscribe-input { height: 48px; font-size: 16px; }
  .subscribe-btn { height: 48px; font-size: 14px; }
}

/* ===== components/BookDemoCta.css ===== */
/* "New era" planet CTA at the foot of the homepage (Figma 1615:854, Footer
   update - June 2026). The planet art is the pluto.security footer background
   (transparent sky, so the page tint shows through); flag and monkey are static
   SVG exports of the same design. The planet's #ffff78 flows straight into the
   yellow site footer below it, so the footer sits "on" the planet. */
.band-cta {
  margin-top: 72px;
  background-image: url(img/cta-planet.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
.home-page .site-footer { border-top: none; }

.cta-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: min(37.5vw, 540px);
  padding-bottom: min(5vw, 73px);
}

.cta-flag {
  position: absolute;
  left: 16.5%;
  top: 4%;
  width: clamp(120px, 20.5vw, 296px);
  pointer-events: none;
}

/* Lying on the button pill: its lower half overlaps the button, per the design */
.cta-monkey {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28%;
  width: clamp(200px, 29.8vw, 430px);
  z-index: 6;
  pointer-events: none;
}

.cta-demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(535px, 74vw);
  height: clamp(56px, 7.5vw, 108px);
  border-radius: 178px;
  background: #000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 32px);
  letter-spacing: clamp(1.5px, 0.21vw, 3px);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 0 0 transparent;
  transition: transform .2s cubic-bezier(.5,2.5,.7,.7), box-shadow .2s cubic-bezier(.5,2.5,.7,.7), background-color .15s ease-in-out;
}

.cta-demo-btn:hover, .cta-demo-btn:focus {
  background: #39bf97;
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 4px 0 0 #000;
}

@media (max-width: 700px) {
  .band-cta {
    margin-top: 48px;
    background-image: url(img/cta-planet-m.svg);
  }
  .cta-content { height: min(96vw, 430px); padding-bottom: 40px; }
  .cta-flag { left: 8%; top: 6%; width: 30vw; }
  .cta-monkey { bottom: 20%; width: clamp(150px, 44vw, 245px); }
  .cta-demo-btn {
    width: min(300px, 72vw);
    height: 52px;
    font-size: 14px;
    letter-spacing: 1.2px;
  }
}

/* ===== components/SecurityGuides.css ===== */
.guides-wrap {
  margin: 88px auto 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.guides-hex {
  width: 100%;
  max-width: 1040px;
  padding: 48px 80px 52px;
  /* The Security Guides live inside a cream "label" panel with a black border
     and large rounded corners (matches the figma + claudesec/copilot sites). */
  background: #FFF1E4;
  border: 1.6px solid #000;
  border-radius: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
}

/* superseded by the CSS panel above */
.guides-hex-bg { display: none; }

.guides-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  color: #000;
  margin: 0;
  text-transform: capitalize;
  text-align: center;
}

.guides-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #1c1917;
  margin: -12px 0 0;
  text-align: center;
}

.guides-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 760px;
  margin-top: 16px;
}

.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
  white-space: nowrap;
  text-transform: capitalize;
}

.guide-chip:hover {
  background: #fdf2d4;
  transform: translateY(-1px);
}

.guide-chip-coming-soon {
  position: relative;
  cursor: not-allowed;
}

.guide-chip-coming-soon > .guide-chip-icon,
.guide-chip-coming-soon > span:not(.guide-chip-tooltip) {
  opacity: 0.5;
}

.guide-chip-coming-soon:hover {
  background: #fff;
  transform: none;
}

.guide-chip-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}

.guide-chip-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111;
}

.guide-chip-coming-soon:hover .guide-chip-tooltip {
  opacity: 1;
}

.guide-chip-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .guides-wrap { margin-top: 56px; padding: 0 16px; }
  .guides-title { font-size: 20px; line-height: 28px; }
  .guides-subtitle { font-size: 14px; }
  .guide-chip { padding: 10px 16px; font-size: 13px; }
}

@media (max-width: 700px) {
  /* Replace the fixed-aspect SVG hex with a CSS rounded background that
     grows with the chip stack. The decorative SVG can't expand vertically
     enough on narrow viewports, so chips were sticking out of the bottom
     and sides of the rendered shape. */
  .guides-hex {
    padding: 24px 18px;
    background: #FFF1E4;
    border: 1.5px solid #000;
    border-radius: 28px;
  }
  .guides-hex-bg { display: none; }

  /* Allow chip labels to wrap inside the container on phones — long
     titles like "Claude Managed Agents - Technical Deepdive" need to
     break onto a second line. */
  .guide-chip {
    padding: 8px 14px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
  }
  .guides-chips {
    max-width: 100%;
    width: 100%;
  }
  /* The deterministic row-break we use on desktop forces an awkward
     near-empty row on phones; let chips reflow naturally instead. */
  .guides-row-break { display: none; }
}



/* ===== Figma-exact overrides (must follow component CSS) ===== */
/* header full-bleed */
.header-outer { padding: 0 50px; }
.site-footer { padding: 28px 60px; }

/* roomier high-risk / browse cards per Figma (radius 20, more padding) */
.hr-card { border-radius: 20px; padding: 20px; box-shadow: 6px 6px 0 0 #000; gap: 12px; height: 100%; }
.hr-card:hover { box-shadow: 8px 8px 0 0 #000; }
.hr-card-icon { width: 22px; height: 22px; }
.hr-card-name { font-size: 15px; }
.hr-badge { padding: 4px 10px; font-size: 12px; }
.hr-badge-icon { width: 14px; height: 14px; }
.hr-card-cta { font-size: 12px; }

/* high-risk grid: roomier on homepage */
.high-risk-grid { grid-template-rows: none; grid-auto-rows: minmax(248px, auto); max-width: 1100px; }
.high-risk-section, .news-section { max-width: 1100px; }

/* search pill full width inside hero search (no SEARCH button) */
.hero-search .search-input-wrap { padding: 16px 24px; }

/* subscribe card cream + on its band */
.subscribe-wrap { margin: 0 auto; padding: 0; }
.subscribe-card { background: #fdf2d4; max-width: 1100px; }
.theme-home .subscribe-card { background: #dce6de; }

/* ----- CookieHub consent banner, themed to match the app -----
   CookieHub v2 renders in-page (.ch2-* classes), so these overrides apply
   directly: white card, 1.5px black border + hard offset shadow, Poppins, and
   the app's pill buttons (black primary / white-bordered secondary). */
.ch2-dialog, .ch2-settings {
  font-family: 'Poppins', sans-serif !important;
  background: #fff !important;
  color: #1c1917 !important;
  border: 1.5px solid #000 !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.14) !important;
}
.ch2-dialog *, .ch2-settings * { font-family: 'Poppins', sans-serif !important; }
.ch2-dialog-title, .ch2-settings-title { font-weight: 700 !important; color: #000 !important; }
.ch2-dialog a, .ch2-settings a { color: #1f7a3d !important; }

/* buttons: app pill style (black border + hard shadow, Poppins) */
.ch2-btn {
  font-weight: 700 !important;
  border: 1.5px solid #000 !important;
  border-radius: 100px !important;
  box-shadow: 3px 3px 0 #000 !important;
  text-transform: none !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.ch2-btn:hover { transform: translate(-1px, -1px) !important; box-shadow: 4px 4px 0 #000 !important; }
/* "Allow all" = black pill; settings / deny / save = white pill */
.ch2-btn-primary, .ch2-allow-all-btn { background: #000 !important; color: #fff !important; }
.ch2-btn-secondary, .ch2-deny-all-btn, .ch2-save-settings-btn,
.ch2-open-settings-btn { background: #fff !important; color: #000 !important; }

/* per-category toggles use the app green when on */
.ch2-switch input:checked + .ch2-slider, .ch2-slider.ch2-active { background: #2EAD87 !important; }

/* floating "reopen settings" icon */
.ch2-icon {
  background: #fff !important; color: #000 !important;
  border: 1.5px solid #000 !important; border-radius: 50% !important;
  box-shadow: 3px 3px 0 #000 !important;
}

/* ---- idle float for the arc planets ---------------------------------------
   A gentle, staggered bob so the planets read as alive and clickable. The bob
   animates the BUTTON's transform (the hover lift/scale lives on the inner img,
   so the two never fight), and pauses while a planet is flying to the lead slot
   (that flight animates left/top on the same element). */
@keyframes orb-bob {
  from { transform: translateY(-5px); }
  to   { transform: translateY(4px); }
}
/* only the LIVE planets float (Claude / Copilot / Market-Space); the
   coming-soon ones stay still. */
.orbit-planet.orb-live { animation: orb-bob 4.4s ease-in-out infinite alternate; }
.orbit-planet.orb-live:nth-of-type(2) { animation-duration: 5.0s; animation-delay: -1.5s; }
.orbit-planet.orb-live:nth-of-type(5) { animation-duration: 5.4s; animation-delay: -3.3s; }
.orbit-planet.to-slot { animation: none; }
@media (prefers-reduced-motion: reduce) { .orbit-planet { animation: none; } }

/* In ecosystem views the planets glide back to the original compact arc at the
   top (out of the content's way - keeps the compressed Market-Space hero and
   the Explore layouts intact); the big centered arch is a HOME-only stage.
   Inline positions come from JS, so these need !important; the planet flying
   to the lead slot (.to-slot) is exempt. */
.orbit-planet { transition: left .8s cubic-bezier(.3,1.15,.45,1), top .8s cubic-bezier(.3,1.15,.45,1), width .8s cubic-bezier(.3,1.15,.45,1); }
@media (min-width: 761px) {
  .home-page.eco .orbit-planet:not(.to-slot)[data-key="claudesec"]   { left: 44.1% !important; top: 18px !important; width: 130px !important; }
  .home-page.eco .orbit-planet:not(.to-slot)[data-key="copilotsec"]  { left: 54% !important;   top: 25px !important; width: 145px !important; }
  .home-page.eco .orbit-planet:not(.to-slot)[data-key="gemini"]      { left: 64.5% !important; top: 24px !important; width: 142px !important; }
  .home-page.eco .orbit-planet:not(.to-slot)[data-key="codex"]       { left: 75.3% !important; top: 18px !important; width: 130px !important; }
  .home-page.eco .orbit-planet:not(.to-slot)[data-key="marketplace"] { left: 84.5% !important; top: 12px !important; width: 180px !important; }
}
.home-page.eco .lead { margin-top: 40px; }


/* ---- mobile fixes (the desktop-only rules above must not leak down) ------- */
@media (max-width: 760px) {
  /* eco views use the phone title spacing too (the 112px rule is desktop-only) */
  .home-page.eco .welcome { margin-top: 18px; }
  /* tighter subtitle so the three sentences wrap less awkwardly */
  .sub { font-size: 13.5px; max-width: 340px; }
}