/* ==========================================================================
   Pleevi: shared styles
   Layout, type scale and motion mirror bendingspoons.com (values measured off
   the live site), re-coloured with the Pleevi green.
   ========================================================================== */

:root {
  --bg: #000;
  --fg: #fff;

  --green: #07b67f;        /* brand green, sampled from the supplied swatch */
  --green-soft: #07b67f;   /* accent text colour (exact swatch #07b67f) */
  --green-glow: #3dffb5;   /* energy dot / live lines */

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --mono: var(--sans);

  /* sizes glide from their phone value (390 px wide) to their desktop value (1440 px wide), so nothing jumps
     when the window is resized: value = a + b·vw, clamped at both ends */
  --nav-h: clamp(64px, calc(57.69px + 1.619vw), 81px);
  --gutter: clamp(20px, calc(9.6px + 2.667vw), 48px);
  --pad: clamp(20px, calc(3.66px + 4.19vw), 64px);             /* .container side padding */
  --radius: clamp(24px, calc(21.03px + .762vw), 32px);
  --hero-h1: clamp(32px, calc(24.46px + 1.905vw), 60px);           /* the homepage headline: 32 px on a phone, 52 at 1440 */
  --hero-pt: clamp(28px, calc(22.06px + 1.524vw), 44px);           /* the space above it, under the nav */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --eyebrow-room: 44px;                                            /* an eyebrow's line (16 px) and its 28 px margin, kept above a hero that has none */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }

.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav__logo img { height: clamp(30px, calc(26.29px + .952vw), 40px); width: auto; transition: filter .3s ease; }

/* over the light "Use cases" band the nav flips: dark wordmark, black button */
.nav { transition: background-color .3s ease, border-color .3s ease; }
.on-light .nav { background: rgba(244, 243, 239, .72); border-color: rgba(0, 0, 0, .07); }
/* over a light band the logo with black letters and the very same green (Elias, 4 Nov 2026: inverting it shifted the green) */
.nav__logo { position: relative; }
.nav__logo .nav__logo-dark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .3s ease; }
.nav__logo img:not(.nav__logo-dark) { transition: opacity .3s ease; }
.on-light .nav__logo .nav__logo-dark { opacity: 1; }
.on-light .nav__logo img:not(.nav__logo-dark) { opacity: 0; }
html.mnav-open .nav__logo .nav__logo-dark { opacity: 0 !important; }
html.mnav-open .nav__logo img:not(.nav__logo-dark) { opacity: 1 !important; }
.on-light .nav .btn { background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 8px 24px -14px rgba(0, 0, 0, .35); }
.on-light .nav .btn:hover { background: var(--green); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, calc(8.89px + .286vw), 13px) clamp(16px, calc(13.03px + .762vw), 24px) clamp(11px, calc(9.89px + .286vw), 14px);
  border-radius: 7px;
  background: #fff;
  color: #000;
  font-family: inherit;                                  /* <button> elements don't inherit the site font by themselves */
  font-size: clamp(14px, calc(13.26px + .19vw), 16px);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.15;
  transition: background-color .25s ease, transform .25s ease;
}
button.btn { border: 0; cursor: pointer; }
.btn:hover { background: var(--green-soft); }
.btn:active { transform: scale(.97); }
.btn--lg { padding: clamp(14px, calc(12.51px + .381vw), 18px) clamp(26px, calc(23.03px + .762vw), 34px) clamp(15px, calc(13.51px + .381vw), 19px); font-size: clamp(16px, calc(15.26px + .19vw), 18px); }
.btn:focus-visible, .nav__logo:focus-visible, a:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 3px; }


/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */
.sec-head { text-align: center; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-title {
  text-wrap: balance;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.sec-title em { font-style: normal; color: var(--green-soft); }
.sec-lead {
  text-wrap: pretty;
  max-width: 44ch;
  margin: 22px auto 0;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.35;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .62);
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--d, 0ms) * .5); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   1 · Hero + schematic
   -------------------------------------------------------------------------- */
.hero {
  --h1: var(--hero-h1);                                                  /* headline size: 32 px on a phone, 52 at 1440 */
  --pt: var(--hero-pt);                                                  /* space above the headline */
  --gap: clamp(20px, calc(15.54px + 1.143vw), 32px);                     /* headline to scene */
  --pb: clamp(16px, calc(13.03px + .762vw), 24px);                       /* scene to the logo strip */
  position: relative;
  padding-top: calc(var(--nav-h) + var(--pt));
  padding-bottom: var(--pb);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.hero__title {
  position: relative;
  z-index: 3;
  padding-inline: var(--gutter);
  text-align: center;
  max-width: 20em;
  font-weight: 600;
  font-size: var(--h1);
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero__title em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--green-soft);
}
.hero__title .w {
  display: inline-block;
  animation: word-in .6s var(--ease) both;
  animation-delay: calc(var(--n) * 55ms + 60ms);
}
.hero__title .hang { margin-right: -.27em; }   /* a trailing comma hangs, so the line centres on its words (21 Oct 2026) */
@keyframes word-in { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }


.schematic {
  /* the screen height left after the nav, the two-line headline, the gaps and the logo strip under the hero */
  --strip: calc(clamp(18px, 1.6vw, 22px) * 1.3 + clamp(14px, calc(10.29px + .952vw), 24px) + clamp(56px, calc(50.06px + 1.524vw), 72px) + 16px);
  --room: calc(100vh - var(--nav-h) - var(--pt) - 2.12 * var(--h1) - var(--gap) - var(--pb) - var(--strip));
  position: relative;
  margin: var(--gap) auto 0;
  /* full width on a phone; on a laptop the scene shrinks with the window height so the logos show without scrolling */
  width: min(100%, clamp(320px, calc(245.9px + 36.95vw), 940px), max(440px, calc(var(--room) * 1.5447)));
}
@supports (height: 100svh) {
  .schematic { --room: calc(100svh - var(--nav-h) - var(--pt) - 2.12 * var(--h1) - var(--gap) - var(--pb) - var(--strip)); }
}


.schematic__svg { display: block; width: 100%; height: auto; overflow: visible; }

.obj { animation: obj-in 1s ease both; }
[data-in="pads"]      { animation-delay: .10s; }
[data-in="grid"]      { animation-delay: .20s; }
[data-in="building1"] { animation-delay: .30s; }
[data-in="building2"] { animation-delay: .38s; }
[data-in="solar"]     { animation-delay: .46s; }
[data-in="engine"]    { animation-delay: .54s; }
[data-in="battery"]   { animation-delay: .62s; }
[data-in="bus1"]      { animation-delay: .70s; }
[data-in="bus2"]      { animation-delay: .78s; }
[data-in="ev"]        { animation-delay: .86s; }
@keyframes obj-in { from { opacity: 0; } to { opacity: 1; } }

/* the green line network */
.net-base { stroke: #23806a; stroke-width: 5; fill: none; opacity: .95; }
.route { stroke: none; fill: none; }
.route.wire { stroke: #1ec296; stroke-width: 7.7; }
#lit, .lit { fill: none; stroke: var(--green-glow); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(61, 255, 181, .9)); }
.port circle:first-child { filter: drop-shadow(0 0 4px rgba(61, 255, 181, .6)); }

/* --------------------------------------------------------------------------
   1b · Trusted-by strip (auto-scrolling marquee)
   -------------------------------------------------------------------------- */
.trustbar { padding: 0; }
.trustbar .row-label { margin-bottom: clamp(14px, calc(10.29px + .952vw), 24px); }
.trustbar .row-label, .partner-proof .row-label { font-size: clamp(16px, calc(15.26px + .19vw), 18px); font-weight: 600; letter-spacing: .02em; line-height: 1.15; }
.row-label {
  margin-bottom: clamp(24px, 2.6vw, 36px);
  text-align: center;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.03em;
  color: #fff;
}
.trustbar__viewport { position: relative; max-width: 1320px; margin-inline: auto; overflow: hidden; }
/* soft edges: static overlays rather than a mask, so nothing re-composites while the strip moves */
.trustbar__viewport::before, .trustbar__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 12%; pointer-events: none;
}
.trustbar__viewport::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.trustbar__viewport::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
/* each logo carries its own trailing margin, so the second copy starts exactly at -50% */
.trustbar__track { display: flex; align-items: center; width: max-content; height: clamp(56px, calc(50.06px + 1.524vw), 72px); animation: trustbar-scroll 60s linear infinite; will-change: transform; backface-visibility: hidden; }
.trustbar__track .logo { margin-right: clamp(40px, 4.4vw, 64px); }
@keyframes trustbar-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .trustbar__track { animation: none; } }

/* logo pair: white mark at rest, brand colours on hover. Both images are cut from one source on the same canvas,
   so the crossfade never shifts; colour only on devices that can hover. scroll.js drives the strip and lets it
   glide to a stop under the cursor (the CSS animation is only the no-JavaScript fallback).
   The two images fade at once and are added together (plus-lighter, inside the logo's own group), so every pixel
   goes in a straight line from the mark to the colour. Laid over each other the normal way, two half-faded images
   dimmed the logo halfway: a dark blink just before and after the colour (Elias, 2 Oct 2026). Both images stay on
   their own layers, so starting and ending a fade never repaints them. */
.logo { --lu: clamp(.74px, calc(.6434px + .02476vw), 1px); display: grid; flex: none; place-items: center; isolation: isolate; }
.logo img { grid-area: 1 / 1; display: block; width: auto; height: calc(var(--h) * var(--lu)); will-change: opacity; transition: opacity .28s cubic-bezier(.4, 0, .2, 1); }
.logo__mono { opacity: .6; }
.logo__color { opacity: 0; mix-blend-mode: plus-lighter; }
.logo.is-instant img { transition: none !important; }   /* the strip's wrap hands a coloured logo to its twin */
@media (hover: hover) {
  .logowall .logo:hover .logo__mono, .logo.is-hot .logo__mono { opacity: 0; }
  .logowall .logo:hover .logo__color, .logo.is-hot .logo__color { opacity: 1; }
}
/* without plus-lighter: the colour fades in over the mark, which only goes once it is covered, and back the other way */
@supports not (mix-blend-mode: plus-lighter) {
  .logo .logo__mono { transition: opacity .06s linear; }
  @media (hover: hover) { .logowall .logo:hover .logo__mono, .logo.is-hot .logo__mono { transition: opacity .1s linear .26s; } }
}
.logowall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px clamp(44px, 6vw, 96px); }


/* --------------------------------------------------------------------------
   2 · Key metrics
   -------------------------------------------------------------------------- */
.stats { padding: clamp(56px, 7vw, 112px) 0 clamp(24px, 3vw, 48px); }
/* three equal columns, each number over its caption: the figures line up and the row sits centred */
.stats .container { max-width: 1120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.2vw, 16px);
  padding: 4px clamp(12px, 2.4vw, 36px);
  text-align: center;
  font-family: var(--sans);
  color: #fff;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .12); }
.stat:nth-child(2) { transition-delay: .08s; }
.stat:nth-child(3) { transition-delay: .16s; }
.stat.is-in { opacity: 1; transform: none; }
.stat__fig { white-space: nowrap; font-size: clamp(52px, calc(40.11px + 3.048vw), 84px); line-height: 1; letter-spacing: -.03em; }
.stat__num, .stat__plus { font-family: var(--serif); font-weight: 700; color: var(--green-soft); }
.stat__num { display: inline-block; }
.stat__plus { font-size: .72em; }
/* a qualifier ("Up to") sits on its own small line above the figure; the other columns keep the line empty, so the figures align */
.stat__pre { display: block; min-height: 1.2em; margin-bottom: -4px; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.stat__cap { font-size: clamp(17px, calc(15.51px + .381vw), 21px); line-height: 1.35; letter-spacing: -.015em; color: rgba(255, 255, 255, .62); }   /* two short lines in every column */
@media (max-width: 700px) {
  .stats .container { grid-template-columns: 1fr; max-width: 420px; row-gap: 28px; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .stat { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------------
   3 · Statement (word-by-word reveal as it scrolls in; not pinned, so the gap
   under the metrics never changes)
   -------------------------------------------------------------------------- */
.statement { position: relative; padding: clamp(40px, 5vw, 80px) 0 clamp(72px, 9vw, 140px); }
.statement__pin { padding: 0 var(--gutter); }
.statement__text {
  max-width: 1120px;
  margin: 0 auto;
  font-size: clamp(24px, 2.9vw, 42px);
  line-height: 1.18;
  letter-spacing: -.03em;
}
.statement__text p + p { margin-top: 1.1em; }
[data-words] .sw { display: inline-block; white-space: pre; will-change: opacity, filter; }   /* the homepage statement and About's roots */
[data-words] em { font-style: normal; color: var(--green-soft); }
[data-words] .sw--em { color: var(--green-soft); }   /* "energy management system" in Pleevi green (6 Nov 2026) */


/* --------------------------------------------------------------------------
   4 · Products
   -------------------------------------------------------------------------- */
.products { padding: clamp(72px, 9vw, 140px) 0 clamp(72px, 9vw, 140px); }

.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .pcards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.pcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; margin: clamp(56px, 6vw, 88px) auto 0; }
@media (max-width: 980px) { .pcards--2 { grid-template-columns: 1fr; max-width: 560px; } }

.pcard {
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  padding: 18px 18px 34px;
  overflow: hidden;
}
.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background: radial-gradient(80% 90% at 50% 40%, #1a1a1a, #101010);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pcard__media--edge img { width: 72%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.pcard__media--driver img { width: 96%; height: auto; }
.pcard__media--studio, .pcard__media--chart { padding: 0 8%; align-items: end; }

.browser { width: 100%; border-radius: 7px 14px 0 0; overflow: hidden; background: #fff; box-shadow: 0 -8px 40px rgba(0,0,0,.4); margin-top: 16%; }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #1a1a1a; }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.browser__bar i:nth-child(2) { background: #febc2e; }
.browser__bar i:nth-child(3) { background: #28c840; }
.browser__bar span { margin-left: 10px; font-size: 11px; color: rgba(255,255,255,.55); }
.browser img { width: 100%; height: auto; }

.pcard__body { padding: 28px 14px 0; display: flex; flex-direction: column; flex: 1; }
.pcard .eyebrow { margin-bottom: 12px; letter-spacing: .18em; }
.pcard__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.pcard__desc {
  margin-top: 14px;
  min-height: 3.1em;
  font-size: 18px;
  line-height: 1.38;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .55);
}
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.ticks li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .7);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: .3em;
  width: 15px; height: 8px;
  border-left: 2.2px solid var(--green);
  border-bottom: 2.2px solid var(--green);
  transform: rotate(-45deg) scale(.9);
  transform-origin: 50% 50%;
}

.pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; height: 78px; }
.pins span { position: relative; justify-self: center; width: 2px; height: 100%; background: linear-gradient(var(--green), rgba(0, 183, 125, .05)); overflow: visible; }
.pins span::before {
  content: "";
  position: absolute;
  left: 50%; top: -1px;
  width: 20px; height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--green-glow);
  box-shadow: 0 0 20px rgba(61, 255, 181, .7);
}
.pins span::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff;
  animation: pin-flow 2.4s var(--ease) infinite;
}
.pins span:nth-child(2)::after { animation-delay: .5s; }
.pins span:nth-child(3)::after { animation-delay: 1s; }
@keyframes pin-flow { 0% { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
@media (max-width: 980px) { .pins { display: none; } .engine { margin-top: 24px; } }

.engine {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3.6vw, 64px);
  border-radius: var(--radius);
  border: 1.5px solid rgba(0, 183, 125, .55);
  background: radial-gradient(70% 160% at 12% 50%, rgba(0, 183, 125, .22), rgba(0, 183, 125, .06) 60%), #08130f;
  box-shadow: 0 0 80px rgba(0, 183, 125, .12);
}
.engine .eyebrow { letter-spacing: .2em; margin-bottom: 12px; }
.engine__title { font-family: var(--sans); font-weight: 600; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.04em; }
.engine__desc { margin-top: 14px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.02em; color: rgba(255, 255, 255, .62); }
@media (max-width: 700px) { .engine { flex-direction: column; align-items: flex-start; gap: 22px; } }

/* --------------------------------------------------------------------------
   5 · Use cases (light band, pastel cards, like Bending Spoons' "Products")
   -------------------------------------------------------------------------- */
.cases { background: #f4f3ef; color: #0a0a0a; padding: clamp(72px, 9vw, 140px) 0; }
.sec-head--dark .sec-lead { color: rgba(0, 0, 0, .55); }

/* --------------------------------------------------------------------------
   6 · Partners
   -------------------------------------------------------------------------- */
.partners { padding: clamp(72px, 9vw, 140px) 0 clamp(56px, 7vw, 100px); }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) {
  .quotes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { flex: 0 0 min(84vw, 420px); scroll-snap-align: center; }
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: var(--radius);
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, .07);
}
.quote blockquote {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.38;
  letter-spacing: -.025em;
  color: rgba(255, 255, 255, .88);
  text-indent: -.45em;
}
.quote figcaption { display: flex; align-items: center; gap: 16px; }
.quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #222; }
.quote b { display: block; font-family: var(--sans); font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: -.03em; }
.quote small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; letter-spacing: -.01em; color: rgba(255, 255, 255, .5); }

.logos { margin-top: clamp(56px, 6vw, 96px); text-align: center; }
.logos .eyebrow { color: rgba(255, 255, 255, .45); margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   7 · CTA + footer
   -------------------------------------------------------------------------- */
.cta { padding: clamp(72px, 8vw, 128px) 0; text-align: center; }
.cta__title { font-weight: 600; font-size: clamp(32px, 4vw, 60px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.cta__lead { text-wrap: balance; max-width: 38ch; margin: 28px auto 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -.02em; color: rgba(255, 255, 255, .6); }
.cta__actions { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 32px; }

.footer { border-top: 1px solid rgba(255, 255, 255, .07); padding: 72px 0 32px; }
/* the links in columns; under them the company's details on the left, kept minimal, and the newsletter on the right,
   compact (Wout and Elias, 7 Oct 2026) */
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, 1fr)) minmax(250px, 1.45fr); gap: 40px 24px; }   /* the newsletter on the right of the links (Elias, 8 Oct 2026); four link columns since 14 Oct 2026 */
@media (max-width: 1360px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(250px, 1.3fr); } .footer__grid > .footer__brand { grid-column: 1 / -1; } }   /* the logo above, the links and the newsletter in one row */
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer__grid > .footer__news { grid-column: 1 / -1; max-width: 460px; } .footer .footer__news .news-form input { flex-basis: 200px; } }   /* a full row: the field and the button side by side */
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__logo { height: 34px; width: auto; }
.footer__tag { margin-top: 18px; max-width: 26ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .5); text-wrap: balance; }
.footer__grid .footer__social { display: inline-block; margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--green-soft); }
.footer__social i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.footer__social:hover i { transform: translate(2px, -2px); }
.footer h4 { margin: 0 0 18px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.footer__grid a { display: block; margin-bottom: 12px; font-size: 16px; letter-spacing: -.02em; color: rgba(255, 255, 255, .85); transition: color .2s; }
.footer__grid a:hover { color: var(--green-soft); }
.footer__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 40px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13.5px; line-height: 1.5; letter-spacing: -.005em; color: rgba(255, 255, 255, .42); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.footer__legal a { transition: color .2s; }
.footer__legal a:hover { color: var(--green-soft); }
.footer__eu { display: inline-flex; align-items: center; gap: 10px; }   /* bottom right (Elias, 8 Oct 2026) */
.footer__eu img { flex: none; width: auto; height: 20px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }   /* large enough to read as the flag, with an edge against the black */
.footer__news h4 em { font-style: normal; color: var(--green-soft); }
.footer__newsline { margin: -8px 0 14px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .55); text-wrap: pretty; }   /* Elias, 8 Oct 2026 */
.footer__news .news-form { max-width: none; margin: 0; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.footer__news .news-form input { flex: 1 1 100%; min-width: 0; height: 44px; padding: 0 14px; font-size: 15px; border-radius: 7px; }
.footer__news .news-form .btn { height: 44px; padding-inline: 18px; font-size: 14.5px; border-radius: 7px; }
.footer__news .news__msg { min-height: 0; font-size: 13.5px; }
.footer__news .news__msg:empty { display: none; }
@media (max-width: 560px) { .footer__news .news-form .btn { width: auto; } }


/* ==========================================================================
   Navigation links + dropdown
   ========================================================================== */
.nav__right { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.nav__links > a, .nav__dd > a { display: block; padding: 8px 0; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .7); transition: color .2s; }
.nav__links > a:hover, .nav__dd > a:hover, .nav__links [aria-current="page"] { color: #fff; }
.nav__dd { position: relative; }
.nav__dd > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav__menu {
  position: absolute; top: 100%; left: 50%; width: max-content; padding: 8px;   /* as narrow as its longest name (Elias, 8 Oct 2026) */
  border-radius: 7px; background: rgba(13, 13, 13, .96); border: 1px solid rgba(255, 255, 255, .09);   /* the Talk to us button's rounding (Elias, 14 Oct 2026) */
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.nav__dd:hover .nav__menu, .nav__dd:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }   /* centred under its tab (review, 7 Oct 2026) */
.nav__menu a { display: block; padding: 12px 16px; border-radius: 6px; font-size: 15.5px; color: rgba(255, 255, 255, .85); transition: background-color .2s, color .2s; }
.nav__menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.on-light .nav__links > a, .on-light .nav__dd > a { color: rgba(0, 0, 0, .62); }
.on-light .nav__links > a:hover, .on-light .nav__dd > a:hover, .on-light .nav__links [aria-current="page"] { color: #000; }
/* over a light band the open menu turns light with the header, so the current page's black name stays readable (Elias,
   30 Oct 2026: "Make sure the dropdown is light if the header is light") */
.on-light .nav__menu { background: rgba(250, 250, 248, .97); border-color: rgba(0, 0, 0, .08); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .35); }
.on-light .nav__menu a { color: rgba(0, 0, 0, .7); }
.on-light .nav__menu a:hover { background: rgba(0, 0, 0, .05); color: #000; }
.on-light .nav__menu a[aria-current="page"] { color: #000; font-weight: 600; }
@media (max-width: 1079px) { .nav__links { display: none; } }   /* seven tabs since 7 Oct 2026: the menu below 1080 px */
.nav__links > a, .nav__dd > a { white-space: nowrap; }

[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.sec-cta { margin-top: clamp(40px, 5vw, 72px); text-align: center; }
.sec-cta--pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(28px, 4vw, 56px); }

/* ==========================================================================
   Use-case cards (same layout as the "Our Solution" cards)
   ========================================================================== */
.ugrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.ugrid > .ucard { grid-column: span 2; }
.ugrid > .ucard:nth-child(n+4):nth-last-child(-n+2) { grid-column: span 3; }
.ugrid--half > .ucard { grid-column: span 3 !important; }
@media (max-width: 980px) { .ugrid { grid-template-columns: 1fr 1fr; } .ugrid > .ucard, .ugrid > .ucard:nth-child(n+4):nth-last-child(-n+2), .ugrid--half > .ucard { grid-column: auto !important; } }
@media (max-width: 640px) { .ugrid { grid-template-columns: 1fr; } }

.ucard {
  display: flex; flex-direction: column;
  padding: 18px 18px 30px;
  background: #0d0d0d; color: #fff;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .3s ease, opacity .55s var(--ease);
}
.ucard.reveal.is-in:hover, .ucard:hover { transform: translateY(-6px); }
.ucard__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: #151515; }
.ucard__media img, .ucard__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ucard:hover .ucard__media img, .ucard:hover .ucard__media video { transform: scale(1.04); }
.ucard__body { display: flex; flex-direction: column; flex: 1; padding: 26px 14px 0; }
.ucard .eyebrow { margin-bottom: 12px; letter-spacing: .18em; }
.ucard__title { font-family: var(--sans); font-weight: 600; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.035em; }
.ucard__desc { margin-top: 14px; font-size: 18px; line-height: 1.38; letter-spacing: -.02em; color: rgba(255, 255, 255, .55); }
.ucard__more { margin-top: auto; padding-top: 26px; font-size: 15.5px; font-weight: 600; color: var(--green); }
.ucard__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.ucard:hover .ucard__more i { transform: translateX(5px); }

/* ==========================================================================
   Sub-pages
   ========================================================================== */
.phero { padding: calc(var(--nav-h) + clamp(64px, 9vw, 128px)) var(--gutter) clamp(40px, 5vw, 72px); text-align: center; }
.phero > * { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.phero .eyebrow { margin-bottom: 28px; }
.phero__title { max-width: 1100px; margin: 0 auto; font-weight: 600; font-size: clamp(36px, 5.6vw, 80px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.phero__title em, .cta__title em { font-family: var(--serif); font-style: normal; font-weight: 600; letter-spacing: -.04em; color: var(--green-soft); }
.phero__lead { max-width: 48ch; margin: 34px auto 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -.02em; color: rgba(255, 255, 255, .62); }
.phero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }

.psec { padding: clamp(56px, 7vw, 112px) 0; }
.psec--light { background: #f4f3ef; color: #0a0a0a; }
.psec--light .sec-title { color: #0a0a0a; }

.bigimg { aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--radius); background: #111; }
.bigimg img, .bigimg video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .bigimg { aspect-ratio: 4 / 3; } }

.kstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 44px 40px; text-align: center; }
.kstat { display: flex; flex-direction: column; gap: 8px; }
.kstat__num { font-family: var(--serif); font-weight: 700; font-size: clamp(38px, 4vw, 58px); line-height: 1; letter-spacing: -.03em; color: var(--green-soft); }
.kstat__cap { font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.02em; color: rgba(255, 255, 255, .75); }
.psec--light .kstat__cap { color: rgba(0, 0, 0, .62); }
.psec--light .kstats { margin-bottom: clamp(48px, 6vw, 80px); }
.kstats--one { max-width: 420px; margin: 56px auto 0; }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 40px; }
.spec { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.spec__val { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.035em; }

.dgrid { display: grid; gap: 24px; }
.dgrid--2 { grid-template-columns: repeat(2, 1fr); }
.dgrid--3 { grid-template-columns: repeat(3, 1fr); }
.dgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .dgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .dgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .dgrid--layers { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }   /* Product's three engine layers: three, or one under another, never two and one */
@media (max-width: 700px) { .dgrid--2, .dgrid--3, .dgrid--4 { grid-template-columns: 1fr; } }
.dcard { display: flex; flex-direction: column; padding: clamp(28px, 2.8vw, 40px); border-radius: var(--radius); background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .07); }
.dcard .eyebrow { margin-bottom: 14px; letter-spacing: .18em; }
.dcard__title { font-family: var(--sans); font-weight: 600; font-size: clamp(24px, 2.1vw, 31px); line-height: 1.1; letter-spacing: -.035em; }
.dcard__title--xl { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; }
.dcard__desc { margin-top: 14px; font-size: 18px; line-height: 1.38; letter-spacing: -.02em; color: rgba(255, 255, 255, .55); }
.dcard .ticks { margin-top: 22px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 32px; }
.step { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.step__t { margin-top: 22px; font-family: var(--sans); font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -.035em; }
.step__d { margin-top: 12px; font-size: 17px; line-height: 1.4; letter-spacing: -.015em; color: rgba(255, 255, 255, .58); }

.tbl { border-top: 1px solid rgba(255, 255, 255, .16); }
.tbl__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; padding: 22px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: clamp(16px, 1.45vw, 20px); letter-spacing: -.02em; color: rgba(255, 255, 255, .62); }
.tbl__lead { color: #fff; font-weight: 500; }
.tbl__row--head { font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.psec--light .tbl { border-color: rgba(0, 0, 0, .18); }
.psec--light .tbl__row { border-color: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .6); }
.psec--light .tbl__lead { color: #000; }
.psec--light .tbl__row--head { color: rgba(0, 0, 0, .4); }
@media (max-width: 700px) { .tbl__row { grid-auto-flow: row; gap: 4px; } .tbl__row--head { display: none; } }



.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
@media (max-width: 980px) { .contact { grid-template-columns: 1fr; } }
.person { flex-direction: row; align-items: center; gap: clamp(24px, 3vw, 44px); }
.person__img { flex: none; width: clamp(150px, 20vw, 260px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.person .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 700px) { .person { flex-direction: column; align-items: flex-start; } }
.mail { justify-content: space-between; }
.mail__link { align-self: flex-start; margin-top: 28px; padding-bottom: 4px; font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); letter-spacing: -.01em; color: var(--green-soft); border-bottom: 1px solid rgba(7, 182, 127, .45); }


/* ==========================================================================
   About
   ========================================================================== */
.lede { max-width: 1100px; margin: 0 auto; }
.lede p { font-size: clamp(22px, 2.6vw, 38px); line-height: 1.22; letter-spacing: -.035em; color: rgba(255, 255, 255, .88); }
.lede p + p { margin-top: 1em; }

/* About's advisors: small cards, 240 px wide, two side by side on a phone too (Elias, 5 Oct 2026: "make the advisor
   cards smaller") */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tgrid--center { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: center; }
@media (max-width: 560px) { .tgrid--center { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 440px; margin-inline: auto; } }
.tcard { display: flex; flex-direction: column; padding: 8px 8px 18px; border-radius: var(--radius); background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .07); overflow: hidden; transition: opacity .55s var(--ease); }   /* still: no lift, ring or zoom (review, 7 Oct 2026) */
.tcard__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: #aab1b8; }
.tcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .9s var(--ease); }
.tcard__body { display: flex; flex-direction: column; flex: 1; padding: 14px 8px 0; }
.tcard__name { font-family: var(--sans); font-weight: 600; font-size: clamp(16px, calc(14.5px + .4vw), 20px); line-height: 1.1; letter-spacing: -.03em; }
.tcard__role { margin-top: 6px; font-size: clamp(13px, calc(12.26px + .19vw), 14.5px); line-height: 1.35; letter-spacing: -.015em; color: rgba(255, 255, 255, .55); }



/* ==========================================================================
   Newsletter: the same block as the closing call to action
   ========================================================================== */
.news-form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; max-width: 660px; margin: 44px auto 0; }
.news-form input { flex: 1 1 300px; min-width: 0; height: 62px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; background: #141414; color: #fff; font: 400 18px var(--sans); letter-spacing: -.01em; transition: border-color .2s; }
.news-form input::placeholder { color: rgba(255, 255, 255, .4); }
.news-form input:focus { outline: none; border-color: var(--green); }
.news-form .btn { height: 62px; padding-block: 0; cursor: pointer; border: 0; }
.news__msg { flex-basis: 100%; min-height: 1.4em; margin: 2px 0 0; font-size: 15px; letter-spacing: -.01em; color: rgba(255, 255, 255, .6); }
.news__msg[data-state="ok"] { color: var(--green-soft); }
.news__msg[data-state="error"] { color: #ff8a80; }
@media (max-width: 560px) { .news-form .btn { width: 100%; } }

/* ==========================================================================
   Home: quotes in pairs, door cards with a product shot
   ========================================================================== */
.quotes--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .quotes--two { display: flex; } }
.ucard__media--contain { display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 40%, #1a1a1a, #101010); }
.ucard__media--contain img { width: 72%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.ucard:hover .ucard__media--contain img { transform: scale(1.04); }

/* ==========================================================================
   Solutions + Partners
   ========================================================================== */
.sol { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 88px); align-items: start; margin-bottom: clamp(48px, 6vw, 88px); }
@media (max-width: 900px) { .sol { grid-template-columns: 1fr; } }
.sol__text { position: sticky; top: calc(var(--nav-h) + 40px); }
@media (max-width: 900px) { .sol__text { position: static; } }
.sol__text .eyebrow { margin-bottom: 20px; }
.sol__title { margin: 0; font-weight: 600; font-size: clamp(32px, 3.8vw, 54px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.sol__title em { font-family: var(--serif); font-style: normal; letter-spacing: -.03em; color: var(--green-soft); }
.sol__lead { max-width: 44ch; margin-top: 24px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.38; letter-spacing: -.02em; color: rgba(255, 255, 255, .62); }
.psec--light .sol__lead { color: rgba(0, 0, 0, .6); }
.sol__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.psec--light .btn { background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 30px -18px rgba(0, 0, 0, .3); }
.psec--light .btn:hover { background: var(--green); }
.sol__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: #111; }
.sol__media img, .sol__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticks--card { margin-top: 20px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius); background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .07); }
.psec--light .ticks--card { background: #e8e7e1; border-color: transparent; }
.psec--light .ticks--card li { color: rgba(0, 0, 0, .7); }
.sec-note { margin-top: 32px; text-align: center; font-size: 18px; letter-spacing: -.02em; color: rgba(0, 0, 0, .55); }

/* ==========================================================================
   Pleevi Studio walkthrough video
   ========================================================================== */
.studio { max-width: 1160px; margin: 0 auto; }
.studio__frame { position: relative; overflow: hidden; border-radius: var(--radius); background: #f3f5f7;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 140px -30px rgba(7, 182, 127, .3), 0 30px 80px -20px rgba(0, 0, 0, .7); }

.sw__bar { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; background: #1b1b1b; }
.sw__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.sw__bar i:nth-child(2) { background: #febc2e; }
.sw__bar i:nth-child(3) { background: #28c840; }
.sw__bar span { position: absolute; left: 50%; transform: translateX(-50%); padding: 4px 64px; border-radius: 8px; background: #2a2a2a; color: #9b9b9b; font-size: 12.5px; }

.studio__video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1004; object-fit: cover; }

.sec-cta--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sol__note { margin: -28px 0 clamp(40px, 5vw, 72px); text-align: center; font-size: 15px; letter-spacing: -.01em; color: rgba(255, 255, 255, .45); }
.psec--light .sol__note { color: rgba(0, 0, 0, .5); }
.qa { max-width: 980px; margin: clamp(48px, 6vw, 88px) auto 0; }
.qa .row-label { margin-bottom: clamp(16px, 1.8vw, 24px); }
.faq--compact .faq__item summary { padding: 24px 52px 24px 0; font-size: clamp(18px, 1.6vw, 23px); }
.faq--compact .faq__item p { padding-bottom: 26px; font-size: clamp(16px, 1.25vw, 18px); }
.psec--light .row-label { color: #0a0a0a; }
.psec--light .faq, .psec--light .faq__item { border-color: rgba(0, 0, 0, .14); }
.psec--light .faq__item p { color: rgba(0, 0, 0, .6); }
.psec--light .faq__item summary:hover { color: var(--green); }
.sol__example { max-width: 720px; margin: 28px auto 0; padding: clamp(20px, 2.4vw, 28px) clamp(24px, 2.8vw, 36px); border-radius: var(--radius); background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .07); }
.sol__example .eyebrow { margin-bottom: 10px; }
.sol__example p { font-size: 16px; line-height: 1.5; letter-spacing: -.01em; color: rgba(255, 255, 255, .78); }

/* the illustration fades in, and its two drawn lines (to the building and the solar panels) with it: alone, they showed
   for a moment on a dark scene, e.g. on coming back to the page from another one (Elias, 5 Oct 2026) */
.schematic__art, .schematic .route.wire { animation: obj-in 1.1s ease both; animation-delay: .1s; }

/* ==========================================================================
   Events (layout of bendingspoons.com/events: light page, big title, white cards)
   ========================================================================== */
.evlist { display: grid; gap: 22px; max-width: 1240px; margin-inline: auto; }
.evcard { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: clamp(24px, 3.4vw, 56px); align-items: center; padding: clamp(28px, 3.4vw, 52px) clamp(28px, 4vw, 60px); border-radius: var(--radius); background: #fff; box-shadow: 0 14px 44px -26px rgba(0, 0, 0, .18); }
.evcard__title { margin: 0; font-size: clamp(26px, 2.7vw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.evcard__desc { margin-top: 14px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; letter-spacing: -.02em; color: rgba(0, 0, 0, .5); }
.evcard__site { display: inline-block; margin-top: 14px; font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; letter-spacing: -.01em; color: var(--green); }   /* the event's own website (21 Oct 2026) */
.evcard__site i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.evcard__site:hover i { transform: translate(2px, -2px); }
.evcard__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.evcard__meta li { font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -.02em; }
.evcard__cta { display: grid; justify-items: center; gap: 14px; text-align: center; }
.evcard__cta span { font-size: clamp(15px, 1.3vw, 19px); letter-spacing: -.02em; }
@media (max-width: 900px) { .evcard { grid-template-columns: 1fr; align-items: start; } .evcard__cta { justify-items: start; text-align: left; } }

/* ==========================================================================
   Home: "Our Solution", a soft grey band with white cards
   ========================================================================== */
.doors, .psec--light.results { background: #efefed; color: #0a0a0a; }   /* results and doors share one grey band on the home page */
.doors .sec-title { color: #0a0a0a; }
.results + .doors { padding-top: clamp(40px, 5vw, 80px); }   /* same band as the results above: a smaller gap between the two */
.doors .ucard { background: #fff; color: #0a0a0a; border: 0; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.doors .ucard:hover { border: 0; box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .34); }
.doors .ucard__media { background: #e8e8e5; }
.doors .ucard__desc { color: rgba(0, 0, 0, .55); }
.doors .ucard__more { color: var(--green); }
.doors .sec-cta .btn { background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 30px -18px rgba(0, 0, 0, .3); }
.doors .sec-cta .btn:hover { background: var(--green); color: #000; }

/* --------------------------------------------------------------------------
   Partners page: photo, FAQ, certification call to action
   -------------------------------------------------------------------------- */
.bigimg--photo { aspect-ratio: 16 / 8; margin-top: clamp(40px, 5vw, 72px); }
.faq { max-width: 980px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .16); }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.faq__item summary { position: relative; list-style: none; cursor: pointer; padding: 30px 56px 30px 0; font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -11px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -4px; }
.faq__item summary:hover { color: var(--green-soft); }
.faq__item p { margin: 0; padding: 0 56px 32px 0; max-width: 820px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; letter-spacing: -.02em; color: rgba(255, 255, 255, .6); }

/* --------------------------------------------------------------------------
   Product page · platform showcase (laptop loop) and story spacing
   -------------------------------------------------------------------------- */
.showcase { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 72px); margin-bottom: clamp(56px, 7vw, 112px); }
.showcase__text .eyebrow { margin-bottom: 20px; }
.showcase__text .sec-lead { margin-left: 0; }
.showcase__media { position: relative; }
/* the loop sits on the page's black with no frame (tools/product-desk/make.py): the LinkedIn video's MacBook on a light
   oak desk, path traced (7532 x 1476, the laptop at x 3872 to 5693), its screen as video over it, and the display's bezel
   over the video (the screen runs under it, so the edge is always the image's, never the video's). The bezel's box is
   larger than the video's and fades out over the still, so neither box's edge shows. The laptop fills the column; the
   desk's front edge runs across the band and out of the window on both sides (the frame is wide enough for 2560 px
   screens), and the text keeps above the desk (its padding: the desk's far edge, y 1124, to the frame's foot). */
.showcase__stage { position: relative; width: calc(100% * 7532 / 1821); margin-left: calc(-100% * 3872 / 1821); aspect-ratio: 7532 / 1476; }
.showcase__stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.showcase__stage video { position: absolute; left: 59.4264%; top: 8.6043%; width: 15.9320%; height: 63.6856%; object-fit: fill; }
.showcase__stage .showcase__bezel { position: absolute; left: 59.1078%; top: 6.9783%; width: 16.5693%; height: 66.9377%; }   /* larger than the video's box, fading out at its edges */
.band { --field: #000; overflow: hidden; background: var(--field); color: #fff; }
.psec.band { padding: clamp(56px, 7vw, 112px) 0 clamp(40px, 5vw, 80px); }   /* Studio, after the engine: a section of its own; the desk's light ends above its bottom */
.band .showcase { align-items: end; margin-bottom: 0; }
.band .showcase__text { position: relative; z-index: 1; align-self: start; padding-top: clamp(0px, 3vw - 16px, 40px); padding-bottom: calc(100% * 7 / 5 * .86 * 352 / 1821 + 24px); }   /* beside the lid, above the desk: as tall as the desk is at the stage's scale (the media column is 7/5 of this one) */
.showcase__text .ticks { margin-top: 22px; }
.showcase__text > .sec-cta__link { display: inline-block; margin-top: 24px; }
.showcase--right .showcase__stage { width: calc(86% * 7532 / 1821); margin-left: calc(14% - 86% * 3872 / 1821); }   /* the laptop at 86% of its column, against its right edge */
/* Studio since 13 Oct 2026 (Elias: "Make the laptop of the Pleevi Studio section bigger"): the title centred above, the
   steps in a third of the width and the laptop filling the other two thirds (a third larger than before); the steps
   keep above the desk (the desk's depth at this scale: twice the steps' column x 352 / 1821) */
#studio .showcase { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
#studio .showcase--right .showcase__stage { width: calc(100% * 7532 / 1821); margin-left: calc(-100% * 3872 / 1821); }
#studio.band .showcase__text { padding-top: 0; padding-bottom: calc(100% * 2 * 352 / 1821 + 24px); }
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; text-align: center; }
  .showcase__text .sec-lead { margin-inline: auto; }
  .band .showcase__text { padding-bottom: 0; }
  .showcase__text .ticks { justify-items: center; }
  .band .showcase__stage { width: calc(92% * 7532 / 1821); margin-left: calc(50% - 92% * 4782.5 / 1821); }   /* the laptop at 92% of the width, centred */
  #studio .showcase { grid-template-columns: 1fr; text-align: left; }   /* the steps read left to right, as Edge's and the app's do */
  #studio .showcase__text .ticks { justify-items: start; }
  #studio.band .showcase__text { padding-bottom: 0; }
  #studio .showcase--right .showcase__stage { width: calc(100% * 7532 / 1821); margin-left: calc(50% - 100% * 4782.5 / 1821); }   /* the whole width on a phone */
}
/* "Why Pleevi" on the light band: white cards, like the homepage's solution doors */
.psec--light .sec-lead { color: rgba(0, 0, 0, .6); }

/* ==========================================================================
   Review round, 28 Sep 2026: results, customer-type doors, works-with,
   trust, company facts, lead form, case stories, legal page
   ========================================================================== */
/* cards on light bands are white, like the solution doors */
.psec--light :where(.dcard) { background: #fff; color: #0a0a0a; border: 0; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.psec--light .dcard__desc { color: rgba(0, 0, 0, .58); }
.psec--light .dcard .ticks li { color: rgba(0, 0, 0, .68); }
.psec--light .eyebrow { color: var(--green); }
.dcard__proof { margin-top: auto; padding-top: 22px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.psec--light .dcard__proof { color: var(--green); }
.dgrid .dcard__desc { min-height: 0; }

.sec-more { margin-top: clamp(32px, 4vw, 52px); text-align: center; }
.sec-more a { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.sec-more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.sec-more a:hover i { transform: translateX(5px); }
.sec-more--pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(28px, 4vw, 56px); }
/* a story's solutions at work and its kind of site, just before More stories (Elias, 5 Oct 2026) */
.atwork__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding: 24px 0; border-block: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.atwork__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.atwork__links a, .atwork__site { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.atwork__site { color: rgba(255, 255, 255, .78); }
.atwork i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.atwork a:hover i { transform: translateX(4px); }
.psec--light .sec-more a { color: var(--green); }

/* --------------------------------------------------------------------------
   Results we're proud of: site or person photo, sector, one result, a quote
   -------------------------------------------------------------------------- */
.rcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px) {
  .rcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .rcards::-webkit-scrollbar { display: none; }
  .rcards > .rcard { flex: 0 0 min(84vw, 420px); scroll-snap-align: center; }
}
.rcard {
  display: flex; flex-direction: column;
  padding: 14px 14px 28px;
  border-radius: var(--radius);
  background: #0d0d0d; color: #fff;
  border: 1px solid rgba(255, 255, 255, .07);
  transition: transform .5s var(--ease), border-color .3s ease, opacity .55s var(--ease);
}
a.rcard:hover { transform: translateY(-6px); }
.rcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); background: #1a1a1a; }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
a.rcard:hover .rcard__media img { transform: scale(1.04); }
.rcard__media--portrait { background: #dfe3e8; }
.rcard__media--portrait img { object-position: 50% 22%; }
.rcard__tag {
  position: absolute; left: 14px; top: 14px;
  padding: 7px 13px 8px; border-radius: 7px;
  background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: #fff;
}
.rcard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 12px 0; }
.rcard__who { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.rcard__result { margin-top: 12px; font-size: clamp(22px, 1.85vw, 27px); font-weight: 600; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.rcard__sub { margin-top: 12px; font-size: 16.5px; line-height: 1.42; letter-spacing: -.015em; color: rgba(255, 255, 255, .58); }
.rcard__quote { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 16.5px; line-height: 1.45; letter-spacing: -.015em; color: rgba(255, 255, 255, .86); text-indent: -.4em; }
.rcard__by { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rcard__by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rcard__by b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; }
.rcard__by small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.3; color: rgba(255, 255, 255, .5); }
.rcard__stats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rcard__stats span { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .55); }
.rcard__stats b { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--green-soft); }
.rcard__more { margin-top: auto; padding-top: 24px; font-size: 15.5px; font-weight: 600; color: var(--green); }
.rcard__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
a.rcard:hover .rcard__more i { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Three steps (partners, contact), doors by customer type (four across)
   -------------------------------------------------------------------------- */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .steps--3 { grid-template-columns: 1fr; } }
.ugrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ugrid--4 > .ucard { grid-column: auto !important; padding: 14px 14px 26px; }
.ugrid--4 .ucard__body { padding: 22px 10px 0; }
.ugrid--4 .ucard__title { font-size: clamp(21px, 1.75vw, 26px); }
.ugrid--4 .ucard__desc { font-size: 16px; }
@media (max-width: 1100px) { .ugrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ugrid--4 { grid-template-columns: 1fr; } }
.ucard__media--art, .doors .ucard__media--art { background: #0a0e0c; }

/* --------------------------------------------------------------------------
   Product: Simulation card, trust
   -------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------
   Solutions: jump links, one case per customer type, savings by configuration
   -------------------------------------------------------------------------- */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 38px; }
.jump a { padding: 11px 18px 12px; border-radius: 7px; background: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: #000; transition: background-color .25s ease; }
.jump a:hover { background: var(--green-soft); }
.casecard {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; align-items: center; gap: 20px 32px;
  max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 14px 30px 14px 14px;
  border-radius: var(--radius); background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .3s ease, transform .5s var(--ease), opacity .55s var(--ease);
}
.casecard:hover { transform: translateY(-4px); }
.casecard__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: #1a1a1a; }
.casecard__media img { width: 100%; height: 100%; object-fit: cover; }
.casecard .eyebrow { margin-bottom: 8px; }
.casecard h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.casecard p { margin-top: 8px; font-size: 16px; line-height: 1.4; letter-spacing: -.015em; color: rgba(255, 255, 255, .58); }
.casecard__more { font-size: 15.5px; font-weight: 600; white-space: nowrap; color: var(--green); }
.psec--light .casecard { background: #fff; color: #0a0a0a; border-color: transparent; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.psec--light .casecard p { color: rgba(0, 0, 0, .58); }
.psec--light .casecard__more { color: var(--green); }
@media (max-width: 760px) { .casecard { grid-template-columns: 1fr; padding: 14px 14px 24px; } .casecard > div, .casecard__more { padding-inline: 8px; } }
.config { max-width: 980px; margin: clamp(48px, 6vw, 88px) auto 0; }
.config .row-label { margin-bottom: clamp(16px, 1.8vw, 24px); }

/* --------------------------------------------------------------------------
   Partners: portal view
   -------------------------------------------------------------------------- */
.portal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 88px); }
@media (max-width: 900px) { .portal { grid-template-columns: 1fr; } }
.portal .sec-title { text-align: left; }
.portal .sec-lead { margin-left: 0; }
.portal .ticks { margin-top: 28px; }
.portal .studio__frame img { display: block; width: 100%; height: auto; }
/* partners: all your sites on one platform (Elias, 2 Oct 2026): Studio's window on the light band, a soft shadow under it */
.portal__shot { margin: 0; overflow: hidden; border-radius: var(--radius); background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 28px 60px -28px rgba(0, 0, 0, .28), 0 10px 24px -14px rgba(0, 0, 0, .14); }
.portal__shot img { display: block; width: 100%; height: auto; }
.psec--light .portal .ticks li { color: rgba(0, 0, 0, .7); }
.portal .sec-lead, .portal .ticks li { text-wrap: pretty; }   /* no word left alone on a line */
.portal__more { margin-top: 28px; }

/* --------------------------------------------------------------------------
   About: company facts
   -------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); max-width: 1240px; margin: 0 auto; }
.fact { padding: 22px 0 24px; border-top: 1px solid rgba(255, 255, 255, .16); }
.fact span { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.fact b { display: block; margin-top: 10px; font-size: clamp(18px, 1.55vw, 22px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.lede--sm p { font-size: clamp(20px, 2vw, 28px); }

/* --------------------------------------------------------------------------
   Contact: lead form, side cards
   -------------------------------------------------------------------------- */
.contact--form { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.contact__side { display: grid; gap: 24px; }
.lform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.lform .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; color: rgba(255, 255, 255, .78); }
.field label small { font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, .45); }
.field input, .field select, .field textarea {
  width: 100%; height: 52px; padding: 0 18px;
  border-radius: 7px; border: 1px solid rgba(255, 255, 255, .14); background: #151515;
  color: #fff; font: 400 16px var(--sans); letter-spacing: -.01em; transition: border-color .2s;
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #151515 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
}
.field textarea { height: auto; min-height: 128px; padding: 14px 18px; line-height: 1.45; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field [aria-invalid="true"] { border-color: #ff8a80; }
.lform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 4px; }
.lform__foot p { max-width: 46ch; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .5); }
.lform__foot a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.lform .btn { border: 0; cursor: pointer; }
.lform__msg { grid-column: 1 / -1; min-height: 1.4em; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .62); }
.lform__msg[data-state="ok"] { color: var(--green-soft); }
.lform__msg[data-state="error"] { color: #ff8a80; }
@media (max-width: 640px) { .lform { grid-template-columns: 1fr; } }
.mini-person { display: flex; align-items: center; gap: 18px; }
.mini-person img { flex: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.side-card .dcard__title { font-size: clamp(22px, 1.9vw, 27px); }
.side-card .btn { align-self: flex-start; margin-top: 24px; }
.side-card address { margin-top: 14px; font-style: normal; font-size: 17px; line-height: 1.55; letter-spacing: -.015em; color: rgba(255, 255, 255, .7); }
.side-card address a { color: var(--green-soft); }
.side-card .ucard__more { margin-top: 22px; padding-top: 0; }
.ev-empty { max-width: 640px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.45; color: rgba(0, 0, 0, .6); }

/* --------------------------------------------------------------------------
   Case stories: problem, approach, result
   -------------------------------------------------------------------------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 88px); padding: clamp(44px, 5vw, 76px) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.story__label { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.story__label .eyebrow { margin-bottom: 14px; }
.story__label h2 { font-size: clamp(28px, 2.7vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.story__body > p { max-width: 62ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; letter-spacing: -.02em; color: rgba(255, 255, 255, .74); }
.story__body > p + p { margin-top: 1em; }
.story__body > .dgrid, .story__body > .ticks, .story__body > .tbl, .story__body > .kstats { margin-top: 32px; }
.story__body .kstats { text-align: left; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.story__body > .story__note { margin-top: 24px; font-size: 15px; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .45); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story__label { position: static; } }
.case-hero__cta { margin-top: 36px; }
.specs--case { margin-top: clamp(40px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal { max-width: 780px; margin: 0 auto; }
.legal__meta { font-size: 15px; color: rgba(255, 255, 255, .5); }
.legal h2 { margin: 52px 0 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; letter-spacing: -.01em; color: rgba(255, 255, 255, .74); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--green-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal b { color: #fff; font-weight: 600; }
.legal .tbl { margin-top: 18px; }
/* Terms and the DPA, word for word from pleevi.ai (23 Oct 2026): numbered clauses, defined terms in white */
.legal h3 { margin: 32px 0 10px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.legal strong { color: #fff; font-weight: 600; }
.legal u { text-underline-offset: 3px; }
.legal--long h2:first-of-type { margin-top: 36px; }
.legal__pdf { font-weight: 600; text-decoration: none !important; }
.legal__pdf:hover { text-decoration: underline !important; }
.legal .tbl__row { font-size: 16px; }

/* --------------------------------------------------------------------------
   Footer: company details, privacy
   -------------------------------------------------------------------------- */
.psec--tight { padding-top: clamp(24px, 3vw, 48px); }
.psec--flush { padding-bottom: 0; }   /* runs straight on into the next section */
.psec--facts { padding: clamp(8px, 1.4vw, 24px) 0 0; }
.psec--story { padding-top: 0; }
.psec--story .story:first-child { border-top: 0; }
.steps-label, .research-label { margin-top: clamp(56px, 6vw, 88px); }
.psec--light .step { border-color: rgba(0, 0, 0, .14); }
.psec--light .step__d { color: rgba(0, 0, 0, .6); }
.faq__item p a { color: var(--green-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal h3 { margin: 26px 0 6px; font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.legal h3 + ul { margin-top: 6px; }
.casecard--text { grid-template-columns: minmax(0, 1fr) auto; padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3vw, 40px); }
@media (max-width: 760px) { .casecard--text { grid-template-columns: 1fr; } .casecard--text > div, .casecard--text .casecard__more { padding-inline: 0; } }
.rcards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
.bigimg--art { background: #0a0e0c; }
.bigimg--art img { object-fit: contain; }
.results { padding-bottom: clamp(40px, 5vw, 80px); }
.config .sol__note { margin: 18px 0 0; }
.portal .eyebrow { margin-bottom: 20px; }
.story__body .dgrid { gap: 16px; }
.story__body .dcard { padding: clamp(22px, 2vw, 30px); }
.story__body .dcard__title { font-size: clamp(19px, 1.5vw, 22px); }
.story__body .dcard .ticks li, .story__body .dcard__desc { font-size: 15.5px; }
.story__body .dcard .ticks { gap: 10px; margin-top: 16px; }
@media (max-width: 1180px) { .story__body .dgrid--3 { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .contact--form { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Product: works with, a few names rather than the full list
   -------------------------------------------------------------------------- */
.brandwall {
  list-style: none; margin: 0;
  padding: clamp(30px, 3.6vw, 50px) clamp(20px, 3vw, 40px) clamp(22px, 2.6vw, 32px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center;
  gap: clamp(26px, 3vw, 42px) 18px;
  border-radius: var(--radius); background: #fff; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28);
}
.brandwall li { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; }
.brandwall img { width: auto; height: calc(var(--h) * 1px); max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .35s ease, opacity .35s ease; }
.brandwall .brandwall__light img { filter: grayscale(1) brightness(.62); }   /* bright green logos, as grey as the others */
@media (hover: hover) { .brandwall li:hover img { filter: grayscale(0); opacity: 1; } }
.brandwall .brandwall__more { grid-column: 1 / -1; height: auto; margin-top: -2px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; color: rgba(0, 0, 0, .42); }
@media (max-width: 560px) { .brandwall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; } .brandwall img { height: calc(var(--h) * .7px); } }

/* ==========================================================================
   After companion.energy (28 Sep 2026): booking window, founder pill,
   product tiles, trust icons
   ========================================================================== */
/* booking window: Cal.com in an iframe, opened on the page */
html.book-open { overflow: hidden; }
.book { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); }
.book[hidden] { display: none; }
/* the backdrop and the window fade on their own, not the whole: a fading parent switched the blur off at once, so the
   page snapped sharp as the window closed (Elias, 30 Oct 2026: "make the closing smooth") */
.book__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .32s ease; }
.book.is-open .book__backdrop { opacity: 1; }
/* one dark surface, the colour of Cal.com's dark page (#111), so no light edge
   shows around the calendar; the bar keeps our controls off Cal.com's own */
.book__panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1040px, 100%); height: min(800px, 100%); border-radius: var(--radius); overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 120px -30px rgba(0, 0, 0, .75); opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .32s ease, transform .34s var(--ease); }
.book.is-open .book__panel { opacity: 1; transform: none; }
.book__panel:focus { outline: none; }
.book__bar { display: flex; align-items: center; gap: 20px; min-height: 60px; padding: 0 12px 0 24px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.book__title { margin: 0 auto 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.book__out { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .6); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 4px; transition: color .2s; }
.book__out:hover { color: #fff; }
.book__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s, color .2s; }
.book__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.book__close:hover, .book__close:focus-visible { background: var(--green); color: #0a0a0a; outline: none; }   /* no ring round the cross (Elias, 30 Oct 2026); the keyboard gets the hover's fill */
.book__body { position: relative; min-height: 0; background: #111; }
.book__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; color-scheme: dark; opacity: 0; pointer-events: none; transition: opacity .35s ease; }   /* not hidden while it loads: a hidden frame is held back, and would lay out only once shown */
.book.is-loaded .book__frame { pointer-events: auto; }
.book.is-loaded .book__frame { opacity: 1; }
.book__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 15px; color: rgba(255, 255, 255, .5); }
.book.is-loaded .book__loading { display: none; }
@media (max-width: 640px) { .book { padding: 0; } .book__panel { width: 100%; height: 100%; border-radius: 0; box-shadow: none; } .book__bar { gap: 16px; min-height: 56px; padding-left: 18px; } }
@media (prefers-reduced-motion: reduce) { .book, .book__backdrop, .book__panel, .book__frame { transition: none; } }

/* founder pill: the person behind the button */
.cta__actions { flex-direction: column; gap: 18px; }
.founder { display: inline-flex; align-items: center; gap: 16px; padding: 10px 10px 10px 10px; border-radius: var(--radius); text-align: left; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.founder img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.founder p { padding-right: 10px; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; color: rgba(255, 255, 255, .72); }
.founder b { font-weight: 600; color: #fff; }
.founder .btn { flex: none; }
@media (max-width: 560px) { .founder { flex-wrap: wrap; justify-content: center; padding: 16px 16px 14px; border-radius: var(--radius); text-align: center; } .founder p { padding: 0; flex-basis: calc(100% - 72px); text-align: left; } .founder .btn { width: 100%; } }

/* trust: a line icon per point */

/* ==========================================================================
   Page stress test (29 Sep 2026): savings metric, installer path, solo quote,
   case results up front
   ========================================================================== */
.doors__aside { margin-top: clamp(32px, 4vw, 52px); text-align: center; font-size: clamp(16px, calc(15.26px + .19vw), 18px); letter-spacing: -.01em; color: rgba(0, 0, 0, .6); }
.doors__aside a { display: table; margin: 8px auto 0; font-weight: 600; color: var(--green); }   /* on its own line, centred under the question (Elias, 15 Oct 2026) */
.doors__aside i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.doors__aside a:hover i { transform: translateX(4px); }
.quote--solo { max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; gap: 28px; }
.spec--result .spec__val { color: var(--green-soft); }

/* --------------------------------------------------------------------------
   Product: how it works, the homepage illustration opened up (hood.js picks the step)
   -------------------------------------------------------------------------- */
.hood { width: 100%; }
/* the hero: the headline and the illustration exactly where the homepage has them (the stage is also .schematic, so it
   takes the homepage illustration's size), and the four parts in a row under it (Elias, 7 Oct 2026) */
.hero--tour { padding-bottom: clamp(40px, 5vw, 72px); }
.hero--tour .hood__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 1240px); margin: 14px auto 0; padding-inline: var(--gutter); }
/* Product's headline, Four parts, one EMS, is shorter than the homepage's: on phones it keeps the homepage headline's
   height (three lines up to 446 px, four below 326 px), so the drawing sits exactly where it does there */
@media (max-width: 446px) { .hero--tour .hero__title { padding-block: .53em; } }   /* its two lines centred in the homepage's three */
@media (max-width: 325px) { .hero--tour .hero__title { padding-block: 1.06em; } }   /* and in its four */
/* one bracket over the four parts, Pleevi EMS in its middle: the EMS is the four together (Elias, 8 Oct 2026) */
@media (max-width: 960px) { .hero--tour .hood__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hero--tour .hood__steps { grid-template-columns: 1fr; } }
.hood__stage { position: relative; aspect-ratio: 2053 / 1329; overflow: hidden; background: #000; isolation: isolate; }
/* no card and no frame: the stage sits on the page's black */
.hood__svg { display: block; width: 100%; height: 100%; }
.hood__svg text { font-family: var(--sans); }

/* the camera (.hood__cam) is moved by hood.js */
.hood__route { stroke: none; }
.hood__route.wire { stroke: #1ec296; stroke-width: 7.7; stroke-linecap: round; stroke-linejoin: round; }   /* as on the homepage: these two lines are not in the artwork */
.hood__trail { fill: none; stroke: var(--green-glow); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(61, 255, 181, .9)); }
.hood__halo { fill: url(#hood-halo-g); }   /* a gradient, not a blur filter: blurs made the Edge close-up stutter */
.hood__core { fill: #5affc0; stroke: #fff; stroke-width: 4.5; }
/* a slight focus for the engine, Studio and the app: the rest of the site stays in view, dimmed around them; the site
   and Edge steps show everything */
.hood__dim { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.hood[data-step="engine"] .hood__dim, .hood[data-step="studio"] .hood__dim, .hood[data-step="app"] .hood__dim { opacity: .8; visibility: visible; }

/* the engine opens: lid up, three layers rise out of the box */
.hood__cavity { opacity: 0; visibility: hidden; transition: opacity .2s ease .55s, visibility .2s linear .55s; }
.hood__rim { fill: none; stroke: #1ec296; stroke-width: 2; vector-effect: non-scaling-stroke; }
/* the lid, the layers and the focus move in hood.js, through their transform attribute, in the drawing's own units */
.hood__lid { transition: opacity .8s ease; }
.hood[data-step="app"] .hood__lid { opacity: 0; }                /* the closed lid is drawn over the focus layer: let it dim with the rest */
.hood__lidside { fill: #0b0f0d; stroke: #1ec296; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.hood__layer { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.hood__plate { fill: rgba(9, 28, 21, .72); stroke: #3dffb5; stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: url(#hood-glow); }
.hood__pat { fill: none; stroke: #3dffb5; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hood__pat--dash { stroke-dasharray: 3 7; opacity: .7; }
.hood__dot { fill: #3dffb5; }
.hood__pat--thin { stroke-width: 1.4; opacity: .45; }
.hood__tick { fill: #3dffb5; transform-box: fill-box; transform-origin: center; animation: hood-tick 1s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
.hood__blk { animation: hood-adjust 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.hood__pat--dash { animation: hood-dash 1.2s linear infinite; }
@keyframes hood-tick { 0%, 60%, 100% { opacity: .35; transform: scale(.8); } 25% { opacity: 1; transform: scale(1.25); } }
@keyframes hood-adjust { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes hood-dash { to { stroke-dashoffset: -20; } }
.hood__blk { fill: rgba(61, 255, 181, .5); }
.hood__guides line { stroke: rgba(61, 255, 181, .32); stroke-width: 1.2; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.hood__guides { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.hood__labels { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.hood__lead { stroke: rgba(61, 255, 181, .7); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hood__pin { fill: #3dffb5; }
.hood__scrim { fill: #000; opacity: .82; }
.hood__lt { font-size: 34px; font-weight: 700; letter-spacing: -.02em; fill: #fff; }
.hood__ls { font-size: 23px; font-weight: 500; letter-spacing: -.01em; fill: rgba(255, 255, 255, .62); }
.hood[data-step="engine"] .hood__cavity { opacity: 1; visibility: visible; transition-delay: .75s; }
.hood[data-step="engine"] .hood__lidside { opacity: 1; visibility: visible; transition-delay: .75s; }
.hood[data-step="engine"] .hood__layer { opacity: 1; visibility: visible; }
.hood[data-step="engine"] .hood__layer--steer { transition-delay: 1.05s; }
.hood[data-step="engine"] .hood__layer--optimize { transition-delay: 1.2s; }
.hood[data-step="engine"] .hood__layer--forecast { transition-delay: 1.35s; }
.hood[data-step="engine"] .hood__guides { opacity: 1; visibility: visible; transition-delay: 1.2s; }
/* the call-outs come in once the top layer has settled (it rises from 1.35 s to 1.95 s) */
.hood[data-step="engine"] .hood__labels { opacity: 1; visibility: visible; transition: opacity .5s ease 1.95s, visibility .5s linear 1.95s; }

/* Studio and the Driver App rise beside the box; data flows to them */
.hood__panel { opacity: 0; visibility: hidden; transform: translateY(40px); transition: opacity .4s ease, transform .6s var(--ease), visibility .4s; }
.hood[data-step="studio"] .hood__panel--studio, .hood[data-step="app"] .hood__panel--app { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .7s, transform .9s var(--ease) .7s, visibility .6s linear .7s; }
.hood__win { fill: #1b1b1b; filter: url(#hood-shadow); }
.hood__url { font-size: 20px; fill: #9b9b9b; }
.hood__conn { fill: none; stroke: #3dffb5; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 13; vector-effect: non-scaling-stroke; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; animation: hood-flow .9s linear infinite; }
.hood[data-step="studio"] .hood__conn--studio, .hood[data-step="app"] .hood__conn--app { opacity: 1; visibility: visible; transition: opacity .5s ease 1s, visibility .5s linear 1s; }
.hood__cars { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.hood__cars circle:nth-child(even) { fill: #3dffb5; }
.hood[data-step="app"] .hood__cars { opacity: 1; visibility: visible; transition: opacity .5s ease .9s, visibility .5s linear .9s; }
/* moving patterns only run in the step that shows them */
.hood:not([data-step="engine"]) :is(.hood__tick, .hood__blk, .hood__pat--dash), .hood:not([data-step="studio"]):not([data-step="app"]) .hood__conn, .hood:not([data-step="edge"]) .hood__link { animation-play-state: paused; }
@keyframes hood-flow { to { stroke-dashoffset: -15; } }

/* the four steps */
.hood__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }   /* a little tighter (Elias, 5 Oct 2026); the drawing is centred beside the list */
.hood__step {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%;
  padding: 13px 20px 15px; border: 0; border-radius: var(--radius); background: transparent; color: #fff; text-align: left; cursor: pointer;
  font: inherit; transition: background-color .3s ease;
}
.hood__step:hover { background: rgba(255, 255, 255, .03); }
.hero--tour .hood__step { align-content: start; height: 100%; padding: 16px 18px 16px; }
.hood__step[aria-selected="true"] { background: #0d0d0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hood__step:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 2px; }
.hood__t { font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.02em; }
.hood__d { margin-top: 6px; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .45); transition: color .3s; }
.hood__step[aria-selected="true"] .hood__d { color: rgba(255, 255, 255, .74); }
.hood__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hood__chips i { padding: 5px 10px 6px; border-radius: 6px; background: rgba(7, 182, 127, .14); font-style: normal; font-size: 13px; font-weight: 500; color: var(--green); }
.hood__bar { display: block; height: 2px; margin-top: 14px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; visibility: hidden; }
.hood__step[aria-selected="true"] .hood__bar { visibility: visible; }
.hood__bar i { display: block; width: 100%; height: 100%; background: var(--green-soft); transform: scaleX(0); transform-origin: 0 50%; }
@media (max-width: 960px) {
  .hood__lt { font-size: 62px; }
  .hood__ls { display: none; }
  .hood__d { font-size: 15px; }
}
@media (max-width: 600px) {
  .hood__step, .hero--tour .hood__step { padding: 12px 16px 13px; }
  .hood__step:not([aria-selected="true"]) .hood__d { display: none; }   /* phones: only the chosen part's text */
}
/* reduced motion: no tour and no travel, the steps still switch */
.hood--still .hood__bar { display: none; }
.hood--still .hood__lid, .hood--still .hood__layer, .hood--still .hood__panel, .hood--still .hood__dim { transition: none !important; }
.hood--still .hood__conn, .hood--still .hood__link, .hood--still .hood__tick, .hood--still .hood__blk, .hood--still .hood__pat--dash { animation: none; }
/* step 1: the electrical cabinet (door, controller, lights and data link are moved by hood.js) */
.hood__door-face { fill: #e4e7ea; stroke: #cfd4d9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hood__door.is-open .hood__door-face { fill: #cdd2d7; }
.hood__door.is-open .hood__door-out { opacity: 0; }
.hood__ledcore { fill: #3a4658; transition: fill .15s ease; }
.hood__led.on .hood__ledcore { fill: #3dffb5; }
.hood__ledglow { fill: url(#hood-led-g); opacity: 0; transition: opacity .15s ease; }
.hood__led.on .hood__ledglow { opacity: 1; }
.hood__led--pipe .hood__ledcore { fill: none; stroke: transparent; stroke-width: .5; stroke-linecap: round; transition: stroke .15s ease; }   /* the real unit's light pipes (22 Oct 2026) */
.hood__led--pipe.on .hood__ledcore { stroke: #3dffb5; }
.hood__link { fill: none; stroke: #3dffb5; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 13; vector-effect: non-scaling-stroke; opacity: 0; animation: hood-flow .9s linear infinite reverse; }   /* the data flows from the engine into the cabinet (Elias, 14 Oct 2026) */
.hood__elbl { opacity: 0; }
.hood__et { font-size: 13px; font-weight: 700; letter-spacing: -.02em; fill: #fff; }
.hood__es { font-size: 8.5px; font-weight: 500; letter-spacing: -.01em; fill: rgba(255, 255, 255, .66); }
@media (max-width: 960px) { .hood__et { font-size: 24px; } .hood__es { display: none; } }

/* About: investors at one optical size (a squarer logo is a little taller), Innoviris centred below */
.investors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 3.4vw, 48px) clamp(44px, 6.4vw, 96px); max-width: 1100px; margin: 0 auto; }
.investors__break { flex-basis: 100%; height: 0; }
.investors a { display: block; }
.investors img { display: block; width: auto; height: calc(var(--h) * 1px); mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); opacity: .72; transition: opacity .3s, filter .3s; }
.investors a:hover img { opacity: 1; filter: none; }
@media (max-width: 560px) { .investors { gap: 28px 36px; } .investors img { height: calc(var(--h) * .72px); } }

/* --------------------------------------------------------------------------
   Partners: split hero with the Edge, proof row, two tracks
   -------------------------------------------------------------------------- */
.phero-split { padding: calc(var(--nav-h) + clamp(40px, 6vw, 96px)) 0 clamp(28px, 4vw, 64px); }
.phero-split__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
@media (max-width: 900px) { .phero-split__grid { grid-template-columns: 1fr; } }
.phero-split__text > * { animation: rise .7s var(--ease) both; }
.phero-split__text > :nth-child(2) { animation-delay: .07s; }
.phero-split__text > :nth-child(3) { animation-delay: .14s; }
.phero-split__text > :nth-child(4) { animation-delay: .21s; }
.phero-split .eyebrow { margin-bottom: 24px; }
.phero-split__title { margin: 0; font-weight: 600; font-size: clamp(34px, calc(24.86px + 2.476vw), 62px); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.phero-split__title em { font-style: normal; color: var(--green-soft); }
.phero-split__lead { max-width: 46ch; margin-top: 26px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.42; letter-spacing: -.02em; color: rgba(255, 255, 255, .66); }
.phero-split__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.edgecard { margin: 0; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px) clamp(24px, 2.6vw, 34px); border-radius: var(--radius);
  background: radial-gradient(70% 58% at 50% 40%, rgba(7, 182, 127, .16), transparent 72%), #0b0b0b; border: 1px solid rgba(255, 255, 255, .07); animation: rise .8s var(--ease) .18s both; }
.edgecard img { display: block; width: min(78%, 360px); height: auto; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.edgecard figcaption { display: grid; gap: 4px; margin-top: 18px; text-align: center; }
.edgecard b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.edgecard span { font-size: 15px; letter-spacing: -.01em; color: rgba(255, 255, 255, .55); }

.proofrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid rgba(255, 255, 255, .12); }
.proof { display: grid; gap: 8px; align-content: start; padding: clamp(22px, 2.6vw, 36px) clamp(16px, 2.2vw, 36px); }
.proof + .proof { border-left: 1px solid rgba(255, 255, 255, .12); }
.proof b { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--green-soft); }
.proof span { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.4; letter-spacing: -.01em; color: rgba(255, 255, 255, .66); }
@media (max-width: 700px) { .proofrow { grid-template-columns: 1fr; } .proof + .proof { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); } }
.partner-proof .logos { margin-top: clamp(44px, 5vw, 72px); }

.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
@media (max-width: 800px) { .tracks { grid-template-columns: 1fr; } }
.track { padding: clamp(26px, 2.8vw, 40px); border-radius: var(--radius); background: #fff; color: #0a0a0a; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.track__title { font-size: clamp(22px, 1.9vw, 27px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.track__list { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: track; }
.track__list li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; padding-bottom: 22px; counter-increment: track; }
.track__list li:last-child { padding-bottom: 0; }
.track__list li::before { content: counter(track); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: #e2f4ec; color: var(--green); font-size: 15px; font-weight: 700; }
.track__list li:not(:last-child)::after { content: ""; position: absolute; left: 16.5px; top: 42px; bottom: 6px; width: 1px; background: rgba(0, 0, 0, .12); }
.track__list b { padding-top: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.track__list span { margin-top: 4px; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; color: rgba(0, 0, 0, .6); }
.sec-cta--split { align-items: center; gap: 14px 28px; }
.sec-cta__link { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.sec-cta__link i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.sec-cta__link:hover i { transform: translateX(5px); }
.psec--light .sec-cta__link { color: var(--green); }

/* --------------------------------------------------------------------------
   Home: results as full-bleed image cards, how it works as three product cards
   -------------------------------------------------------------------------- */
.proofcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) {
  .proofcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .proofcards::-webkit-scrollbar { display: none; }
  .proofcards > .proofcard { flex: 0 0 min(84vw, 400px); scroll-snap-align: center; }
}
.proofcard { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(460px, 40vw, 580px); margin: 0;
  padding: clamp(22px, 2.2vw, 32px); border-radius: var(--radius); overflow: hidden; background: #111; color: #fff; transition: transform .5s var(--ease), opacity .55s var(--ease); }
.proofcard__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.proofcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .9) 100%); }
.proofcard::after { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, transparent 36%, #000 66%); mask-image: linear-gradient(180deg, transparent 36%, #000 66%); }
a.proofcard:hover .proofcard__bg { transform: scale(1.04); }
.psec--light .proofcard { box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.proofcard__tag { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.proofcard__result { margin-top: 12px; font-size: clamp(24px, 2.1vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.proofcard__quote { margin-top: 14px; font-size: clamp(18px, 1.45vw, 21px); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; text-indent: -.4em; }
.proofcard__stats { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; }
.proofcard__stats span { display: grid; gap: 5px; font-size: 13.5px; line-height: 1.3; color: rgba(255, 255, 255, .68); }
.proofcard__stats b { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--green-soft); }   /* the site's green, not a lighter one (Elias, 23 Oct 2026) */
.proofcard__by { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; margin-top: 18px; font-size: 15px; letter-spacing: -.01em; }
.proofcard__face { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .24); }
.proofcard__by b { align-self: end; font-weight: 600; }
.proofcard__by span { align-self: start; color: rgba(255, 255, 255, .62); }
.proofcard__more { margin-top: 20px; font-size: 15.5px; font-weight: 600; }
.proofcard__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
a.proofcard:hover .proofcard__more i { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Product: why Pleevi builds its own controller (a light band with Works with)
   -------------------------------------------------------------------------- */
.edgewhy__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
@media (max-width: 900px) { .edgewhy__grid { grid-template-columns: 1fr; } }
.edgewhy .eyebrow { margin-bottom: 20px; }
.edgewhy .sec-lead { max-width: 46ch; margin-left: 0; }
.edgewhy .ticks li { color: rgba(0, 0, 0, .7); }
.edgecard--light { animation: none; background: radial-gradient(70% 58% at 50% 40%, rgba(7, 182, 127, .12), transparent 72%), #fff; border: 0; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.edgecard--light img { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .22)); }
.edgecard--light b { color: #0a0a0a; }
.edgecard--light span { color: rgba(0, 0, 0, .55); }

/* --------------------------------------------------------------------------
   Partners: installers, integrators and charge point operators; one email sign-up, in the hero
   -------------------------------------------------------------------------- */
.pform { justify-content: flex-start; max-width: 580px; margin: clamp(26px, 3vw, 36px) 0 0; }
.cta .pform { justify-content: center; margin-inline: auto; }
.phero .pform__note { margin-top: 16px; }
.ptypes .dcard .eyebrow { display: block; }
.pform__note { margin-top: 0; font-size: 15px; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .55); }
.pform__note a { font-weight: 600; color: var(--green-soft); }
.pform__note--center { text-align: center; }
.partner-proof .logos { margin-top: 0; }
.quote--first { margin-top: 0; }
.sec-head--faq { margin-top: clamp(64px, 7vw, 112px); }

/* ==========================================================================
   Solutions and use cases (tools/pages/build.py): dropdowns, phone menu,
   split heroes, the six solution visuals, link cards, bento, tiers, rows
   ========================================================================== */

/* ---- navigation: the current section --------------------------------------- */
.nav__dd.is-current > a { color: #fff; }
.on-light .nav__dd.is-current > a { color: #000; }

/* ---- navigation: phone menu -------------------------------------------- */
.nav__burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 1.8px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), top .3s var(--ease), background-color .3s; }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.on-light .nav__burger span { background: #000; }
.mnav { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; overflow-y: auto; background: #050505; border-top: 1px solid rgba(255, 255, 255, .06); }
.mnav[hidden] { display: none; }
.mnav__inner { display: flex; flex-direction: column; padding: 18px var(--gutter) 40px; }
.mnav__top { padding: 14px 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mnav__label { display: block; margin: 22px 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
a.mnav__label::after { content: " →"; letter-spacing: 0; }   /* a group's name opens its overview */
.mnav__list { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mnav__list a { display: block; padding: 10px 0; font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: rgba(255, 255, 255, .88); }
.mnav__cta { margin-top: 28px; justify-content: center; text-align: center; }
html.mnav-open { overflow: hidden; }
html.mnav-open .nav { background: #050505; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* a blurred bar would trap the fixed panel inside it */
html.mnav-open .nav__logo img { filter: none !important; }
html.mnav-open .nav__burger span { background: #fff; }
@media (max-width: 1079px) { .nav__burger { display: block; } }
@media (max-width: 900px) { .nav__right > .btn { display: none; } }

/* ---- split hero (solution and use-case pages) ---------------------------- */
.shero { padding: calc(var(--nav-h) + clamp(36px, 5vw, 80px)) 0 clamp(24px, 3vw, 48px); }
.shero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
@media (max-width: 960px) { .shero__grid { grid-template-columns: 1fr; } }
.shero__text > * { animation: rise .7s var(--ease) both; }
.shero__text > :nth-child(2) { animation-delay: .06s; } .shero__text > :nth-child(3) { animation-delay: .12s; }
.shero__text > :nth-child(4) { animation-delay: .18s; } .shero__text > :nth-child(5) { animation-delay: .24s; } .shero__text > :nth-child(6) { animation-delay: .3s; }
.shero .eyebrow { margin-bottom: 18px; }
.shero__title { font-weight: 600; font-size: clamp(36px, calc(26.34px + 2.476vw), 62px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.shero__title em { font-style: normal; color: var(--green-soft); }
.shero__lead { max-width: 46ch; margin-top: 24px; font-size: clamp(17px, calc(15.51px + .381vw), 21px); line-height: 1.42; letter-spacing: -.02em; color: rgba(255, 255, 255, .64); }
.shero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.shero__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: #111; }
.shero__media video, .shero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a solution's page: the words across the top, the title on the left and the lead on the right, then the day at a
   real site, from this solution's angle (Elias, 2 Oct 2026) */
.shero--day .shero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; margin-bottom: clamp(36px, 4.4vw, 64px); }
@media (max-width: 960px) { .shero--day .shero__grid { grid-template-columns: 1fr; gap: 0; } }
.shero__side > * { animation: rise .7s var(--ease) .18s both; }
.shero__side > :nth-child(2) { animation-delay: .24s; }
.shero--day .shero__lead { margin-top: 0; }
@media (max-width: 960px) { .shero--day .shero__lead { margin-top: 24px; } }
.shero--day .vs { margin-bottom: 0; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 14px; letter-spacing: -.005em; color: rgba(255, 255, 255, .45); }
.crumb a { color: rgba(255, 255, 255, .7); transition: color .2s; }
.crumb a:hover { color: var(--green-soft); }
.crumb [aria-current] { color: rgba(255, 255, 255, .45); }

/* ---- chips ------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips--center { justify-content: center; }
.chip { display: inline-flex; align-items: center; padding: 7px 12px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: rgba(255, 255, 255, .78); }
.chip--link { transition: border-color .2s, color .2s, background-color .2s; }
.chip--link:hover { border-color: rgba(7, 182, 127, .6); color: #fff; background: rgba(7, 182, 127, .1); }
.psec--light .chip { background: #fff; border-color: rgba(0, 0, 0, .08); color: rgba(0, 0, 0, .7); }

/* ---- numbers under the hero --------------------------------------------- */
.kstats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .kstats--3 { grid-template-columns: 1fr; gap: 28px; } }
.kstats--3 .kstat__cap { max-width: 22ch; margin: 0 auto; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.35; color: rgba(255, 255, 255, .62); }

/* ---- how it works: feature cards ---------------------------------------- */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .feats { grid-template-columns: 1fr; } }
.feat { display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--radius); background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .07); }
.feat__title { margin-top: 18px; font-size: clamp(22px, 1.9vw, 27px); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; }
.feat__desc { margin-top: 12px; font-size: 16.5px; line-height: 1.45; letter-spacing: -.015em; color: rgba(255, 255, 255, .6); }
.feat .ticks { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); }
.feat .ticks li { font-size: 15.5px; }

/* ---- link cards (use cases on solution pages, solutions on use-case pages) -- */
.linkcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .linkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .linkcards { grid-template-columns: 1fr; } }
.linkcard { display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: var(--radius); background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .07); transition: transform .45s var(--ease), border-color .3s, opacity .55s var(--ease); }
.linkcard.reveal.is-in:hover, .linkcard:hover { transform: translateY(-4px); }
.linkcard__name { font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.linkcard__line { margin-top: 8px; font-size: 15px; line-height: 1.42; letter-spacing: -.01em; color: rgba(255, 255, 255, .56); }
.linkcard__more { margin-top: auto; padding-top: 20px; font-size: 14.5px; font-weight: 600; color: var(--green-soft); }
.linkcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
.linkcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .linkcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .linkcards--2, .linkcards--4 { grid-template-columns: 1fr; } }
.psec--light .linkcard { background: #fff; border: 0; color: #0a0a0a; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.psec--light .linkcard__line { color: rgba(0, 0, 0, .55); }
.psec--light .linkcard__more { color: var(--green); }
.linkcard__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.linkcard:hover .linkcard__more i { transform: translateX(4px); }

/* ---- the story spotlight and the other solutions ------------------------ */
.rcards--one { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin-inline: auto; }
.rcards--one .rcard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 32px; align-items: center; }
.rcards--one .rcard__body { padding: 16px 20px 16px 0; }
@media (max-width: 760px) { .rcards--one .rcard { grid-template-columns: 1fr; } .rcards--one .rcard__body { padding: 24px 12px 0; } }
/* Pleevi Stories: the first story across the width, with the customer's words */
.rcards--feature { max-width: 1180px; }
.rcards--feature .rcard__result { font-size: clamp(26px, calc(20.06px + 1.524vw), 42px); line-height: 1.08; }
.rcards--feature .rcard__quote { font-size: clamp(17px, calc(15.51px + .381vw), 21px); }
.rcard__media--art { background: #0a0e0c; }
.rcard__media--art img { object-fit: contain; }

/* ---- the challenge ------------------------------------------------------ */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 48px); }
.pains--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* industry: four problems, DSO compliance added (6 Nov 2026) */
@media (max-width: 1100px) { .pains--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pains { grid-template-columns: 1fr; } }
.pain { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.pain__title { margin-top: 20px; font-size: clamp(21px, 1.8vw, 25px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.pain__desc { margin-top: 10px; max-width: 38ch; font-size: 16.5px; line-height: 1.45; letter-spacing: -.015em; color: rgba(255, 255, 255, .58); }
.psec--light .tbl { margin-top: clamp(48px, 5vw, 72px); }
.sol__note--flat { margin: 18px 0 0; }
.psec--light .sol__note--flat { color: rgba(0, 0, 0, .5); }

/* ---- solutions overview: bento ------------------------------------------ */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } }
.bento__card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .08); transition: transform .45s var(--ease), border-color .3s, opacity .55s var(--ease); }
.bento__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card opens its solution; the switch sits above it */
.bento__link:focus-visible { outline: none; }
.bento__card:has(.bento__link:focus-visible) { outline: 2px solid var(--green-soft); outline-offset: 3px; }
.bento__card.reveal.is-in:hover, .bento__card:hover { transform: translateY(-5px); }
.bento__viz { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.bento__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.bento__name { font-size: clamp(22px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.03em; }
.bento__line { margin-top: 8px; font-size: 16px; line-height: 1.42; letter-spacing: -.015em; color: rgba(255, 255, 255, .6); }
.bento__stat { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14.5px; line-height: 1.35; color: rgba(255, 255, 255, .55); }
.bento__stat b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--green-soft); }
.bento__more { margin-top: auto; padding-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--green-soft); }
.bento__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.bento__card:hover .bento__more i { transform: translateX(4px); }

/* ---- use-cases overview: rows ------------------------------------------- */
.ucrows { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.ucrow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--radius); background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .08); scroll-margin-top: calc(var(--nav-h) + 24px); }
.ucrow--flip .ucrow__media { order: 2; }
@media (max-width: 900px) { .ucrow { grid-template-columns: 1fr; } .ucrow--flip .ucrow__media { order: 0; } }
.ucrow__media { position: relative; min-height: 360px; overflow: hidden; background: #111; }
.ucrow__media img { transition: transform .7s var(--ease); }
.ucrow:has(.ucrow__links a:hover, .ucrow__links a:focus-visible) .ucrow__media img { transform: scale(1.04); }   /* Explore … zooms its photo a little (Elias, 23 Oct 2026) */
.ucrow__media video, .ucrow__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .ucrow__media { min-height: 0; aspect-ratio: 16 / 10; } }
.ucrow__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 56px); }
.ucrow__body .eyebrow { margin-bottom: 16px; }
.ucrow__title { font-size: clamp(28px, 2.9vw, 42px); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.ucrow__title em { font-style: normal; color: var(--green-soft); }
.ucrow__lead { margin-top: 16px; max-width: 52ch; font-size: 16.5px; line-height: 1.5; letter-spacing: -.015em; color: rgba(255, 255, 255, .62); }
.ucrow__result { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .58); }
.ucrow__result b { margin-right: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--green-soft); }
.ucrow__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 24px; }

/* ---- scenarios ---------------------------------------------------------- */

/* ---- homepage: what Pleevi does ----------------------------------------- */
.hsol .linkcards { margin-top: 0; }

/* ---- one path per page: in-place solutions, fall-back flex, the next page -- */
.hows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 40px); }
@media (max-width: 1000px) { .hows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hows { grid-template-columns: 1fr; } }
.how { padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .14); }
.how__name { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.025em; color: #0a0a0a; }
.how__text { margin-top: 10px; font-size: 16px; line-height: 1.45; letter-spacing: -.015em; color: rgba(0, 0, 0, .6); }
a.how--link { display: flex; flex-direction: column; color: inherit; transition: border-color .3s ease; }   /* each job opens its solution (Elias, 5 Oct 2026) */
a.how--link:hover { border-top-color: var(--green); }
.how__more { margin-top: auto; padding-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--green); }
.how__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
a.how--link:hover .how__more i { transform: translateX(4px); }
.fbf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
@media (max-width: 960px) { .fbf { grid-template-columns: 1fr; } }
.fbf .eyebrow { margin-bottom: 18px; }
.fbf .sec-lead { max-width: 46ch; margin-left: 0; }
.fbf .ticks li { color: rgba(0, 0, 0, .7); }
.fbf__ticks { margin: 0; }
.pager { padding: 0 0 clamp(40px, 5vw, 72px); }
.pager__link { display: grid; gap: 6px; padding: clamp(24px, 3vw, 36px) 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.pager__label { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.pager__name { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.035em; color: #fff; transition: color .25s; }
.pager__name i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.pager__link:hover .pager__name { color: var(--green-soft); }
.pager__link:hover .pager__name i { transform: translateX(6px); }
.pager__line { font-size: 16px; letter-spacing: -.015em; color: rgba(255, 255, 255, .5); }

/* ---- About: the co-founders ----------------------------------------------- */
/* the photo uncropped (3:2) and no wider than 960 px, so the 1920 px file stays sharp on 2x screens;
   each name sits on its person's side: Robin left, Wout right */
.founders { max-width: 960px; margin: 0 auto; }
.founders__media { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius); background: #111; }
.founders__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founders__names { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-inline: 4px; }
.founders__names a { display: grid; gap: 4px; }
.founders__names a:last-child { text-align: right; }
.founders__names b { font-size: clamp(16px, calc(14.51px + .381vw), 20px); font-weight: 600; letter-spacing: -.025em; color: #fff; transition: color .25s; }
.founders__names span { font-size: clamp(13px, calc(12.26px + .19vw), 15px); letter-spacing: -.01em; color: rgba(255, 255, 255, .55); }
.founders__names i { font-style: normal; font-weight: 500; color: var(--green-soft); }
.founders__names b { white-space: nowrap; }
@media (max-width: 420px) { .founders__names b { font-size: 15px; } .founders__names span { font-size: 13px; } }
.founders__names a:hover b { color: var(--green-soft); }

/* ---- screen-reader text ----------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* home, "What Pleevi does": one day at a demo site, without and with Pleevi (assets/compare.js, data from
   tools/demo/model.py). On the page's black, with no panel or frame round it: the title, the site and the switch, one
   mirrored chart on a canvas (what the site uses above the time axis, where it comes from below it, against the 70 kW
   connection), the day told in four steps under it, then the day's numbers. The switch's thumb slides with the morph,
   and the steps' words cross-fade when the mode changes. */
.vs { margin-bottom: clamp(48px, 6vw, 88px); color: #fff; }
.vs__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 32px; margin-bottom: clamp(18px, 2.2vw, 28px); }   /* the title and the switch on one row, the description and the legend the next (Elias, 2 Oct 2026) */
.vs__title { font-size: clamp(21px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.vs__site { max-width: 64ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .58); }
.vs__switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 7px; background: rgba(255, 255, 255, .08); }
.vs__switch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 7px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 18px -8px rgba(0, 0, 0, .6); transition: transform .6s var(--ease), background-color .6s ease; }
.vs.is-with .vs__switch::before { background: var(--green-soft); }                 /* With Pleevi is on the left, and chosen first (review, 7 Oct 2026) */
.vs:not(.is-with) .vs__switch::before { transform: translateX(100%); }
.vs__switch button { position: relative; z-index: 1; padding: 10px 18px 11px; border: 0; border-radius: 7px; background: transparent; color: rgba(255, 255, 255, .62);
  font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: color .4s ease; }
.vs__switch button:hover { color: #fff; }
.vs__switch button[aria-pressed="true"] { color: #000; }
.vs__switch button:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 2px; }
.vs__panel { position: relative; margin: 0; padding: 0; color: #fff; }
.vs__keys { display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: end; gap: 6px 14px; margin: 0; font-size: 12.5px; line-height: 1.2; color: rgba(255, 255, 255, .72); }
.vs__keys span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.vs__keys i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.vs__canvas { display: block; width: 100%; height: 460px; }
.vs__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 clamp(10px, 1.4vw, 16px); padding: 0; list-style: none; }   /* above the chart */
.vs__step { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; width: 100%; height: 100%; padding: 12px 14px 14px; border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, .04); color: #fff; text-align: left; font: inherit; cursor: pointer; transition: background-color .3s ease, box-shadow .3s ease, opacity .3s ease; }
.vs__step:hover { background: rgba(255, 255, 255, .075); }
.vs__step:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 2px; }
.vs__step > * { transition: opacity .22s ease; }
.vs__steps.is-swap .vs__step > * { opacity: 0; }
.vs__step-t { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.vs__step-h { font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.vs__step-p { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .55); }
.has-step .vs__step:not(.is-on) { opacity: .5; }
.vs__step.is-on { opacity: 1; }   /* the chosen step: the others fade, no box round it */
.vs__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 36px); margin: clamp(18px, 2.2vw, 26px) 0 0; }
.vs__stats > div { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.vs__stats dt { font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.vs__stats dd { margin: 4px 0 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .35s ease; }
.vs:not(.is-with) [data-warn] { color: #f2a94e; }   /* a figure that is short without Pleevi */
/* on Solutions, each card's still of the day with Pleevi: a line above it with the one figure that matters */
.vs--mini { margin: 0; padding: 18px 14px 4px; }
.vs__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 6px; }
.vs__head span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.vs__head b { padding: 5px 11px 6px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; color: var(--green-soft);
  background: rgba(7, 182, 127, .08); box-shadow: inset 0 0 0 1px rgba(7, 182, 127, .45); transition: color .4s ease, background-color .4s ease, box-shadow .4s ease; }
.vs--mini:not(.is-with) .vs__head b { color: #f2a94e; background: rgba(242, 169, 78, .08); box-shadow: inset 0 0 0 1px rgba(242, 169, 78, .35); }   /* the day without Pleevi */
/* a card's own switch, above the card's link (review, 7 Oct 2026) */
.vs__switch--mini { z-index: 3; padding: 3px; border-radius: 7px; }
.vs__switch--mini::before { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; }
.vs__switch--mini button { padding: 6px 11px 7px; border-radius: 8px; font-size: 12.5px; }
.vs__switch--mini button { white-space: nowrap; }
.vs--mini .vs__head { flex-wrap: wrap; row-gap: 8px; }   /* on a narrow card the figure goes under the switch */
.vs--mini .vs__canvas { height: 220px; }
@media (max-width: 900px) {
  .vs__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
}
@media (max-width: 600px) {
  .vs__top { grid-template-columns: minmax(0, 1fr); }
  .vs__switch { width: 100%; } .vs__switch button { padding-inline: 10px; }
  .vs__switch--mini { width: auto; }
  .vs__keys { justify-content: flex-start; gap: 6px 12px; font-size: 12px; }
  .vs__steps { grid-template-columns: 1fr; }
  .vs__step:not(.is-on) .vs__step-p { display: none; }
  .vs__stats { column-gap: 12px; } .vs__stats dt { font-size: 12.5px; } .vs__stats dd { font-size: 20px; }
}

/* About: the office right under the headline, and the two research institutes Pleevi comes from */
.office { padding-bottom: clamp(8px, 1.4vw, 24px); }
.origin { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 3vw, 40px); }
.origin img { display: block; width: auto; opacity: .88; }
.origin img[alt="VITO"] { height: clamp(26px, 2.4vw, 34px); }
.origin img[alt="EnergyVille"] { height: clamp(32px, 2.9vw, 42px); }
.origin__sep { width: 1px; height: 36px; background: rgba(255, 255, 255, .2); }
.origin--after { margin-top: clamp(40px, 4.4vw, 64px); }   /* under the roots text (Elias, 22 Oct 2026) */
/* About: leadership and advisors on the grey band, running into the investors */
.psec--light + .psec--light { padding-top: 0; }
.psec--light .founders__names b { color: #0a0a0a; }
.psec--light .founders__names span { color: rgba(0, 0, 0, .55); }
.psec--light .founders__names a:hover b { color: var(--green); }
.psec--light .tcard { background: #fff; color: #0a0a0a; border: 0; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.psec--light .tcard__role { color: rgba(0, 0, 0, .55); }

/* --------------------------------------------------------------------------
   Customer story with a video (case-24hn.html): the video loads from YouTube only when played
   (privacy-enhanced mode, assets/scroll.js); until then a poster in the site's own colours, with the
   customer's words and one button. Chapters under it start the video at that point.
   -------------------------------------------------------------------------- */
.vstory { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); isolation: isolate;
  background: radial-gradient(80% 110% at 50% 118%, rgba(7, 182, 127, .30), transparent 62%), linear-gradient(160deg, #0b1b15 0%, #050c09 58%, #020403 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.vstory__poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 56px); text-align: center; }
.vstory__q { max-width: 17ch; font-size: clamp(26px, 4.2vw, 60px); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
.vstory__who { margin-top: clamp(12px, 1.6vw, 20px); font-size: clamp(14px, 1.3vw, 18px); letter-spacing: -.01em; color: rgba(255, 255, 255, .6); }
.vstory__play { margin-top: clamp(20px, 3vw, 40px); }
.vstory iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vstory.is-playing .vstory__poster { visibility: hidden; }
.vstory.is-playing { aspect-ratio: 16 / 9; }
.vchapters { margin-top: 16px; }
.vchapters ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vchapters button { padding: 8px 12px 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .78);
  font: inherit; font-size: 14.5px; letter-spacing: -.01em; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.vchapters button:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #fff; }
.vchapters button:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 2px; }
.vchapters button span { margin-right: 8px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green-soft); }
.vchapters__note { margin-top: 12px; font-size: 14px; letter-spacing: -.01em; color: rgba(255, 255, 255, .45); }
@media (max-width: 640px) { .vstory { aspect-ratio: 4 / 5; } .vchapters button { font-size: 13.5px; } }
/* the customer's words inside a story section */
.story__body > .sq { margin-top: 28px; padding-left: 22px; border-left: 2px solid var(--green-soft); }
.sq p { max-width: 58ch; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.42; letter-spacing: -.02em; color: #fff; }
.sq p::before { content: "“"; } .sq p::after { content: "”"; }
.sq cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; letter-spacing: -.01em; color: rgba(255, 255, 255, .5); }
.quotes__note { margin-top: 16px; text-align: center; font-size: 14px; letter-spacing: -.01em; color: rgba(255, 255, 255, .45); }

/* Partners: the partners who already deliver Pleevi, and their quote, on the light band */
.psec--light .logowall .logo__mono { filter: brightness(0); opacity: .55; }
.psec--light .quote { background: #fff; color: #0a0a0a; border: 0; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .28); }
.psec--light .quote blockquote { color: rgba(0, 0, 0, .82); }
.psec--light .quote small { color: rgba(0, 0, 0, .55); }

/* hovered cards: a green ring that fades in, drawn on its own (Elias, 2 Oct 2026). Changing the border's colour on a
   card that lifts at the same time repainted unevenly round the rounded corners; the ring sits just inside the border,
   so cards that clip their content don't clip it, and it is 1.5 px so it stays crisp between pixels. */
.ucard, .tcard, a.rcard, .casecard, .linkcard, .bento__card { position: relative; }
.ucard::after, .casecard::after, .linkcard::after, .bento__card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: calc(var(--radius) - 1px); pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--green); opacity: 0; transition: opacity .3s ease; }
.linkcard::after { border-radius: var(--radius); }
.ucard:hover::after, .casecard:hover::after, .linkcard:hover::after, .bento__card:hover::after { opacity: .85; }
/* the story cards have no ring since 27 Oct 2026: their photo's zoom and the arrow are enough (Elias) */
.doors .ucard::after { display: none; }   /* on the light band the site cards lift with a shadow instead */

/* ==========================================================================
   Resources (Wout and Elias, 7 Oct 2026): the hub, news, the blog and its posts, Knowledge
   ========================================================================== */
.postcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.postcards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
@media (max-width: 980px) { .postcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .postcards, .postcards--two { grid-template-columns: 1fr; } }
.postcard { position: relative; display: flex; flex-direction: column; padding: 28px 28px 26px; border-radius: var(--radius); background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .07); transition: transform .45s var(--ease), opacity .55s var(--ease); }
.postcard.reveal.is-in:hover, .postcard:hover { transform: translateY(-4px); }
.postcard::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--green); opacity: 0; transition: opacity .3s ease; }
.postcard:hover::after { opacity: .85; }
.postcard__kind { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-soft); }
.postcard__title { margin-top: 14px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.postcard__title em { font-style: normal; }
.postcard__lead { margin-top: 12px; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .56); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.postcard__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .42); }
.postcard__more { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--green-soft); }
.postcard__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.postcard:hover .postcard__more i { transform: translateX(4px); }

.newslist { max-width: 1000px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .14); }
.newsrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px 40px; padding: clamp(26px, 3vw, 38px) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.newsrow__when { font-size: 15px; letter-spacing: -.01em; color: rgba(255, 255, 255, .55); }
.newsrow__when span { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-soft); }
.newsrow__title { font-size: clamp(21px, 2vw, 27px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.newsrow__text { margin-top: 10px; max-width: 60ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; letter-spacing: -.015em; color: rgba(255, 255, 255, .6); }
.newsrow__more { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--green-soft); }
.newsrow__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.newsrow__more:hover i { transform: translateX(4px); }
@media (max-width: 700px) { .newsrow { grid-template-columns: 1fr; } }

/* a blog post: the head like a page's hero, the body in one readable column (blog posts may say more, review 7 Oct 2026) */
.post__head { max-width: 960px; margin: 0 auto; padding: calc(var(--nav-h) + clamp(56px, 7vw, 104px)) var(--gutter) clamp(36px, 4vw, 56px); text-align: center; }
.post__head .crumb { justify-content: center; }
.post__head .eyebrow { display: block; margin-bottom: 22px; }
.post__title { font-size: clamp(32px, 4.4vw, 60px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.post__title em { font-style: normal; color: var(--green-soft); }
.post__lead { max-width: 46ch; margin: 26px auto 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; letter-spacing: -.02em; color: rgba(255, 255, 255, .62); text-wrap: pretty; }
.post__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .45); }
.post__body { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) clamp(24px, 3vw, 40px); font-size: 18px; line-height: 1.6; letter-spacing: -.012em; color: rgba(255, 255, 255, .78); }
.post__body h2 { margin: 52px 0 16px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: #fff; }
.post__body h3 { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.post__body p { margin: 0 0 18px; }
.post__body p b { color: #fff; }
.post__body p a { color: var(--green-soft); text-decoration: underline; text-underline-offset: 3px; }
.post__body .ticks { margin: 0 0 24px; }
.post__body .ticks li { font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.post__tldr { margin: 0 0 12px; padding: 28px 30px 6px; border-radius: var(--radius); background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .08); }
.post__tldr h2 { margin-top: 0; }
.post__table { overflow-x: auto; margin: 6px 0 28px; }
.post__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; }
.post__table th, .post__table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .12); font-weight: 400; }
.post__table thead th { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.post__table tbody th { color: #fff; font-weight: 500; }
.post__table .is-best th, .post__table .is-best td { color: var(--green-soft); font-weight: 600; }
.post__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 4px 0 8px; border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, .08); }
.post__figs > div { padding: 14px 16px; background: #0b0b0b; }
.post__figs dt { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.post__figs dd { margin: 6px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff; }
@media (max-width: 640px) { .post__figs { grid-template-columns: 1fr 1fr; } }
.post__steps { list-style: none; counter-reset: step; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.post__steps li { counter-increment: step; padding: 22px 24px 6px; border-radius: var(--radius); background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .07); }
.post__steps h3 { margin-bottom: 10px; }
.post__steps h3::before { content: counter(step) " · "; color: var(--green-soft); }
.post__steps p { font-size: 17px; }
.post__fig { font-size: 15px; color: rgba(255, 255, 255, .55); }
.post__fig b { margin-right: 4px; font-size: 18px; color: var(--green-soft); }
.post__note { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .5); }
/* the original post's charts (Wout, 28 Oct 2026: "the graphs of the original blogpost are gone?") */
.post__chart { margin: 8px 0 28px; }
.post__chart img { width: 100%; height: auto; border-radius: var(--radius); background: #0d0d0d; }
.post__chart figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .5); }
.post__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 34px; }
.post__links a { font-size: 16px; font-weight: 600; color: var(--green-soft); text-decoration: none; }
.post__links i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.post__links a:hover i { transform: translateX(4px); }

/* Knowledge: the developer documentation beside its parts, the docs on request, the terms */
.docs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.docs__text .eyebrow { display: block; margin-bottom: 20px; }
.docs__text .sec-lead { margin-left: 0; }
.docs__cta { margin-top: 32px; }
.docs__parts { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.docs__parts li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.docs__parts b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.docs__parts span { font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .56); }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; } }
.pform--center { justify-content: center; margin-inline: auto; }
.psec--light .news-form input { background: #fff; color: #0a0a0a; border-color: rgba(0, 0, 0, .14); }
.psec--light .news-form input::placeholder { color: rgba(0, 0, 0, .4); }
.psec--light .news__msg { color: rgba(0, 0, 0, .6); }
.psec--light .news__msg[data-state="ok"] { color: var(--green); }
.gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); max-width: 1100px; margin: 0 auto; }
.gloss__item { padding: 22px 0 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.gloss dt { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.gloss dd { margin: 8px 0 0; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; color: rgba(255, 255, 255, .6); }
@media (max-width: 760px) { .gloss { grid-template-columns: 1fr; } }

.btn i { font-style: normal; margin-left: .35em; }   /* a button's arrow: flex drops the space before it */

/* What it solves: the three plans, like a pricing page with no prices (Wout and Elias, 7 Oct 2026) */

/* Product: the Driver App, its two phones beside the words (review, 7 Oct 2026: "the app designs are missing") */
.appwhy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
@media (max-width: 900px) { .appwhy__grid { grid-template-columns: 1fr; } .appwhy__shot { order: 2; } }
.appwhy__shot { margin: 0; }
.appwhy__shot img { width: min(100%, 560px); height: auto; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .28)); }
.appwhy .eyebrow { display: block; margin-bottom: 20px; }
.appwhy .sec-lead { max-width: 44ch; margin-left: 0; }
.appwhy .ticks li, .edgewhy .ticks li { color: rgba(0, 0, 0, .7); }
.edgewhy__more { display: inline-block; margin-top: 24px; }

/* Partners (Wout and Elias, 7 Oct 2026): the partners' logos under the headline, on the black like the homepage's
   customers; who works with Pleevi and how, beside the installer; four steps; the quote on its own */
.partner-logos { padding-top: 0; }
.partner-logos .logos { margin-top: 0; }
.partner-logos .row-label { margin-bottom: clamp(18px, 2vw, 28px); font-size: clamp(16px, calc(15.26px + .19vw), 18px); font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .85); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps--4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   One system for cards, titles and words (Elias, 8 Oct 2026: "There are several flaws like different formatting of
   cards, or titles, or texts. I want you to streamline this accross the whole website ... as if you were a
   professional agency (without changing the current branding)"). These rules come last on purpose: every card takes
   its corners, padding, title and words from the same few values, wherever it was first styled above.
   ========================================================================== */
:root {
  --card-pad: clamp(24px, calc(19.543px + 1.1429vw), 36px);   /* inside a card: 24 on a phone, 36 at 1440 */
  --radius-sm: 6px;                                          /* a tile, or a photo inside a card */
  --t-card: clamp(21px, calc(19.143px + .4762vw), 26px);       /* a card's title, three to a row: 21 → 26 */
  --t-tile: clamp(18px, calc(16.886px + .2857vw), 21px);       /* a tile's title, four to a row or in a narrow column: 18 → 21 */
  --t-row: clamp(24px, calc(20.286px + .9524vw), 34px);        /* a card as wide as the page: 24 → 34 */
  --t-copy: clamp(15px, calc(14.629px + .0952vw), 16px);       /* the words on a card: 15 → 16 */
  --copy: rgba(255, 255, 255, .6);                           /* those words on the black */
  --copy-light: rgba(0, 0, 0, .6);                           /* and on a light band */
}

/* corners: cards on the page's radius, tiles and cards inside an article one step smaller */
.postcard, .proofcard, .evcard { border-radius: var(--radius); }
.postcard::after { border-radius: calc(var(--radius) - 1px); }
.post__tldr, .post__steps li { border-radius: var(--radius-sm); }

/* padding: one inset for every card with words in it */
.feat, .dcard, .postcard, .quote { padding: var(--card-pad); }

/* titles: three sizes, by how wide the card is */
.feat__title, .pain__title, .rcard__result, .postcard__title, .bento__name, .vs__title, .newsrow__title, .proofcard__result, .dcard__title {
  font-size: var(--t-card); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.ucard__title, .linkcard__name, .tcard__name, .step__t, .story__body .dcard__title {
  font-size: var(--t-tile); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.ucrow__title, .evcard__title, .rcards--feature .rcard__result, .sec-head--sub .sec-title {
  font-size: var(--t-row); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.side-card .dcard__title { font-size: var(--t-card); }
.dcard__title--xl { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; }

/* the words on a card: one size and one grey, on the black and on the light bands */
.feat__desc, .pain__desc, .dcard__desc, .postcard__lead, .rcard__sub, .bento__line, .ucard__desc, .ucrow__lead, .linkcard__line, .step__d {
  font-size: var(--t-copy); line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.feat__desc, .pain__desc, .dcard__desc, .postcard__lead, .rcard__sub, .bento__line, .ucard__desc, .ucrow__lead, .linkcard__line, .step__d { color: var(--copy); }
.psec--light .dcard__desc, .psec--light .linkcard__line, .psec--light .step__d, .doors .ucard__desc { color: var(--copy-light); }
.shero__lead, .cta__lead { color: rgba(255, 255, 255, .62); }   /* leads: the same grey as every other lead */

/* a card's link, and its lift on hover: the same on every card */
.rcard__more, .ucard__more, .linkcard__more, .bento__more, .postcard__more, .proofcard__more, .newsrow__more { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ucard.reveal.is-in:hover, .ucard:hover, a.rcard:hover, .bento__card.reveal.is-in:hover, .bento__card:hover, .linkcard.reveal.is-in:hover, .linkcard:hover, .postcard.reveal.is-in:hover, .postcard:hover { transform: translateY(-4px); }

/* eyebrows: one spacing everywhere */
.pcard .eyebrow, .engine .eyebrow, .ucard .eyebrow, .dcard .eyebrow, .postcard__kind, .proofcard__tag, .rcard__who { font-size: 12.5px; letter-spacing: .16em; }
/* numbers: one marker for every numbered item, a green figure in a thin ring (it was a ring on the problems, “01” on
   the solutions, a big figure on the steps) */
.step__t, .feat__title, .pain__title { margin-top: 0; }   /* no numbered circle above them anywhere since 15 Oct 2026 (Elias: "Remove those circles with numbers") */

/* cards in a row share their rows, so titles, words, figures and links line up across the row whatever wraps */
@supports (grid-template-rows: subgrid) {
  .linkcards > .linkcard { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .pains > .pain, .steps > .step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }   /* title and words: no number since 15 Oct 2026 */
  .dgrid > .dcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .feats > .feat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  /* a card shares as many rows as it has parts, so a shorter card leaves no empty rows at its foot (13 Oct 2026) */
  .dgrid > .dcard:not(:has(> :nth-child(4))) { grid-row: span 3; }
  .dgrid > .dcard:not(:has(> :nth-child(3))) { grid-row: span 2; }
  .postcards > .postcard { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .ugrid > .ucard, .bento > .bento__card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .ugrid > .ucard > .ucard__body, .bento > .bento__card > .bento__body { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .linkcards > .linkcard > .linkcard__more, .postcards > .postcard > .postcard__more, .ugrid .ucard__more, .bento .bento__more { align-self: end; }
  @media (min-width: 981px) {   /* story cards share rows only while they sit in a grid; on a phone they scroll sideways */
    .rcards:not(.rcards--one) > .rcard { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .rcards:not(.rcards--one) > .rcard > .rcard__body { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .rcards:not(.rcards--one) > .rcard:not(:last-child:nth-child(odd)) .rcard__more, .rcards:not(.rcards--one) > .rcard:first-child .rcard__more { align-self: end; }
  }
  .feat .ticks, .dcard .ticks { align-content: start; }   /* a list keeps its own spacing in a taller row */
}

/* never one card alone on a row: the odd last story goes across the width, as the featured story does */
@media (min-width: 981px) {
  .rcards--two > .rcard:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 32px; align-items: center; }
  .rcards--two > .rcard:last-child:nth-child(odd):not(:first-child) > .rcard__body { display: flex; grid-row: auto; padding: 16px 20px 16px 0; }
}
@media (min-width: 561px) and (max-width: 900px) { .linkcards--3 > .linkcard:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 641px) and (max-width: 980px) { .postcards:not(.postcards--two) > .postcard:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.specs:has(> .spec:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .specs:has(> .spec:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .specs:has(> .spec:nth-child(4):last-child) { grid-template-columns: 1fr; } }
.story__body .kstats:has(> .kstat:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) { .story__body .kstats:has(> .kstat:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .story__body .kstats:has(> .kstat:nth-child(4):last-child) { grid-template-columns: 1fr; } }
.story__body .kstat__num { font-size: clamp(30px, 2.6vw, 40px); }   /* “52% → 87%” on one line in a story's results */

/* About: the advisors and the investors belong to "The people behind Pleevi": sub-heads, not sections of their own */
.sec-head--sub { margin-bottom: clamp(32px, 4vw, 56px); }
.kstat__cap { text-wrap: balance; }   /* no word alone on a figure's last line */

/* Product (13 Oct 2026, Elias: "Center all the titles PLEEVI ENGINE, PLEEVI EDGE, PLEEVI STUDIO, DRIVER APP"): each
   pillar's eyebrow, title and lead centred above its picture and steps, as the engine's are */
#edge .sec-head .sec-lead, #studio .sec-head .sec-lead, #app .sec-head .sec-lead { max-width: 46ch; margin-inline: auto; }
#edge .sec-head, #app .sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
#studio .sec-head { margin-bottom: clamp(24px, 3vw, 48px); }



/* Partners in one story (13 Oct 2026, Elias: "Consolidate this to bring a clear message across"): the offer beside the
   installer; the proof; how to start; support for your operations, the platform and the hardware (14 Oct 2026) */
.shero--partners .shero__media img { object-position: 60% 45%; }   /* the installer and the open cabinet stay in view */
.shero--partners .pform { margin-top: clamp(26px, 3vw, 36px); }
.partner-logos .quote--solo { margin-top: clamp(40px, 5vw, 64px); }

/* a section's own sub-titles, under its centred title (14 Oct 2026, Partners: Support your operations) */
.sec-sub { font-size: var(--t-row); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.sub-lead { margin-top: 14px; max-width: 52ch; font-size: clamp(16px, calc(15.26px + .19vw), 18px); line-height: 1.5; letter-spacing: -.015em; color: var(--copy-light); text-wrap: pretty; }
.portal .ticks { margin-top: 24px; }
.hw { margin-top: clamp(56px, 7vw, 104px); text-align: center; }
.hw .sub-lead { margin-inline: auto; }
.hw .brandwall { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1140px; margin: clamp(26px, 3vw, 36px) auto clamp(24px, 2.8vw, 32px); }   /* the logos in their card, "and many more" at its foot, as before */
@media (max-width: 900px) { .hw .brandwall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* six across from 900 px: eighteen brands in three rows (Elias, 23 Oct 2026) */

/* Product (14 Oct 2026, Elias): the engine, the six ways to save and earn and the plans in one section, "keep it
   light". A plan switch over the six cards: the plan's line and what it adds, the cards it doesn't run dimmed, and on
   each card what it does in that plan. Optimize is chosen in the HTML, so it shows without JavaScript. */
.engrun { margin-top: clamp(72px, 9vw, 136px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.engrun__head { text-align: center; scroll-margin-top: calc(var(--nav-h) + 24px); }
.engrun .sub-lead { margin-inline: auto; color: var(--copy); }
.planswitch { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: clamp(26px, 3vw, 36px); padding: 4px; border-radius: 7px; background: rgba(255, 255, 255, .08); }
.planswitch button { padding: 11px clamp(16px, 2vw, 26px) 12px; border: 0; border-radius: 7px; background: transparent; color: rgba(255, 255, 255, .62); font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: background .3s var(--ease), color .3s; }
.planswitch button:hover { color: #fff; }
.planswitch button[aria-pressed="true"] { background: var(--green-soft); color: #000; }
.planswitch button:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 2px; }
.planpanes { max-width: 760px; margin: clamp(26px, 3vw, 36px) auto clamp(40px, 5vw, 64px); text-align: center; }
.planpane { display: none; }
.engrun[data-plan="balance"] .planpane[data-for="balance"], .engrun[data-plan="optimize"] .planpane[data-for="optimize"],
.engrun[data-plan="monetize"] .planpane[data-for="monetize"] { display: block; }
.planpane__name { font-size: clamp(22px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.03em; }
.planpane__badge { display: inline-block; margin-left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(7, 182, 127, .14); color: var(--green-soft); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; vertical-align: middle; }
.planpane__line { margin-top: 6px; font-size: 16.5px; line-height: 1.45; color: var(--copy); }
.planpane__plus { margin-top: 18px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .45); }
.planpane .ticks { display: inline-grid; margin-top: 14px; text-align: left; }
.planpane__plus + .ticks { margin-top: 12px; }
/* on each card, what it does in the chosen plan: green where the plan adds it, grey where it carries on, dimmed where it isn't in */
.bento__plan { margin-bottom: 14px; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; color: rgba(255, 255, 255, .5); }
.bento__plan span { display: none; }
.bento__plan .is-new { color: var(--green-soft); }
.engrun[data-plan="balance"] .bento__plan [data-for="balance"], .engrun[data-plan="optimize"] .bento__plan [data-for="optimize"],
.engrun[data-plan="monetize"] .bento__plan [data-for="monetize"] { display: inline; }
.engrun .bento__card > * { transition: opacity .45s var(--ease); }
.engrun[data-plan="balance"] .bento__card:not([data-from="balance"]) > * { opacity: .32; }
@supports (grid-template-rows: subgrid) {   /* the plan line is one more row in each card's aligned rows */
  .engrun .bento > .bento__card { grid-row: span 6; }
  .engrun .bento > .bento__card > .bento__body { grid-row: span 5; }
}

/* Product (14 Oct 2026, Elias: "for the three tiers, provide only one graph and ... a few KPIs"): the plans' chart under
   the engine, the plan's name and line above it, four figures under it; the markets' figure only lights up in Monetize */
.engrun--tiers .planpanes { margin-bottom: clamp(24px, 3vw, 36px); }
.vs__stats--tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .vs__stats--tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs__stats--tiers > div { transition: opacity .45s var(--ease); }
.engrun:not([data-plan="monetize"]) .vs__stats--tiers > [data-only="monetize"] { opacity: .35; }
.engrun--tiers .sec-more { margin-top: clamp(28px, 3.4vw, 44px); }
.phero .crumb { justify-content: center; }
.psec--tight .engrun { margin-top: 0; }   /* Functionalities: the switch right under the page's title */
.vs--tiers .vs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.vs--tiers .vs__bar .vs__keys { margin: 0; align-self: center; }
.vs--tiers:not(.is-with) .vs__stats--tiers > [data-only="monetize"] { opacity: .35; }   /* no markets without Pleevi */
@media (max-width: 640px) { .vs--tiers .vs__bar { justify-content: center; } .vs--tiers .vs__bar .vs__switch { width: 100%; } }

/* Partners (14 Oct 2026, Elias): the offer centred like the other pages' titles, the button with it; VMA's quote on a wide
   card with the installer's photo, like the homepage's story cards; the platform's subtitle centred above its picture */
.phero--partners .pform { margin-top: clamp(32px, 4vw, 44px); }
.proofcard--wide { max-width: 1180px; min-height: clamp(440px, 42vw, 600px); margin: clamp(40px, 5vw, 64px) auto 0; padding: clamp(28px, 3.6vw, 56px); overflow: hidden; }
.proofcard--wide .proofcard__bg { object-position: 60% 40%; }
@media (max-width: 760px) { .proofcard--wide { min-height: 0; padding-top: 58vw; } .proofcard--wide .proofcard__bg { height: 72vw; object-position: 72% 30%; } }   /* on a phone the installer above the words, not under them */
.proofcard--wide .proofcard__quote, .proofcard--wide .proofcard__by { max-width: 760px; }
.proofcard--wide .proofcard__quote { font-size: clamp(19px, 1.7vw, 24px); }
.portal__text .ticks { margin-top: 0; }
.partner-logos .trustbar__viewport { margin-top: 0; }
.partner-logos .row-label { margin-bottom: clamp(14px, calc(10.29px + .952vw), 24px); font-size: clamp(16px, calc(15.26px + .19vw), 18px); font-weight: 600; letter-spacing: .02em; line-height: 1.15; }   /* as the homepage's */

/* Product's three parts, Pleevi Edge, Studio and the Driver App (14 Oct 2026, Elias: no numbered rings and tick lists,
   "as if you were a professional agency"): each idea a row under a hairline, its title over its words, everything the part offers said in those three rows beside its picture (no strip of facts under it, 14 Oct 2026) */
.plist { display: grid; border-bottom: 1px solid var(--hair); }
.plist__row { display: grid; gap: 6px; padding: clamp(18px, 2vw, 24px) 0; border-top: 1px solid var(--hair); }
.plist__t { font-size: var(--t-tile); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.plist__d { font-size: var(--t-copy); line-height: 1.5; letter-spacing: -.01em; color: var(--copy); text-wrap: pretty; }
:root { --hair: rgba(255, 255, 255, .12); }
.psec--light { --hair: rgba(0, 0, 0, .12); }
.psec--light .plist__t { color: #0a0a0a; }
.psec--light .plist__d { color: var(--copy-light); }

/* Contact, kept light as on the original pleevi.ai (Elias, 15 Oct 2026): Wout and his calendar, then two cards side by side */
.contact-light .founder { display: flex; width: fit-content; max-width: 100%; margin: 0 auto; }
.contact-light__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: clamp(40px, 5vw, 64px) auto 0; }
@media (max-width: 760px) { .contact-light__cards { grid-template-columns: 1fr; } }
.contact-light__cards .dcard { display: flex; flex-direction: column; }
.contact-light__mail { margin-top: auto; padding-top: 22px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.contact-light__addr { margin-top: 8px; font-size: 14px; color: var(--copy); }
.contact-light__form { justify-content: flex-start; max-width: none; margin: auto 0 0; padding-top: 22px; gap: 10px; }
.contact-light__form input { flex: 1 1 180px; height: 48px; padding: 0 16px; font-size: 15.5px; }
.contact-light__form .btn { height: 48px; }

/* Home, the first screen with more air (Elias, 15 Oct 2026: "make the first landing screen breath a bit more? It feels
   a bit loaded"): more room above the headline, around the scene and before the logos, and the scene a little smaller,
   so the three still fit one screen. The product tour's stage the same size (Elias, 15 Oct 2026: "Make the top product
   animation the same size as the homepage animation"). */
.hero { --pt: clamp(40px, calc(26px + 2.6vw), 80px); --gap: clamp(28px, calc(16px + 2.4vw), 60px); --pb: clamp(36px, calc(22px + 2.8vw), 72px); }
.hero .schematic { width: min(100%, clamp(320px, calc(245.9px + 33vw), 840px), max(400px, calc(var(--room) * 1.5447))); }

/* Product, the engine's three layers drawn as the tour draws them (Elias, 15 Oct 2026): each glowing plate with its own
   motif, stacked forecast over optimize over steer, its words beside it */
.lstack { display: grid; gap: clamp(20px, 3vw, 44px); max-width: 1100px; margin: 0 auto; }
.lstack__row { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.lstack__plate { display: block; width: 100%; height: auto; overflow: visible; }
.lstack__text .eyebrow { display: block; margin-bottom: 12px; }
.lstack__t { font-size: var(--t-card); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.lstack__d { margin-top: 10px; max-width: 58ch; font-size: var(--t-copy); line-height: 1.5; letter-spacing: -.01em; color: var(--copy); text-wrap: pretty; }
.lstack__proof { display: block; margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--green-soft); }
@media (max-width: 760px) { .lstack__row { grid-template-columns: 1fr; gap: 12px; } .lstack__plate { width: min(100%, 320px); margin: 0 auto; } }

/* the plan switch: Recommended on the Optimize button itself (Elias, 15 Oct 2026) */
.planswitch { margin-top: clamp(38px, 4vw, 48px); }
.planswitch button { position: relative; }
.planswitch__tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -62%); padding: 3px 9px; border-radius: 999px; background: #0d2a20; border: 1px solid rgba(7, 182, 127, .5); color: var(--green-soft); font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.sec-sub em { font-style: normal; color: var(--green-soft); }
.origin img { filter: brightness(0) invert(1); opacity: .6; }   /* the same grey as the homepage's logo strip: white at 60% (Elias, 15 Oct 2026) */

/* every page's opening and closing title at the homepage title's size, no bigger (Elias, 15 Oct 2026: "cap all the
   titles to the size of the homepage title"); each was at least that big at every width, so they all match it */
.phero__title, .shero__title, .post__title, .cta__title, .phero-split__title { font-size: var(--hero-h1); }

/* the plans under the engine: one list of every capability, each tick lit when the chosen plan has it, dim when it
   doesn't (Elias, 15 Oct 2026, instead of the plan's name in white) */
.plancheck { display: inline-grid; margin-top: 18px; text-align: left; }
.plancheck li { transition: color .35s ease; }
.plancheck li::before { transition: border-color .35s ease, opacity .35s ease; }
.engrun[data-plan="balance"] .plancheck li:not([data-balance]), .engrun[data-plan="optimize"] .plancheck li:not([data-optimize]),
.engrun[data-plan="monetize"] .plancheck li:not([data-monetize]) { color: rgba(255, 255, 255, .3); }
.engrun[data-plan="balance"] .plancheck li:not([data-balance])::before, .engrun[data-plan="optimize"] .plancheck li:not([data-optimize])::before,
.engrun[data-plan="monetize"] .plancheck li:not([data-monetize])::before { border-color: rgba(255, 255, 255, .22); }
/* the plans' functions by category (Elias's tier table, 23 Oct 2026) */
.plancheck__cat { margin: 26px 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-soft); transition: opacity .35s ease; }
.plancheck__cat:first-child { margin-top: 0; }
.plancheck .ticks { margin-top: 0; }
.plancheck__note { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .5); transition: opacity .35s ease; }
.engrun[data-plan="balance"] .plancheck :is(.plancheck__cat, .plancheck__note):not([data-balance]),
.engrun[data-plan="optimize"] .plancheck :is(.plancheck__cat, .plancheck__note):not([data-optimize]),
.engrun[data-plan="monetize"] .plancheck :is(.plancheck__cat, .plancheck__note):not([data-monetize]) { opacity: .35; }

/* Talk to us, structured as Elias showed it (15 Oct 2026): the title and the call, then the email in a pill that copies it;
   its three texts sit in one spot and cross-fade (no copy icon), and the address under it */
.phero__cta { margin-top: clamp(32px, 4vw, 44px); }
.mailask .container { display: grid; justify-items: center; gap: clamp(20px, 2.4vw, 28px); text-align: center; }
.mailask__title { font-size: var(--t-row); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.mailpill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 16px 28px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: #141414; color: #fff; font: inherit; font-size: 15.5px; letter-spacing: -.01em; cursor: pointer; transition: border-color .45s ease, background-color .45s ease; }
.mailpill:hover, .mailpill:focus-visible { border-color: var(--green); background: #171a19; outline: none; }
.mailpill__lead { color: var(--copy); }
.mailpill__addr { display: inline-grid; text-align: left; font-weight: 600; }
.mailpill__v { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); white-space: nowrap; }
.mailpill__v.is-on { opacity: 1; transform: none; }
.mailpill__v[data-v="done"] { color: var(--green-soft); }
.mailask__addr { max-width: 48ch; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -.02em; color: rgba(255, 255, 255, .62); text-wrap: balance; }   /* as the page's line under the title (16 Oct 2026) */
@media (max-width: 480px) { .mailpill { padding: 14px 20px; font-size: 14.5px; } .mailpill__lead { display: none; } }

/* card hovers with one clean contour (Elias, 15 Oct 2026: "the contours are not very clean"): the green ring was an
   overlay drawn inside each card's own grey border, so the corners showed two outlines and an uneven gap to the photo;
   now the card's own border turns green, and on the light bands, where cards have no border, one ring in its place */
.ucard::after, a.rcard::after, .casecard::after, .linkcard::after, .bento__card::after, .postcard::after { content: none; }
.ucard, a.rcard, .casecard, .linkcard, .bento__card, .postcard { transition: transform .45s var(--ease), opacity .55s var(--ease), border-color .3s ease, box-shadow .3s ease; }
:is(.ucard, .casecard, .linkcard, .bento__card, .postcard):hover { border-color: rgba(7, 182, 127, .85); transition-delay: 0s; }
.psec--light :is(.linkcard, .casecard):hover { box-shadow: 0 0 0 1px rgba(7, 182, 127, .85), 0 18px 50px -30px rgba(0, 0, 0, .28); }

/* Product, the Pleevi Edge in 360°: the RevPi Connect 5 from KUNBUS's STEP file, rendered as 60 frames
   (tools/edge-3d), turning slowly in view and by drag (Elias, 15 Oct 2026: "a 3D 360° rotatable product view") */
.spin { width: min(86%, 400px); aspect-ratio: 1; margin: 0 auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.spin.is-drag { cursor: grabbing; }
.spin__img { width: 100%; height: 100%; background-repeat: no-repeat; background-size: 1000% 600%; }
.spin__hint { display: block; margin-top: 4px; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(0, 0, 0, .38); }

/* Partners, the first screen with room to breathe (Elias, 15 Oct 2026: "feels very crowded, especially when we just open
   it"): the title, one line and the email form centred, and the partners' moving logos whole along the bottom of the first screen, as on the homepage */
.phero--partners { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 200px); padding-bottom: clamp(24px, 3vw, 48px); }
.phero--partners .phero__lead { max-width: 40ch; }
.phero--partners .pform { width: min(100%, 580px); margin-top: clamp(40px, 4.4vw, 56px); }
.partner-logos { padding-top: clamp(16px, 2vw, 32px); }

/* clean corners (Elias, 15 Oct 2026: "The corners of some cards is still not clean"): a half-transparent border over the
   card's own fill rendered unevenly round the curve, thinner and fading where the cards sit between pixels; the edge is
   now one solid colour and the fill stops inside it, so the line keeps its weight all the way round */
.ucard, a.rcard, .casecard, .linkcard, .bento__card, .postcard, .mailpill { background-clip: padding-box; }
:is(.ucard, .casecard, .linkcard, .bento__card, .postcard):hover { border-color: #07b67f; }   /* not the story cards (a.rcard): no green on them since 27 Oct 2026 */
.mailpill:hover, .mailpill:focus-visible { border-color: var(--green); }   /* the Pleevi green, as every accent (Elias, 30 Oct 2026) */


/* ==========================================================================
   The four parts of Pleevi EMS drawn as one isometric family (tools/parts-art/art.py), on the homepage's What Pleevi does
   and in the product tour's steps (Elias, 15 Oct 2026: "go more with B ... it should look like it's made by a
   professional agency"; the engine as its three layers, the Edge as the controller alone)
   ========================================================================== */
.isox { width: 100%; height: auto; overflow: visible; }

.isox .floorside { fill: #050706; } .isox .flooredge { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.isox .dots circle { fill: rgba(255,255,255,.16); }
.isox .glassside { fill: #04110b; }
.isox .glow { fill: none; stroke: #3dffb5; stroke-width: 1.3; filter: drop-shadow(0 0 4px rgba(61,255,181,.55)); }
.isox .guide { stroke: rgba(61,255,181,.28); stroke-width: 1; stroke-dasharray: 3 4; }
.isox .ln { fill: none; stroke: #3dffb5; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(61,255,181,.7)); }
.isox .thin { stroke: rgba(61,255,181,.4); stroke-width: 1; }
.isox .dot, .isox .tick { fill: #3dffb5; } .isox .blk { fill: rgba(61,255,181,.55); }
.isox .lidside { fill: #050a08; } .isox .lidedge { fill: none; stroke: rgba(61,255,181,.75); stroke-width: 1.2; filter: drop-shadow(0 0 5px rgba(61,255,181,.5)); }
.isox .box .t { fill: #1a2620; } .isox .box .l { fill: #101915; } .isox .box .r { fill: #0a110e; }
.isox .box polygon { stroke: rgba(61,255,181,.55); stroke-width: 1; stroke-linejoin: round; }
.isox .dev .t { fill: #1e2b25; } .isox .plate .t, .isox .plate .l, .isox .plate .r { fill: #0b100e; stroke: rgba(255,255,255,.12); } .isox .plate .l { fill: url(#gFloor); }
.isox .mcb .t { fill: #151c19; } .isox .mcb polygon { stroke: rgba(255,255,255,.2); } .isox .lever { fill: #3dffb5; opacity: .7; } .isox .rail .t, .isox .rail .l, .isox .rail .r { fill: #2a302d; stroke: rgba(255,255,255,.18); }
.isox .term .t { fill: #0c0f0e; } .isox .term .l { fill: #0a0d0c; } .isox .term .r { fill: #070908; } .isox .term polygon { stroke: rgba(61,255,181,.4); }
.isox .screw { fill: #030504; stroke: rgba(61,255,181,.45); stroke-width: .7; } .isox .vent { fill: rgba(61,255,181,.1); stroke: rgba(61,255,181,.28); stroke-width: .6; }
.isox .latch { fill: rgba(61,255,181,.22); } .isox .pins { stroke: rgba(61,255,181,.55); stroke-width: .7; } .isox .nose .l { fill: #121c18; }   /* the Edge as the RevPi Connect 5 (25 Oct 2026) */ .isox .hole { fill: #3dffb5; opacity: .8; }
.isox .port { fill: #050807; stroke: rgba(61,255,181,.5); stroke-width: .8; } .isox .seam { stroke: rgba(61,255,181,.3); stroke-width: .8; }
.isox .front { fill: #16211c; stroke: rgba(61,255,181,.25); stroke-width: .8; } .isox .accent { fill: #3dffb5; opacity: .85; filter: drop-shadow(0 0 3px rgba(61,255,181,.8)); }
.isox .label { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.14); stroke-width: .6; } .isox .port--usb { stroke: rgba(61,255,181,.35); }
.isox .led { fill: #3dffb5; filter: drop-shadow(0 0 3px #3dffb5); animation: isox-blink 1.6s ease-in-out infinite; } .isox .led--b { animation-delay: .5s; } .isox .led--c { animation-delay: 1s; }
.isox .data { fill: none; stroke: #3dffb5; stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; animation: isox-flow 1s linear infinite reverse; }
.isox .devtop { fill: #17221d; } .isox .devside { fill: #070c0a; } .isox .devedge { fill: none; stroke: rgba(61,255,181,.55); stroke-width: 1; }
.isox .keys { fill: rgba(61,255,181,.06); stroke: rgba(61,255,181,.25); stroke-width: .8; } .isox .pad { fill: rgba(61,255,181,.05); stroke: rgba(61,255,181,.22); stroke-width: .8; }
.isox .disp { fill: #06100c; stroke: rgba(61,255,181,.3); stroke-width: .8; }
.isox .ui { fill: rgba(255,255,255,.55); } .isox .ui--dim { fill: rgba(255,255,255,.22); } .isox .kpi { fill: rgba(61,255,181,.35); }

.isox .draw { stroke-dasharray: 160; stroke-dashoffset: 160; animation: isox-draw 3.2s ease-in-out infinite; }
.isox .stand .t, .isox .stand .l, .isox .stand .r { fill: #121a16; }
.isox .notch { fill: #0d1512; }
.isox .ring0 { fill: none; stroke: rgba(61,255,181,.16); stroke-width: 4; } .isox .ring { fill: none; stroke: #3dffb5; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(61,255,181,.7)); animation: isox-fill 3.2s ease-in-out infinite; }
.isox .rt { fill: #fff; font: 700 11.5px var(--sans); letter-spacing: -.02em; } .isox .cta { fill: #3dffb5; opacity: .9; }
.isox .lvl { animation: isox-float 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.isox .tick { transform-box: fill-box; transform-origin: center; animation: isox-tick 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes isox-blink { 50% { opacity: .25; } } @keyframes isox-flow { to { stroke-dashoffset: -16; } }
@keyframes isox-draw { 0% { stroke-dashoffset: 160; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes isox-fill { 0% { stroke-dasharray: 0 100; } 60%, 100% { stroke-dasharray: 72 100; } }
@keyframes isox-float { 50% { transform: translateY(-3px); } } @keyframes isox-tick { 50% { transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .isox * { animation: none !important; } .isox .draw { stroke-dashoffset: 0; } }
.isox .front { fill: #16211c; stroke: rgba(61,255,181,.25); stroke-width: .8; } .isox .accent { fill: #3dffb5; opacity: .85; filter: drop-shadow(0 0 3px rgba(61,255,181,.8)); }
.isox .label { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.14); stroke-width: .6; } .isox .port--usb { stroke: rgba(61,255,181,.35); }
.isox .ln--dash { stroke-dasharray: 2 4; opacity: .7; } .isox .blk { animation: isox-adjust 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes isox-adjust { 50% { transform: translateX(6px); } }

.partrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
@media (max-width: 1000px) { .partrow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 560px) { .partrow { grid-template-columns: 1fr; } }
.part { display: flex; flex-direction: column; color: #fff; }
.part__vis { margin-bottom: 22px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: border-color .3s ease; }
.part__vis .isox { display: block; transition: transform .5s var(--ease); }
.part:hover .part__vis { border-color: #07b67f; }
.part:hover .part__vis .isox { transform: translateY(-6px); }
.part__t { font-size: var(--t-tile); font-weight: 600; letter-spacing: -.025em; }
.engrun__head > .eyebrow { display: block; margin-bottom: 14px; }   /* Layer 2 · Optimize over the plans (23 Oct 2026) */
.lstack__more { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--green-soft); }   /* Layer 2 on to its plans (23 Oct 2026) */
.lstack__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.lstack__more:hover i { transform: translateY(3px); }
.part__k { display: block; margin-top: 4px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; color: var(--green-soft); }   /* what the part is (21 Oct 2026) */
.part__d { margin-top: 8px; font-size: var(--t-copy); line-height: 1.5; letter-spacing: -.01em; color: var(--copy); text-wrap: pretty; }
.part__more { margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 600; color: var(--green-soft); }
.part__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.part:hover .part__more i { transform: translateX(4px); }
/* in the tour's steps: each part over its name, lit while its step plays, the others quiet */
.hood__vis { display: block; margin: -4px -6px 8px; }
.hood__vis .isox { display: block; width: 100%; height: auto; transition: opacity .4s ease, filter .4s ease; }
.hood__step:not([aria-selected="true"]) .hood__vis .isox { opacity: .5; filter: saturate(.4); }
.hood__step:hover .hood__vis .isox { opacity: .85; filter: none; }
@media (max-width: 560px) { .part__vis .isox { width: min(100%, 260px); margin: 0 auto; } }

/* the four parts' drawings stand still (Elias, 15 Oct 2026: "no need to animate them", "Remove the animation of the icons
   of the four pillars"): the chart drawn, the ring filled, the layers and lights at rest; on the homepage a slight zoom on
   hover and no green line; in the tour the quiet steps' drawings clearly visible */
.isox * { animation: none !important; }
.isox .draw { stroke-dashoffset: 0; }
.isox .ring { stroke-dasharray: 72 100; }
.part:hover .part__vis { border-color: rgba(255, 255, 255, .12); }
.part__vis { overflow: hidden; }
.part__vis .isox { transform-origin: 50% 60%; transition: transform .5s var(--ease); }
.part:hover .part__vis .isox { transform: scale(1.04); }
.hood__step:not([aria-selected="true"]) .hood__vis .isox { opacity: .88; filter: saturate(.85); }
.hood__step:hover .hood__vis .isox { opacity: 1; }


/* Contact (Elias, 16 Oct 2026): the charging hub's photo centred under the title, the call to book in its middle with the
   photo darkening softly round it; the office under the address in the same frame. One shape that crops to fit any width */
.contact-top { padding-bottom: clamp(32px, 4vw, 56px); }
.contact-pic__frame { position: relative; display: grid; place-items: center; max-width: 1180px; margin: 0 auto; overflow: hidden; border-radius: var(--radius); }
.contact-pic__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; grid-area: 1 / 1; }
.contact-pic__frame--office { width: 100%; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 700px) { .contact-pic__frame img { aspect-ratio: 4 / 3; } }

/* Resources' hub: five lists since Events joined (16 Oct 2026); three over two below 1100 px, never one alone */
.linkcards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .linkcards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .linkcards--5 > .linkcard { grid-column: span 2; } .linkcards--5 > .linkcard:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 560px) { .linkcards--5 { grid-template-columns: 1fr; } .linkcards--5 > .linkcard, .linkcards--5 > .linkcard:nth-child(n+4) { grid-column: auto; } }
.phero + #events { padding-top: clamp(48px, 6vw, 88px); }

/* Home's use cases as the customers' and partners' cards (Elias, 16 Oct 2026): the photo filling the card, the words over
   its dark foot; four in a row, a little lower than the stories' */
.proofcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 981px) and (max-width: 1200px) { .proofcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proofcards--4 .proofcard { min-height: clamp(400px, 32vw, 480px); }
.proofcard__line { margin-top: 10px; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .78); text-wrap: pretty; }

/* Use cases' stories as the homepage's photo cards (Elias, 16 Oct 2026): three by two, a gap between the rows */
.proofcards--stories { row-gap: 16px; }
.proofcards--stories .proofcard { min-height: clamp(420px, 34vw, 520px); }

/* the page you are on, a little more marked in the menu (Elias, 16 Oct 2026): its letters in full white, with a faint glow */
.nav__links > a[aria-current="page"], .nav__dd.is-current > a { color: #fff; font-weight: 600; text-shadow: none; }   /* just the letters: crisp, semibold, full white; no glow, no line, no box (16 Oct 2026) */
.nav__links > a:not([aria-current="page"]), .nav__dd:not(.is-current) > a { color: rgba(255, 255, 255, .62); }   /* the others a touch quieter, so the current one stands out without a glow */
.on-light .nav__links > a:not([aria-current="page"]), .on-light .nav__dd:not(.is-current) > a { color: rgba(0, 0, 0, .55); }
.nav__links > a:hover, .nav__dd > a:hover { color: #fff; } .on-light .nav__links > a:hover, .on-light .nav__dd > a:hover { color: #000; }
.on-light .nav__links > a[aria-current="page"], .on-light .nav__dd.is-current > a { color: #000; font-weight: 700; text-shadow: none; }
.mnav [aria-current="page"] { color: #fff; }

/* the three rows beside Edge, Studio and the Driver App: lines only between them, none above the first or under the last (16 Oct 2026) */
.plist { border-bottom: 0; }
.plist__row:first-child { border-top: 0; padding-top: 0; }
.plist__row:last-child { padding-bottom: 0; }

/* About (Elias, 16 Oct 2026): the office photo as the homepage's photo cards (.proofcard: the photo filling it, the blurred
   dark foot), Founded and Headquarters set as their titles and lines, side by side */
.office__card { max-width: 1240px; min-height: 0; aspect-ratio: 2 / 1; margin: 0 auto; }
.office__card .proofcard__bg { object-position: 40% 40%; }
.office__card::after { -webkit-mask-image: linear-gradient(180deg, transparent 62%, #000 84%); mask-image: linear-gradient(180deg, transparent 62%, #000 84%); }   /* the blur below the logo on this wide photo */
.office__card::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .9) 100%); }
.office__facts { display: flex; flex-wrap: wrap; gap: 16px clamp(40px, 6vw, 96px); }
.office__facts .proofcard__result { margin-top: 0; }
.office__facts .proofcard__line { max-width: none; white-space: nowrap; }   /* the address on one line wherever it fits (16 Oct 2026) */
@media (max-width: 560px) { .office__facts .proofcard__line { white-space: normal; } }
@media (max-width: 700px) { .office__card { aspect-ratio: 3 / 4; } .office__card::after { -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 70%); mask-image: linear-gradient(180deg, transparent 45%, #000 70%); } .office__facts { display: grid; } }

/* every page's opening title where and as big as the homepage's (Elias, 16 Oct 2026), its green label gone */
:root { --title-top: calc(var(--nav-h) + clamp(40px, calc(26px + 2.6vw), 80px)); }
.phero, .post__head { padding-top: var(--title-top); }
.shero, .phero-split { padding-top: var(--title-top); }
.shero__grid, .shero--day .shero__grid, .phero-split__grid { align-items: start; }
.phero--partners { justify-content: flex-start; }
/* a breadcrumb sits in the space above the title, not pushing it down */
.phero:has(> .crumb), .post__head:has(> .crumb), .shero:has(.shero__text > .crumb) { padding-top: calc(var(--title-top) - 44px); }
.phero > .crumb, .post__head > .crumb, .shero__text > .crumb { height: 18px; margin-bottom: 26px; }
/* Partners (16 Oct 2026): the quote card under the line, above the email form */
.phero--partners { min-height: 0; }
.phero--partners .proofcard--wide { margin-top: clamp(36px, 4.4vw, 56px); text-align: left; animation: rise .7s var(--ease) both; animation-delay: .21s; }
.phero--partners .pform { animation-delay: .28s; }

/* About (16 Oct 2026): the office photo at its full height (3:2), Headquarters on the right */
.office__card { aspect-ratio: 3 / 2; }
.office__card .proofcard__bg { object-position: 50% 50%; }
.office__facts { justify-content: space-between; }
.office__facts > div:last-child { text-align: right; }
@media (max-width: 700px) { .office__facts > div:last-child { text-align: left; } }
/* Contact (16 Oct 2026): "Or visit us at our office" as the mail question, the address right under it */
.mailask__title--visit { margin-top: calc(var(--mail-gap) - clamp(20px, 2.4vw, 28px)); }   /* less the column's own gap */
.mailask__title--visit + .mailask__addr { margin-top: calc(-1 * clamp(8px, 1.2vw, 14px)); }
.phero--partners .proofcard--wide { width: min(100%, 1240px); max-width: none; }   /* the quote card as wide as the page's content (Elias, 17 Oct 2026) */

/* Talk to us, the email block (Elias, 19 Oct 2026): as big as the address line, the buttons' 10 px corners, and a quiet
   solid edge that brightens a touch on hover instead of the green ring */
.mailpill { padding: clamp(14px, 1.4vw, 18px) clamp(22px, 2.2vw, 30px); border-radius: 7px; border: 1px solid #2a2a2a; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.02em; transition: border-color .45s ease, background-color .45s ease; }
.mailpill:hover, .mailpill:focus-visible { border-color: #4a4a4a; background: #181818; }
.mailpill:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 3px; }
@media (max-width: 480px) { .mailpill { padding: 14px 18px; font-size: 18px; } .mailpill__addr { text-align: center; } }

/* Talk to us (Elias, 19 Oct 2026): the call with Wout as the founder block, under the title, no photo; then mail and office */
.contact-top__founder { margin-top: clamp(32px, 4vw, 44px); }
.contact-top { padding-bottom: var(--mail-gap); }
:root { --mail-gap: clamp(48px, 4.4vw, 96px); }   /* the same room above the mail question and above the office (Elias, 23 Oct 2026: "Leave more space"), a little less since 4 Nov 2026 so the office photo shows on the first screen */
.contact-top + .mailask { padding-top: 0; }
/* the email block as tight as Wout's, its left and right edges on his (Elias, 27 Oct 2026): one width for both, the
   words as big as before and centred in it; the hover text is "Click to copy", as wide as the address, so nothing
   holds empty room at the right */
.contact-top__founder, .mailask .mailpill { width: min(100%, 440px); }
.mailask .mailpill { justify-content: center; }
@media (min-width: 561px) { .contact-top__founder { justify-content: space-between; } }
@media (min-width: 481px) { .mailask .mailpill { padding-inline: 16px; font-size: 24px; } }

/* Use case pages (Elias, 19 Oct 2026): each hard part with what Pleevi does about it; the stories as photo cards;
   the next use case before the call */
.pains > .pain.pain--fix { grid-row: span 3; }
.pain__fix { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--t-copy); line-height: 1.5; color: rgba(255, 255, 255, .82); }
.pain__fix b { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-soft); }
.proofcards--uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proofcards--uc .proofcard { min-height: clamp(420px, 36vw, 540px); }
.proofcards--uc.proofcards--one { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.proofcards--uc + .quote--solo { margin-top: clamp(40px, 5vw, 64px); }
main > .pager { padding-top: clamp(16px, 2vw, 24px); }

/* --------------------------------------------------------------------------
   Use-case pages (Elias, 26 Oct 2026): a large photo on top, as on bnewable.com, the title beside its lead; "How it
   works" and each page's own section as rows beside their heading, the site's .plist and .tbl, never boxed cards
   ("cards are screaming AI"); typical results as a table and figures
   -------------------------------------------------------------------------- */
.uhero { padding: calc(var(--title-top) - 44px) 0 clamp(8px, 1.5vw, 24px); }
.uhero .crumb { animation: rise .7s var(--ease) both; justify-content: center; }   /* centred, as on the stories and posts (Elias, 5 Nov 2026) */
.uhero__media { overflow: hidden; aspect-ratio: 2.6 / 1; border-radius: var(--radius); background: #111; animation: rise .8s var(--ease) .05s both; }
.uhero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uhero__credit { margin-top: 8px; text-align: right; font-size: 12px; letter-spacing: 0; color: rgba(255, 255, 255, .36); }
.uhero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.uhero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; margin-top: clamp(36px, 4.4vw, 64px); }
.uhero__title { font-weight: 600; font-size: var(--hero-h1); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; animation: rise .7s var(--ease) .12s both; }
.uhero__title em { font-style: normal; color: var(--green-soft); }
.uhero__side { padding-top: 8px; animation: rise .7s var(--ease) .2s both; }
.uhero__lead { font-size: clamp(17px, calc(15.51px + .381vw), 21px); line-height: 1.45; letter-spacing: -.02em; color: rgba(255, 255, 255, .64); }
.uhero__side .chips { margin-top: 24px; }
@media (max-width: 900px) { .uhero__grid { grid-template-columns: 1fr; gap: 18px; } .uhero__media { aspect-ratio: 16 / 9; } }

.usplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.usplit__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.usplit__head .eyebrow { display: block; margin-bottom: 16px; }
.usplit__title { font-weight: 600; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.usplit__title em { font-style: normal; color: var(--green-soft); }
.usplit__lead { margin-top: 18px; max-width: 34ch; font-size: var(--t-copy); line-height: 1.5; letter-spacing: -.015em; color: var(--copy); }
.usplit .plist__row { padding: clamp(22px, 2.4vw, 30px) 0; }
.usplit .plist__row:first-child { padding-top: 0; }
.usplit .tbl { border-top: 0; }
.usplit .tbl__row { padding: 18px 4px; font-size: var(--t-copy); line-height: 1.45; color: var(--copy); }
.usplit .tbl__lead { font-size: var(--t-tile); font-weight: 600; color: #fff; }
@media (max-width: 900px) { .usplit { grid-template-columns: 1fr; } .usplit__head { position: static; } }
/* Industry and offices' drivers' steps beside a photo of our own (Elias, 26 Oct 2026): the photo at the left, where "How it
   works" above has its heading, and the five steps as its rows */
.udrive { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; }
.udrive__media { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: #111; }
.udrive__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.udrive__head .eyebrow { display: block; margin-bottom: 16px; }
.udrive__steps { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; }
.udrive__table { margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 900px) { .udrive { grid-template-columns: 1fr; } .udrive__media { max-height: 560px; } }

.uresults { max-width: 980px; margin: 0 auto; }
.uresults .tbl { border-top: 1px solid rgba(255, 255, 255, .16); }
.uresults .tbl__row > :last-child { text-align: right; color: var(--green-soft); font-weight: 600; }
.uresults .tbl__row--head > :last-child { color: rgba(255, 255, 255, .4); font-weight: 600; }
.uresults .tbl + .kstats { margin-top: clamp(48px, 5vw, 72px); }
@media (max-width: 700px) { .uresults .tbl__row > :last-child { text-align: left; } }

/* the product tour: under each part's card, on to its section (Elias, 26 Oct 2026) */
.hero--tour .hood__steps > li { display: flex; flex-direction: column; }
.hood__more { display: inline-block; align-self: flex-start; margin: 12px 0 0 18px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.hood__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.hood__more:hover i { transform: translateX(4px); }
/* the plan switch: Tier 1, 2 and 3 over each plan's name (Elias, 26 Oct 2026) */
.planswitch button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.planswitch__tier { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.planswitch__tag { transform: translate(-50%, -112%); }   /* above the button, clear of "Tier 2" */
/* the Recommended tag greyed out while another plan is picked, green again on Tier 2 (Elias, 27 Oct 2026) */
.planswitch__tag { transition: background .3s var(--ease), border-color .3s, color .3s; }
.planswitch button[aria-pressed="false"] .planswitch__tag { background: #1c1c1c; border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .45); }

/* Resources (Elias, 27 Oct 2026: "Streamline with the current design ... as if made by a professional agency"): the five
   parts as an index of rows, the name, what it holds and the way in, hairlines between, the whole row a link; the
   blog's posts as rows beside their heading (.usplit), and on Blog and under each post as News lists its news */
.resindex { border-top: 1px solid var(--hair); }
.resrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 10px clamp(24px, 4vw, 72px);
  padding: clamp(26px, 2.8vw, 40px) 0; border-bottom: 1px solid var(--hair); }
.resrow__name { font-size: var(--t-row); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; color: #fff; transition: color .3s var(--ease); }
.resrow__line { max-width: 44ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; letter-spacing: -.015em; color: var(--copy); }
.resrow__go { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); white-space: nowrap; }
.resrow__go i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
/* the row under the pointer is .is-hot, set by scroll.js: :hover stuck on a row after a scroll in Safari (Elias, 27 Oct 2026) */
.resrow.is-hot .resrow__name, .resrow:focus-visible .resrow__name { color: var(--green-soft); }
.resrow.is-hot .resrow__go i, .resrow:focus-visible .resrow__go i { transform: translateX(5px); }
.resrow:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .resrow { grid-template-columns: minmax(0, 1fr) auto; }
  .resrow__line { grid-column: 1 / -1; grid-row: 2; }
}
.usplit__more { display: inline-block; margin-top: 22px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.usplit__more i, .postline__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.usplit__more:hover i, .postline.is-hot .postline__more i, .postline:focus-visible .postline__more i { transform: translateX(5px); }
.postline { gap: 8px; }
.postline__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; letter-spacing: -.01em; color: rgba(255, 255, 255, .5); }
.postline__meta b { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-soft); }
.postline__t { margin-top: 2px; font-size: var(--t-card); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: #fff; transition: color .3s var(--ease); text-wrap: balance; }
.postline__t em, .newsrow__title em { font-style: normal; color: inherit; }
.postline.is-hot .postline__t, .postline:focus-visible .postline__t { color: var(--green-soft); }
.postline .plist__d { max-width: 62ch; }
.postline__more { margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--green-soft); }
.newsrow__when time { display: block; }


/* ==========================================================================
   Final review (30 Oct 2026)
   ========================================================================== */
/* the drivers' steps as a vertical flowchart (Elias: "Make this into a vertical flowchart"): boxes joined by hairlines, the
   choice as two boxes side by side, branching off one line and joining again, the last box in green */
.flow { --flow-gap: 30px; --flow-line: rgba(255, 255, 255, .28); list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: var(--flow-gap); }
.flow__step { position: relative; }
.flow__step--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.flow__box { position: relative; height: 100%; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-sm, 14px); background: #0b0b0b; text-align: center; }
.flow__t { font-size: var(--t-tile, 20px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.flow__d { margin-top: 8px; font-size: var(--t-copy, 16px); line-height: 1.45; letter-spacing: -.01em; color: var(--copy, rgba(255, 255, 255, .62)); text-wrap: pretty; }
.flow__box--end { border-color: var(--green); }
.flow__box--end .flow__t { color: var(--green); }
/* the line down from a box to the next, and an arrowhead on top of every box after the first */
.flow__step:not(:last-child):not(.flow__step--split)::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--flow-gap) * -1); width: 1px; height: var(--flow-gap); background: var(--flow-line); }
.flow__step + .flow__step .flow__box::before { content: ""; position: absolute; left: 50%; top: -1px; transform: translate(-50%, -100%); border: 5px solid transparent; border-bottom: 0; border-top: 6px solid var(--flow-line); }
/* into the choice: half the line, then a fork onto both boxes; out of it, both boxes join and half a line runs on */
.flow__step:has(+ .flow__step--split)::after { height: calc(var(--flow-gap) / 2) !important; bottom: calc(var(--flow-gap) / -2) !important; }
.flow__step--split::before { content: ""; position: absolute; left: calc(25% - 4px); right: calc(25% - 4px); top: calc(var(--flow-gap) / -2); height: calc(var(--flow-gap) / 2); border: 1px solid var(--flow-line); border-bottom: 0; }
.flow__step--split::after { content: ""; position: absolute; left: calc(25% - 4px); right: calc(25% - 4px); bottom: calc(var(--flow-gap) / -2); height: calc(var(--flow-gap) / 2); border: 1px solid var(--flow-line); border-top: 0; }
.flow__step--split + .flow__step::before { content: ""; position: absolute; left: 50%; top: calc(var(--flow-gap) / -2); width: 1px; height: calc(var(--flow-gap) / 2); background: var(--flow-line); }
@media (max-width: 420px) { .flow__box { padding: 16px 14px; } }

/* Book a demo right under the first step of Getting started (Wout: "add a button/link to demo here"; Elias: "Add a button below") */
.step__cta { display: block; margin-top: 22px; }

/* the use cases without cards: each row on the page's black, only its photo rounded (Elias: "Remove the cards of the Use
   cases. Make it blend in with the background") */
.ucrows { gap: clamp(48px, 6vw, 96px); }
.ucrow { column-gap: clamp(32px, 4.4vw, 72px); overflow: visible; border: 0; border-radius: 0; background: none; }
.ucrow__media { border-radius: var(--radius); }
.ucrow__body { padding: clamp(8px, 1vw, 16px) 0; }
@media (max-width: 900px) { .ucrow { row-gap: 24px; } }
/* Pleevi Stories: every story the same card, two by two, stacked on a phone rather than scrolled sideways (30 Oct 2026) */
@media (max-width: 980px) { .proofcards--all { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } .proofcards--all > .proofcard { flex: none; } }
@media (min-width: 640px) and (max-width: 980px) { .proofcards--all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the Edge's brands row points on to the installers' docs (Elias: "Add a pointer to FOR INSTALLERS AND INTEGRATORS") */
.plist__more { display: inline-block; margin-top: 10px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--green); }
.plist__more i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.plist__more:hover i { transform: translateX(5px); }
/* Partners: the photo on top without words (Elias, 30 Oct 2026), as wide as the quote card was */
.phero--partners .partner-shot { width: min(100%, 1240px); margin: clamp(36px, 4.4vw, 56px) auto 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 2480 / 1200; background: #111; animation: rise .7s var(--ease) both; animation-delay: .21s; }
.phero--partners .partner-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
@media (max-width: 760px) { .phero--partners .partner-shot { aspect-ratio: 4 / 3; } .phero--partners .partner-shot img { object-position: 22% 40%; } }   /* the installer on the left third of the rooftop photo (30 Oct 2026) */
.partner-logos .quote--solo { margin-top: clamp(48px, 5.6vw, 80px); }
/* the plans beside a rule-based EMS, which lights only live monitoring and load balancing (Elias, 30 Oct 2026) */
.planswitch:has(> [data-plan="rules"]) { grid-template-columns: repeat(4, auto); }
@media (max-width: 640px) { .planswitch:has(> [data-plan="rules"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } }
.planswitch button { justify-content: center; }   /* Rule-based EMS, one line, in the middle of its button (Elias, 30 Oct 2026) */
.engrun[data-plan="rules"] .planpane[data-for="rules"] { display: block; }
.engrun[data-plan="rules"] .plancheck li:not([data-rules]) { color: rgba(255, 255, 255, .3); }
.engrun[data-plan="rules"] .plancheck li:not([data-rules])::before { border-color: rgba(255, 255, 255, .22); }
.engrun[data-plan="rules"] .plancheck :is(.plancheck__cat, .plancheck__note):not([data-rules]) { opacity: .35; }

/* Product's tour, wider (Elias, 30 Oct 2026): Studio's window on the left of the drawing, the app on its right, and in the
   opening view a zoom area with its name on each of the four parts. The stage keeps the homepage drawing's height and
   widens where the page has room (the view box is cut to the stage, centred: on a phone it is the drawing alone, as
   before), so Studio's and the app's bubbles sit beside the drawing; hood.js sets .hood--wide when they fit */
.hero--tour .hood { container-type: inline-size; }
.hero--tour .hood__stage {
  --sw: min(100cqw, clamp(320px, calc(245.9px + 33vw), 840px), max(400px, calc(var(--room) * 1.5447)));
  width: max(var(--sw), min(100cqw - 2 * var(--gutter), var(--sw) * 2.1432)); height: calc(var(--sw) / 1.5447); aspect-ratio: auto; }
/* the opening view's four bubbles, a part's name on each (Elias, 30 Oct 2026: "Just keep the 4 bubble buttons with the name
   of the pillar. Make them stand out a little"): no box round a part, no panel beside the drawing; hood.js places each */
.hood__zones { position: absolute; inset: 0; pointer-events: none; }
.hood__zone { position: absolute; transform: translate(-50%, -50%); padding: 8px 16px 9px; border: 1.5px solid var(--green); border-radius: 999px; background: rgba(8, 12, 10, .88);
  box-shadow: 0 0 22px 1px rgba(7, 182, 127, .32), 0 0 48px 6px rgba(7, 182, 127, .12), 0 10px 28px -8px rgba(0, 0, 0, .7);   /* a glow that fades out, no hard ring (Elias, 30 Oct 2026) */
  color: #fff; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s, background-color .2s, color .2s, box-shadow .2s; }
.hood[data-step="site"] .hood__zone { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .6s ease .8s, visibility .6s linear .8s, background-color .2s, color .2s, box-shadow .2s; }
.hood__zone:hover, .hood__zone:focus-visible { background: var(--green); color: #000; outline: none; box-shadow: 0 0 26px 2px rgba(7, 182, 127, .45), 0 0 56px 8px rgba(7, 182, 127, .16), 0 10px 28px -8px rgba(0, 0, 0, .7); }
@media (max-width: 700px) { .hood__zone { padding: 5px 11px 6px; border-width: 1px; font-size: 12px; box-shadow: 0 0 14px 0 rgba(7, 182, 127, .3), 0 0 30px 4px rgba(7, 182, 127, .1); } }

/* the plan switch: each option its own rounded cell, the shape the chosen one fills green, so the band shows small
   indents where options meet (Elias, 30 Oct 2026) */
.planswitch button[aria-pressed="false"] { background: rgba(255, 255, 255, .045); transition: background-color .2s, color .2s; }
.planswitch button[aria-pressed="false"]:hover { background: rgba(255, 255, 255, .09); }

/* less rounded, cards and buttons alike (Elias, 4 Nov 2026, after tem.energy's case-study cards): a card 10 → 12 px,
   a photo inside a card 6, a button, field or menu 7; pills and circles stay round */
:root { --radius: clamp(10px, calc(9.26px + .19vw), 12px); --radius-sm: 6px; }

/* the blog as tem.energy's (Elias, 4 Nov 2026), in our colours: the newest post featured, photo beside its words; then
   photo cards two to a row, the title under the photo, no box */
.blogfeat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.blogfeat__media, .blogcard__media { margin: 0; overflow: hidden; border-radius: var(--radius); background: #111; }
.blogfeat__media { aspect-ratio: 1; }
.blogfeat__media img, .blogcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.blogfeat:hover img, .blogcard:hover img { transform: scale(1.03); }
.blogfeat__title { margin-top: 14px; font-size: clamp(28px, 3.2vw, 46px); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.blogfeat__title em, .blogcard__title em, .posthero .post__title em { font-style: normal; color: var(--green); }
.blogfeat__lead { margin-top: 16px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--copy); }
.blogfeat .byline { margin-top: clamp(28px, 4vw, 56px); }
.bloggrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 2vw, 28px); margin-top: clamp(56px, 7vw, 104px); }
.post + .psec .bloggrid { margin-top: 0; }
.blogcard__media { aspect-ratio: 2 / 1; }
.blogcard__meta { display: flex; gap: 12px; margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.blogcard__meta span { color: rgba(255, 255, 255, .45); }
.blogfeat__body > .blogcard__meta { margin-top: 0; }
.blogcard__title { margin-top: 8px; font-size: var(--t-tile); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.blogcard__title i { font-style: normal; color: rgba(255, 255, 255, .45); }
.byline { display: flex; align-items: center; gap: 12px; }
.byline img { width: 40px; height: 40px; border-radius: 50%; background: #111; }
.byline b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.byline small { display: block; margin-top: 2px; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
@media (max-width: 800px) { .blogfeat, .bloggrid { grid-template-columns: minmax(0, 1fr); } .blogfeat__media { aspect-ratio: 3 / 2; } }
/* a post opens on its photo, darkened, with the byline, title and lead over it */
.posthero { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(460px, 62vh, 640px); padding: calc(var(--nav-h) + 48px) var(--gutter) clamp(48px, 6vw, 80px); text-align: center; overflow: hidden; }
.posthero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.posthero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .62); }
.posthero__in { position: relative; z-index: 1; max-width: 960px; display: grid; justify-items: center; }
.posthero .crumb { justify-content: center; color: rgba(255, 255, 255, .7); }
.posthero .byline { margin-bottom: 24px; text-align: left; }
.posthero .post__lead { color: rgba(255, 255, 255, .8); }
.post { position: relative; isolation: isolate; }
.post__body { padding-top: clamp(48px, 6vw, 80px); }
/* a line of the post pulled out, larger, with the green rule our stories' quotes have */
.post__pull { margin: 36px 0; padding-left: 22px; border-left: 2px solid var(--green); }
.post__pull p { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; letter-spacing: -.025em; color: #fff; }
.post__pull p::before { content: "“"; } .post__pull p::after { content: "”"; }
/* Partners: one Get started under the four steps, centred (Elias, 4 Nov 2026) */
.steps__cta { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); }
/* what a story's results were measured on, under its figures (4 Nov 2026) */
.story-basis { margin-top: 18px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .5); }

/* the rule-based EMS apart from the three Pleevi tiers, "for comparison", with "vs" between (Robin; Elias, 6 Nov 2026:
   "Keep the rule-based EMS but separate it from the 3 Pleevi tiers"); on a phone the comparison sits above the tiers */
.planswitches { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px clamp(14px, 1.6vw, 22px); margin-top: clamp(38px, 4vw, 48px); }
.planswitches > .planswitch { margin-top: 0; }
.planswitch.planswitch--ref { grid-template-columns: auto; background: transparent; border: 1px dashed rgba(255, 255, 255, .2); }
.planswitch--ref button[aria-pressed="false"] { background: transparent; color: rgba(255, 255, 255, .5); }
.planswitch__vs { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .35); }
@media (max-width: 640px) {
  .planswitches { flex-direction: column; gap: 10px; }
  .planswitches > .planswitch:not(.planswitch--ref) { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
  .planswitches .planswitch button { padding-inline: 6px; }
  .planswitches .planswitch__tier { font-size: 9.5px; letter-spacing: .08em; }
}

/* Product's tour: Back, top left of the drawing while a part is zoomed in, to the whole site again (Wout; Elias, 6 Nov 2026) */
.hood__back { position: absolute; top: clamp(10px, 1.6vw, 18px); left: clamp(10px, 1.6vw, 18px); z-index: 3; padding: 8px 14px 9px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: rgba(8, 12, 10, .82); color: #fff; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s, background-color .2s, color .2s, border-color .2s; }
.hood:not([data-step="site"]) .hood__back { opacity: 1; visibility: visible; transition-delay: .4s, .4s, 0s, 0s, 0s; }
.hood__back:hover, .hood__back:focus-visible { background: var(--green); border-color: var(--green); color: #000; outline: none; }
@media (max-width: 700px) { .hood__back { padding: 5px 11px 6px; font-size: 12px; } }
/* phones: the four parts two by two and compact, so they stay close to the drawing they open (6 Nov 2026: "not working on mobile") */
@media (max-width: 600px) {
  .hero--tour .hood__steps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero--tour .hood__step { padding: 10px 12px 12px; }
  .hero--tour .hood__vis { margin: -2px 0 4px; }
  .hero--tour .hood__vis .isox { max-height: 96px; }
  .hero--tour .hood__t { font-size: 15px; }
  .hero--tour .hood__step .hood__d { display: none; }
  .hero--tour .hood__more { margin: 8px 0 0 12px; font-size: 14px; }
}
/* About: the customer logos under the headline, as on the homepage, with room before the office photo (6 Nov 2026) */
.phero + .trustbar { margin-bottom: clamp(40px, 5vw, 72px); }

/* Cookie banner and "Cookie settings" footer link, added by assets/analytics.js on live deploys (6 Nov 2026) */
.consent {
  position: fixed; z-index: 90; right: 16px; bottom: 16px; left: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  max-width: 560px; margin-left: auto; padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  background: #111; color: #fff; box-shadow: 0 18px 48px -20px rgba(0, 0, 0, .7);
}
.consent__text { flex: 1 1 280px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.consent__text a { color: var(--green-soft); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 10px; }
.footer__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color .2s; }
.footer__cookies:hover { color: var(--green-soft); }
.footer__cookies:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 3px; }