/* ==========================================================================
   Pacod enhancement layer
   Loaded after styles.css on every page. Adds ambient light, scroll reveals,
   pointer feedback and a footer close. Nothing here hides content unless
   enhance.js has run and the element sits below the fold; everything that
   travels sits behind prefers-reduced-motion: no-preference.
   ========================================================================== */

:root {
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --e-glow-light: rgba(75, 224, 103, 0.16);
  --e-glow-dark: rgba(255, 255, 255, 0.12);
}

/* Scroll progress --------------------------------------------------------- */

.e-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(90deg, var(--green-500), var(--dot) 60%, var(--lime));
  transform-origin: 0 50%;
  transform: scaleX(var(--e-p, 0));
}
@supports (animation-timeline: scroll()) {
  .e-progress { animation: e-progress linear both; animation-timeline: scroll(root); }
}
@keyframes e-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Page heroes: aurora and a field of dots --------------------------------- */

.hero--page { position: relative; isolation: isolate; overflow: clip; }
.hero--page .container { position: relative; z-index: 1; }

.e-aurora {
  position: absolute;
  inset: -20% -10% -10%;
  z-index: 0;
  pointer-events: none;
}
.e-aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.e-aurora i:nth-child(1) {
  width: 46vw; height: 30vw; left: 6%; top: 22%;
  background: radial-gradient(closest-side, rgba(75, 224, 103, 0.55), transparent);
}
.e-aurora i:nth-child(2) {
  width: 40vw; height: 28vw; right: 4%; top: 8%;
  background: radial-gradient(closest-side, rgba(71, 103, 192, 0.32), transparent);
}
.e-aurora i:nth-child(3) {
  width: 34vw; height: 22vw; left: 38%; top: 48%;
  background: radial-gradient(closest-side, rgba(223, 211, 189, 0.7), transparent);
}
/* The pointer's own light, which trails the cursor across the hero. */
.e-aurora b {
  position: absolute;
  left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(75, 224, 103, 0.22), transparent 70%);
  opacity: 0;
  transform: translate3d(var(--ax, 50vw), var(--ay, 30vh), 0);
  transition: opacity 0.6s ease;
}
.hero--page.e-hover .e-aurora b { opacity: 1; }

.e-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(20, 85, 48, 0.22) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 10%, transparent 75%);
  opacity: 0.55;
}
.hero--page.legal .e-aurora i { opacity: 0.3; }
.hero--page.legal .e-dots { opacity: 0.3; }

/* The page's first shot sits on the aurora's edge, so the light runs into it. */
.section--shot { position: relative; }
.section--shot::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: -8%; height: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(75, 224, 103, 0.18), transparent 70%);
  filter: blur(20px);
}

@media (prefers-reduced-motion: no-preference) {
  .e-aurora i:nth-child(1) { animation: e-drift-a 18s var(--e-inout) infinite alternate; }
  .e-aurora i:nth-child(2) { animation: e-drift-b 22s var(--e-inout) infinite alternate; }
  .e-aurora i:nth-child(3) { animation: e-drift-c 26s var(--e-inout) infinite alternate; }
  .e-dots { animation: e-dots-in 1.6s var(--e-expo) both; }
}
@keyframes e-drift-a { to { transform: translate3d(12vw, 4vw, 0) scale(1.15); } }
@keyframes e-drift-b { to { transform: translate3d(-10vw, 6vw, 0) scale(0.9); } }
@keyframes e-drift-c { to { transform: translate3d(-6vw, -5vw, 0) scale(1.2); } }
@keyframes e-dots-in { from { opacity: 0; transform: scale(1.06); } }

/* Section fields: a little colour where a section was flat white ---------- */

.section:has(> .container > .compare),
.section:has(.compare) { position: relative; isolation: isolate; }
.section:has(.compare)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 11, 0.07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 55%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 55%, #000, transparent 75%);
}

.section:has(.steps),
.section:has(.stats),
.section:has(.feature-grid) { position: relative; isolation: isolate; }

.section:has(.steps)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 100%, rgba(75, 224, 103, 0.12), transparent 70%),
    radial-gradient(50% 45% at 90% 10%, rgba(71, 103, 192, 0.08), transparent 70%),
    linear-gradient(to bottom, transparent, var(--surface) 85%, transparent);
}

.section:has(.stats)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 70% at 50% 50%, rgba(126, 217, 87, 0.13), transparent 70%);
}

.section:has(.feature-grid)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(45% 60% at 100% 30%, rgba(223, 211, 189, 0.38), transparent 70%);
}

/* Rules: a light runs along the hairline once the section arrives --------- */

.section.rule { position: relative; }
.e-streak {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
}
.e-streak::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dot), transparent);
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .e-streak.e-run::before { animation: e-streak 2.2s var(--e-inout) both; }
}
@keyframes e-streak {
  0% { transform: translate3d(-100%, 0, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(340%, 0, 0); opacity: 0; }
}

/* Entrances --------------------------------------------------------------- */

/* Headings: each word rises out of its own line mask. */
.e-words .ew {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.2em;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.e-words .ew > span { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .e-words.e-wait .ew > span { transform: translate3d(0, 105%, 0); }
  .e-words.e-in .ew > span {
    animation: e-word 0.9s var(--e-expo) var(--ed, 0ms) backwards;
    transform: none;
  }

  .e-wait:not(.e-words) { opacity: 0; }
  .e-in:not(.e-words) { animation: e-rise 0.85s var(--e-expo) var(--ed, 0ms) backwards; }
  .e-in.e-from-left { animation-name: e-from-left; }
  .e-in.e-pop { animation-name: e-pop; }
  .e-in.e-focus { animation-name: e-focus; animation-duration: 1s; }
  .e-in.e-open { animation: e-open 1.2s var(--e-expo) var(--ed, 0ms) backwards; }
}

@keyframes e-word { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes e-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes e-from-left { from { opacity: 0; transform: translate3d(-24px, 0, 0); } }
@keyframes e-pop { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.96); } }
@keyframes e-focus { from { opacity: 0; filter: blur(8px); transform: translate3d(0, 12px, 0); } }
@keyframes e-open {
  from { opacity: 0.2; clip-path: inset(18% 8% 18% 8% round 24px); transform: scale(1.04); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 0); transform: none; }
}

/* Cards: a light that follows the pointer, and a small lift --------------- */

.e-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), var(--e-glow-light), transparent 65%);
  transition: opacity 0.35s ease;
  mix-blend-mode: multiply;
}
.e-glow--dark {
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), var(--e-glow-dark), transparent 65%);
  mix-blend-mode: screen;
}
/* A rim of light where the pointer meets the card's edge. */
.e-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(46, 139, 87, 0.55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.e-glow--dark::after {
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.45), transparent 70%);
}

@media (hover: hover) and (pointer: fine) {
  .e-lift:hover > .e-glow,
  .e-lift:focus-within > .e-glow { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .e-lift { transition: translate 0.35s var(--e-out), box-shadow 0.35s var(--e-out); }
    .e-lift:hover { translate: 0 -4px; box-shadow: 0 18px 40px -24px rgba(11, 42, 26, 0.35); }
  }
}

/* Showcase panels: a slow light across the panel, and a tilt to the pointer */

.showcase .e-sheen {
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent 70%);
  width: 70%;
  height: 70%;
  mix-blend-mode: soft-light;
}
.showcase--sand .e-sheen { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent 70%); mix-blend-mode: normal; }
.showcase > img,
.showcase .showcase-img { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .showcase .e-sheen { animation: e-sheen 16s var(--e-inout) infinite alternate; }
  .e-tilt { transition: transform 0.6s var(--e-out); will-change: transform; }
}
@keyframes e-sheen {
  0% { transform: translate3d(0, 10%, 0); }
  50% { transform: translate3d(90%, 40%, 0); }
  100% { transform: translate3d(40%, 90%, 0); }
}

/* CTA band: a sweep of light every few seconds --------------------------- */

.cta-band .e-sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.cta-band .e-sweep::before {
  content: "";
  position: absolute;
  top: -50%; bottom: -50%;
  left: 0;
  width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.05) 55%, transparent);
  transform: translate3d(-150%, 0, 0) skewX(-18deg);
}
.cta-band > *:not(.e-sweep) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cta-band .e-sweep::before { animation: e-sweep 7s var(--e-inout) 1.5s infinite; }
}
@keyframes e-sweep {
  0% { transform: translate3d(-150%, 0, 0) skewX(-18deg); }
  45%, 100% { transform: translate3d(620%, 0, 0) skewX(-18deg); }
}

/* Buttons: a glint on hover for the dark action ------------------------- */

@media (hover: hover) and (pointer: fine) {
  .btn--dark { position: relative; overflow: hidden; isolation: isolate; }
  .btn--dark .e-glint {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(126, 217, 87, 0.45) 50%, transparent 70%);
    transform: translate3d(-120%, 0, 0);
  }
  @media (prefers-reduced-motion: no-preference) {
    .btn--dark:hover .e-glint { transform: translate3d(120%, 0, 0); transition: transform 0.75s var(--e-out); }
  }
}

/* Comparison tables: the Pacod column lit, its dots ringing in ---------- */

.compare td.with,
.compare th.with { position: relative; }
.compare td.with { background: linear-gradient(90deg, rgba(75, 224, 103, 0.07), transparent 85%); }
@media (prefers-reduced-motion: no-preference) {
  .compare tr.e-in td.with::before { animation: e-ring 1.1s var(--e-out) calc(var(--ed, 0ms) + 250ms) backwards; }
}
@keyframes e-ring {
  0% { box-shadow: 0 0 0 0 rgba(75, 224, 103, 0.6); transform: scale(0.4); }
  40% { transform: scale(1.15); }
  100% { box-shadow: 0 0 0 10px rgba(75, 224, 103, 0); transform: none; }
}

/* Steps: a bar fills along the top of each step, one after another ------ */

.step { position: relative; overflow: hidden; }
.step .e-bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--dot));
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.step.e-done .e-bar,
.step:not(.e-wait):not(.e-in) .e-bar { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .step.e-in .e-bar { animation: e-bar 0.9s var(--e-inout) calc(var(--ed, 0ms) + 300ms) both; }
}
@keyframes e-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.step-num {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--dot-halo);
  color: var(--green-700) !important;
  font-weight: 500;
}

/* Stats: a green tick grows under each figure --------------------------- */

.stat { position: relative; }
.stat .e-tick {
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--dot));
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .stat.e-in .e-tick { animation: e-bar 0.8s var(--e-out) calc(var(--ed, 0ms) + 350ms) both; }
}

/* Note covers open a touch wider under the pointer ---------------------- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cover .cover-title { transition: transform 0.5s var(--e-out); }
  .note-card:hover .cover .cover-title { transform: translate3d(0, -4px, 0); }
  .cover-mark::before { transition: box-shadow 0.4s ease; }
  .note-card:hover .cover-mark::before { box-shadow: 0 0 0 5px rgba(126, 217, 87, 0.25); }
}

/* Footer: the name returns at full width, lit where the pointer is ------- */

.e-footmark {
  position: relative;
  margin-top: clamp(32px, 5vw, 64px);
  color: var(--surface-2);
  line-height: 0;
  user-select: none;
}
.e-footmark svg { display: block; width: 100%; height: auto; }
.e-footmark .e-fm-lit {
  position: absolute;
  inset: 0;
  color: var(--green-500);
  -webkit-mask-image: radial-gradient(240px circle at var(--fx, -999px) var(--fy, -999px), #000 0%, transparent 70%);
  mask-image: radial-gradient(240px circle at var(--fx, -999px) var(--fy, -999px), #000 0%, transparent 70%);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 720px) {
    .e-footmark > svg:first-child {
      animation: e-foot linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}
@keyframes e-foot {
  from { opacity: 0; transform: translate3d(0, 40%, 0); }
  to { opacity: 1; transform: none; }
}

/* Reduced motion: keep colour and light, drop travel -------------------- */

@media (prefers-reduced-motion: reduce) {
  .e-progress { display: none; }
  .e-aurora b { display: none; }
}

/* ==========================================================================
   v3: rounded panels, a site-wide wash, the circular suite
   ========================================================================== */

/* Rounded corners on every panel ---------------------------------------- */

.showcase,
.showcase-wrap,
.news-media,
.report-sheet,
.article-cover { border-radius: var(--radius-lg); }
.showcase { overflow: hidden; }
.showcase .corner { display: none; }
.person-photo, .person-photo img { border-radius: var(--radius); }

/* A wash of colour behind the whole site --------------------------------- */

/* Three very faint pools of the brand's green, denim and sand, fixed to the screen,
   so every page sits on the same light. They drift over a minute; nobody should notice. */
html { background: var(--bg); }
body { background: transparent; }
body::before {
  content: "";
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42vmax 32vmax at 10% 8%, rgba(126, 217, 87, 0.075), transparent 70%),
    radial-gradient(40vmax 34vmax at 94% 42%, rgba(71, 103, 192, 0.05), transparent 70%),
    radial-gradient(46vmax 34vmax at 28% 96%, rgba(223, 211, 189, 0.22), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: e-wash 60s ease-in-out infinite alternate; }
}
@keyframes e-wash { to { transform: translate3d(4vmax, -3vmax, 0) rotate(4deg); } }

/* The circular suite in the menu ----------------------------------------- */

.dropdown--cs { width: 520px; left: 50%; translate: -50% 0; transform-origin: top center; }
.nav-link { white-space: nowrap; }
/* Six menus share the bar now, so they tighten up on smaller laptops. */
@media (max-width: 1239px) {
  .primary-nav .nav-link { padding: 0 8px; font-size: 0.86rem; }
}
@media (max-width: 1100px) {
  .primary-nav .nav-link { padding: 0 6px; font-size: 0.82rem; }
  .primary-nav .nav-link .icon { width: 14px; height: 14px; }
}
@media (max-width: 1055px) {
  .primary-nav .nav-link { padding: 0 5px; }
}
.dropdown--cs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.dropdown--cs li:first-child { grid-column: 1 / -1; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.dropdown--cs li:first-child .dd-icon { background: #151815; color: var(--on-dark); }
.dropdown--cs li:first-child .dd-icon .icon circle:first-child { fill: var(--dot); stroke: none; }
.dropdown .dd-icon--cs { background: var(--surface); }
.dropdown .dd-icon--cs .cs-mark { width: 22px; height: 22px; color: #151815; }
.dropdown .dd-t--cs { font-weight: 600; letter-spacing: -0.03em; font-size: 0.98rem; }

/* The ecosystem band ------------------------------------------------------ */

.cs-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 5vw, 72px);
  border-radius: 28px;
  background: #151815;
  color: var(--on-dark);
}
/* Light from the core, and the faint grid the suite's diagrams are drawn on. */
.cs-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 78% 50%, rgba(75, 224, 103, 0.16), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(75, 224, 103, 0.08), transparent 70%);
}
.cs-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 75% 50%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 55% 70% at 75% 50%, #000, transparent 80%);
}
@media (min-width: 1024px) {
  .cs-band:not(.cs-band--solo) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.cs-band--solo { padding-block: clamp(24px, 4vw, 48px); }
.cs-band--solo::before { background: radial-gradient(45% 60% at 50% 50%, rgba(75, 224, 103, 0.16), transparent 70%); }
.cs-band--solo::after { -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000, transparent 80%); }

.cs-band-text { display: grid; gap: 18px; align-content: start; }
.cs-band-text h2 { color: var(--on-dark); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.04; }
.cs-band-text .lead { color: #C9CDC6; max-width: 32em; }
.cs-band-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9375rem; color: #C9CDC6; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px rgba(75, 224, 103, 0.18); }
.cs-band-marks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 0; padding: 0; list-style: none; }
.cs-band-marks li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.04em; font-size: 1.125rem; }
.cs-band-marks .cs-mark { width: 22px; height: 22px; color: var(--on-dark); }
.cs-band-status { margin: 0; font-size: 0.875rem; color: #9DA29C; }
.cs-band .actions { margin-top: 8px; }

/* The diagram: one record in the middle, five tools around it. */
.eco {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-orbit { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.25; stroke-dasharray: 0.6 1.4; transform-box: fill-box; transform-origin: center; }
.eco-orbit--in { stroke: rgba(255, 255, 255, 0.08); stroke-dasharray: none; }
.eco-spoke { stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.35; stroke-linecap: round; transition: stroke 0.25s ease; }
.eco-spoke--next { stroke-dasharray: 1 1.2; stroke: rgba(255, 255, 255, 0.2); }
.eco-pulse { fill: var(--dot); opacity: 0; }
.eco-pulse--next { fill: #8FEC9C; }

.eco-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 28%;
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border-radius: 50%;
  background: #232723;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(75, 224, 103, 0.06), 0 0 60px rgba(75, 224, 103, 0.25);
  text-align: center;
}
.eco-core .eco-word { width: 62%; justify-self: center; color: var(--on-dark); }
.eco-core span { font-size: clamp(0.625rem, 0.5rem + 0.35vw, 0.75rem); color: #9DA29C; line-height: 1.2; padding-inline: 8px; }

.eco-node {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 30%;
  text-align: center;
  text-decoration: none;
  color: var(--on-dark);
  border-radius: 16px;
}
.eco-tile {
  display: grid;
  place-items: center;
  width: clamp(44px, 11vw, 64px);
  aspect-ratio: 1;
  border-radius: 18px;
  background: #232723;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s var(--e-out), box-shadow 0.3s ease, background-color 0.3s ease;
}
.eco-tile .cs-mark { width: 52%; height: 52%; color: var(--on-dark); }
.eco-node b { font-weight: 600; letter-spacing: -0.04em; font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem); line-height: 1.1; margin-top: 4px; }
.eco-node small { font-size: clamp(0.6875rem, 0.6rem + 0.3vw, 0.8125rem); color: #9DA29C; line-height: 1.25; }
.eco-node--next .eco-tile { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.eco-node:focus-visible { outline: 2px solid var(--dot); outline-offset: 4px; }

/* Pointing at a tool lights its line back to the record. */
.eco:has(.eco-node[data-tool="loop"]:is(:hover, :focus-visible)) .eco-spoke[data-for="loop"],
.eco:has(.eco-node[data-tool="renew"]:is(:hover, :focus-visible)) .eco-spoke[data-for="renew"],
.eco:has(.eco-node[data-tool="trace"]:is(:hover, :focus-visible)) .eco-spoke[data-for="trace"],
.eco:has(.eco-node[data-tool="collect"]:is(:hover, :focus-visible)) .eco-spoke[data-for="collect"],
.eco:has(.eco-node[data-tool="gauge"]:is(:hover, :focus-visible)) .eco-spoke[data-for="gauge"] { stroke: var(--dot); }
@media (hover: hover) and (pointer: fine) {
  .eco-node:hover .eco-tile { transform: translate3d(0, -4px, 0) scale(1.04); background: #2C312C; box-shadow: inset 0 0 0 1px rgba(75, 224, 103, 0.5), 0 12px 30px -12px rgba(75, 224, 103, 0.45); }
}

@media (prefers-reduced-motion: no-preference) {
  .eco-orbit:not(.eco-orbit--in) { animation: e-orbit 90s linear infinite; }
  /* A green dot leaves the record for each tool in turn: data flowing out. */
  .eco-pulse { animation: e-flow 3.6s var(--e-inout) calc(var(--i) * 0.72s) infinite; }
  .eco-core { animation: e-core 3.6s ease-in-out infinite; }
  .eco.e-wait .eco-node { opacity: 0; }
  .eco.e-in .eco-node { animation: e-node 0.9s var(--e-expo) calc(var(--i) * 90ms + 200ms) backwards; }
  .eco.e-wait .eco-core { opacity: 0; }
  .eco.e-in .eco-core { animation: e-node 0.9s var(--e-expo) backwards, e-core 3.6s ease-in-out 1s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-pulse { opacity: 0; }
}
@keyframes e-orbit { to { transform: rotate(360deg); } }
@keyframes e-flow {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  85%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes e-core {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(75, 224, 103, 0.06), 0 0 60px rgba(75, 224, 103, 0.22); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 16px rgba(75, 224, 103, 0.08), 0 0 80px rgba(75, 224, 103, 0.34); }
}
@keyframes e-node { from { opacity: 0; scale: 0.85; } }

@media (max-width: 520px) {
  .eco-node small { display: none; }
  .eco-node { width: 26%; }
}

/* ==========================================================================
   v4: the hero tablet, mockup reveals, 14-inch laptops, phones
   ========================================================================== */

/* The hero tablet stays solid to its bezel; only the hands fade into the page. */
.hero-shot img {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* Mockups rise softly out of the page --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* The home tablet: the slowest, softest arrival on the site. */
  .intro > .hero-shot { animation: e-mock-hero 1.6s var(--e-expo) 300ms both; }

  /* Every other product shot and screen, once, as it comes into view. */
  .e-mock.e-wait { opacity: 0; }
  .e-mock.e-in { animation: e-mock 1.3s var(--e-expo) var(--ed, 0ms) backwards; }

  /* The site's own product-screen reveals take the same, smoother curve. */
  .reveal.is-in:not([data-reveal="stagger"]),
  .reveal[data-reveal="stagger"].is-in > * { animation-name: e-mock; animation-duration: 1.2s; animation-timing-function: var(--e-expo); }
}
@keyframes e-mock-hero {
  from { opacity: 0; transform: translate3d(0, 90px, 0) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes e-mock {
  from { opacity: 0; transform: translate3d(0, 56px, 0) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* 14-inch laptops: wide but short screens -------------------------------- */

/* A 14-inch laptop shows about 1280-1512 by 650-860 pixels in a browser. The first screen
   should carry the headline, the action and the start of the product, and no panel should be
   taller than the screen it sits on. */
@media (min-width: 1024px) and (max-height: 940px) {
  :root { --section-y: clamp(56px, 10vh, 96px); }

  .hero { padding-top: clamp(36px, 7vh, 72px); padding-bottom: clamp(36px, 6vh, 64px); }
  .hero--page { padding-top: clamp(32px, 6.5vh, 64px); }
  .hero .pill, .hero .crumbs { margin-bottom: clamp(14px, 2.4vh, 24px); }
  .hero h1, .hero .display { font-size: min(var(--fs-display), 9.2vh); }
  .hero--page h1 { font-size: min(var(--fs-h1), 8.4vh); }
  .hero .lead { margin-top: clamp(12px, 2vh, 22px); }
  .hero .actions { margin-top: clamp(18px, 3vh, 32px); }
  .hero-shot { margin-top: clamp(20px, 3.4vh, 40px); width: min(100%, 940px, 118vh); }

  h2 { font-size: min(var(--fs-h2), 6.4vh); }

  .showcase { min-height: clamp(300px, 58vh, 520px); padding-block: clamp(24px, 5vh, 56px); }
  .showcase-img { max-height: 64vh; object-fit: contain; }
  .section--shot .showcase--hero { min-height: clamp(300px, 62vh, 520px); }

  .eco { width: min(100%, 560px, 72vh); }
  .cs-band { padding-block: clamp(28px, 6vh, 64px); }

  /* Satra's stations: the held screen fits under the header with room to spare. */
  .stations.is-enhanced .station { min-height: 72vh; }
  .stations.is-enhanced .station-ui { top: calc(var(--header-h) + 3vh); height: calc(100vh - var(--header-h) - 6vh); min-height: 380px; }
}
.station-ui .showcase-note { z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(6, 22, 14, 0.7); }

/* Phones ----------------------------------------------------------------- */

@media (max-width: 719px) {
  .eco-core span { font-size: 0.6875rem; }
  .cs-band { border-radius: 22px; }
  .cs-band-text h2 { font-size: clamp(1.875rem, 1.2rem + 3.4vw, 2.5rem); }
  .e-footmark { margin-top: 28px; }
  /* The hover lights have no pointer here, so they are not drawn at all. */
  .e-glow { display: none; }
}
@media (max-width: 400px) {
  .eco-core span { display: none; }
  .eco-node b { font-size: 0.875rem; }
}

/* Ecosystem positions live here, not in style attributes, because the site's
   Content-Security-Policy (style-src 'self') blocks inline styles. */
.eco-node[data-tool="loop"]    { --x: 50%;    --y: 12%;    --i: 0; }
.eco-node[data-tool="renew"]   { --x: 86.14%; --y: 38.26%; --i: 1; }
.eco-node[data-tool="trace"]   { --x: 72.34%; --y: 80.74%; --i: 2; }
.eco-node[data-tool="collect"] { --x: 27.66%; --y: 80.74%; --i: 3; }
.eco-node[data-tool="gauge"]   { --x: 13.86%; --y: 38.26%; --i: 4; }
.eco-pulse[data-for="loop"]    { --dx: 0px;     --dy: -16px;   --i: 0; }
.eco-pulse[data-for="renew"]   { --dx: 15.22px; --dy: -4.94px; --i: 1; }
.eco-pulse[data-for="trace"]   { --dx: 9.40px;  --dy: 12.94px; --i: 2; }
.eco-pulse[data-for="collect"] { --dx: -9.40px; --dy: 12.94px; --i: 3; }
.eco-pulse[data-for="gauge"]   { --dx: -15.22px; --dy: -4.94px; --i: 4; }

/* When the pages are rendered inside a framework wrapper (e.g. a Next.js div), the wrapper
   must not take part in layout, so the header, main and footer behave as direct body children. */
.site-root { display: contents; }