/* ===========================================================================
   Enviro landing page.
   Tokens, type scale and component idiom are lifted from the platform's own
   stylesheet (web/src/app.css) so the page reads as the product, not as
   marketing about the product. Two rules from that file are load-bearing here:
     - --brand (#539562) is identity only. Never body text, never a button label.
     - --brand-ink (#42764E) is the interactive green. AA in both directions.
   =========================================================================== */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* brand */
  --brand: #539562;
  --brand-ink: #42764E;
  --brand-hover: #335C3C;
  --brand-50: #F2F8F3;
  --brand-100: #DEEDE2;
  --brand-200: #B7D7BE;

  /* neutral ramp, hue-locked to the logo ink's cool cast */
  --n-0: #FFFFFF;
  --n-25: #F8FAFA;
  --n-50: #F1F4F4;
  --n-100: #E3E7E8;
  --n-200: #CDD4D5;
  --n-300: #B6C1C3;
  --n-400: #819498;
  --n-500: #546568;
  --n-600: #44565A;
  --n-900: #1D2729;

  /* dark ground, one step below the logo ink */
  --d-900: #141C1D;
  --d-800: #1D2729;
  --d-700: #263436;
  --d-600: #35474A;

  /* severity: reserved strictly for severity */
  --critical: #A9392D;
  --serious: #9C5B11;

  --font: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* the platform's six sizes, extended upward for a page you read at arm's length */
  --t-micro: 11px;
  --t-small: 13px;
  --t-body: 16px;
  --t-lede: 19px;
  --t-h3: 19px;
  --t-h2: clamp(28px, 3.4vw, 40px);
  --t-h1: clamp(33px, 4.1vw, 47px);
  --t-metric: clamp(26px, 3vw, 34px);

  --w-normal: 400;
  --w-medium: 500;
  --w-bold: 600;
  --w-black: 800;

  /* no radius, no blur: flat blocks with a hard-edge offset shadow instead
     of a soft drop shadow. the offset carries the brand colour, so the
     "highlight" the interface throws is always the theme colour, never a
     grey blur. */
  --radius: 0;
  --shadow-hairline: none;
  --shadow-float: none;
  --shadow-lift: none;
  --block: 6px 6px 0 var(--brand-ink);
  --block-lg: 10px 10px 0 var(--brand-ink);
  --block-dark: 6px 6px 0 var(--brand);
  --block-ink: 5px 5px 0 var(--d-900);

  --wrap: 1140px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--n-0);
  color: var(--n-900);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-normal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

b, strong { font-weight: var(--w-bold); }

.num, b, .count, table td, table th { font-variant-numeric: tabular-nums; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--brand-hover); }

:focus-visible {
  outline: 2px solid rgba(66, 118, 78, .75);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--n-0);
  border: 2px solid var(--n-900);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- top bar
   56px, exactly the app's topbar height, so the two feel continuous. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 56px;
  background: var(--n-0);
  border-bottom: 2px solid var(--n-900);
}

.topbar-in {
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; color: inherit; }

/* The real lockup, inlined from assets/logo.svg so its ink can follow the
   surface. "en" is brand green and "viro" is ink in the original artwork; the
   classes preserve that split rather than recolouring the whole mark. */
.lockup { height: 34px; width: auto; display: block; }
.lg-ink { fill: var(--n-900); }
.lg-green { fill: var(--brand); }

.topnav { display: flex; gap: 20px; margin-left: auto; }
.topnav a { color: var(--n-500); font-size: var(--t-small); font-weight: var(--w-medium); }
.topnav a:hover { color: var(--n-900); }

.topactions { display: flex; align-items: center; gap: 8px; }

.action-button {
  height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid transparent;
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.action-button.primary { color: #fff; background: var(--brand-ink); }
.action-button.primary:hover { color: #fff; background: var(--brand-hover); }
.action-button:not(.primary) { color: var(--n-600); background: transparent; border-color: var(--n-200); }
.action-button:not(.primary):hover { color: var(--n-900); border-color: var(--n-900); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid transparent;
  font-size: 15px;
  font-weight: var(--w-bold);
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease),
              transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn.full { width: 100%; margin-top: auto; }

/* a hard, unblurred offset block in the brand colour: the button sits above
   its own shadow and presses flat onto it on click, instead of floating on
   a soft grey blur. */
.btn-primary {
  color: #fff;
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  box-shadow: var(--block-dark);
}
.btn-primary:hover { color: #fff; background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-primary:active { color: #fff; transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--brand); }

.btn-ghost { color: var(--n-900); background: var(--n-0); border-color: var(--n-900); }
.btn-ghost:hover { color: #fff; background: var(--n-900); }
.btn-ghost:active { color: #fff; transform: translate(1px, 1px); }

.btn-ghost-dark { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .5); }
.btn-ghost-dark:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-ghost-dark:active { color: #fff; transform: translate(1px, 1px); }

/* ---------------------------------------------------------------- panel
   The page's structural unit is the app's floating panel: hairline border,
   6px radius, white on a cool ground. */

.panel {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-top: 3px solid var(--n-900);
}
.panel.pad { padding: 24px 22px 26px; }

.panel-head {
  padding: 13px 22px 12px;
  border-bottom: 1px solid var(--n-200);
}
.panel-body { padding: 24px 22px 26px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--n-500);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--brand); flex: none; }
.eyebrow.center { justify-content: center; text-align: center; }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--d-900);
  overflow: hidden;
}

/* a graticule, uncropped: the map's own unit, used as flat technical texture
   rather than a blurred glow. */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(183, 215, 190, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(183, 215, 190, .07) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* the highlight: one flat, hard-edged block of the brand colour, not a soft
   radial glow. it sits behind the device frame and reappears as that
   frame's offset shadow. */
.hero-glow {
  position: absolute;
  top: 13%;
  right: 0;
  width: 46%;
  height: 60%;
  background: var(--brand);
  pointer-events: none;
}

.hero-in {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 90px 24px 74px;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: 52px;
  align-items: center;
}

.hero-copy .eyebrow { color: var(--brand-200); }

.hero-h1 {
  margin: 16px 0 0;
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.hero-h1 .s { display: inline-block; }
.hero-h1 .hl { color: var(--d-900); background: var(--brand); padding: 0 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.hero-sub {
  margin: 20px 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, .70);
  font-size: var(--t-lede);
  line-height: 1.55;
}
.hero-sub strong { color: #fff; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.hero-fine {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .46);
  font-size: var(--t-small);
  max-width: 50ch;
}

/* the device: the real app, bleeding off the right edge */
.hero-device { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.device {
  position: relative;
  width: calc(100% + 120px);
  margin-left: 28px;
  aspect-ratio: 1900 / 1188;
  border: 2px solid rgba(255, 255, 255, .22);
  background: var(--d-700);
  overflow: hidden;
  /* the highlight: a flat, hard-edged block of the brand colour behind the
     frame, not a soft ambient drop shadow. */
  box-shadow: -28px 28px 0 var(--brand);
}

.hero-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-shot.is-on { opacity: 1; }

.hero-caption {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .56);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-caption .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(83, 149, 98, .22);
  animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(83, 149, 98, .22); }
  50% { box-shadow: 0 0 0 8px rgba(83, 149, 98, .05); }
}

/* stat strip sits on the hero's lower edge, like the app's status row */
.statstrip {
  position: relative;
  border-top: 3px solid var(--brand);
  background: var(--d-900);
}
.statstrip-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 22px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .09); padding-left: 24px; }
.stat b {
  color: #fff;
  font-size: var(--t-metric);
  font-weight: var(--w-bold);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.stat small { color: rgba(255, 255, 255, .62); font-size: var(--t-small); }

/* ---------------------------------------------------------------- bands */

.band { padding: 92px 0; background: var(--n-0); }
.band.alt { background: var(--n-25); border-block: 2px solid var(--n-900); }
.band.dark { background: var(--d-800); color: #fff; }
.band.providers { padding: 40px 0; background: var(--n-0); border-bottom: 2px solid var(--n-900); }

.provider-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
}
.provider-list li {
  color: var(--n-600);
  font-size: 15px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
}

.sec-head { max-width: 62ch; margin-bottom: 44px; }
.sec-head.tight { margin-top: 76px; }
.sec-head h2 {
  margin: 14px 0 0;
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.sec-head .h2-small { font-size: clamp(24px, 2.6vw, 31px); }
.sec-head .lede { margin: 14px 0 0; color: var(--n-500); font-size: var(--t-lede); line-height: 1.55; }
.band.dark .sec-head .lede { color: rgba(255, 255, 255, .66); }
.band.dark .eyebrow { color: var(--brand-200); }

h3 {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  letter-spacing: -.015em;
  line-height: 1.25;
}

p { margin: 10px 0 0; }
.panel.pad p, .claim p { color: var(--n-500); }

/* ---------------------------------------------------------------- grids */

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

.num-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 3px 8px;
  background: var(--n-900);
  color: #fff;
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
}

/* ---------------------------------------------------------------- steps */

.steps {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.steps > li { display: flex; flex-direction: column; gap: 14px; }
.steps > li > div > p { color: var(--n-500); font-size: 15px; }
.step-n {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-ink);
  font-size: var(--t-small);
  font-weight: var(--w-bold);
}

/* ---------------------------------------------------------------- shots
   Screenshots sit in a frame that echoes the app's map viewport: a flat
   2px edge, square corners, cool ground behind. No filter on the image
   itself — these are evidence, so the colour stays true — but the frame
   throws a hard offset block in the brand colour behind it. */

.shot { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.shot .frame {
  border: 2px solid var(--n-900);
  background: var(--n-200);
  overflow: hidden;
  box-shadow: var(--block);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.shot .frame.dark-frame { border-color: rgba(255, 255, 255, .3); box-shadow: var(--block-dark); }
.shot.wide { margin-top: 8px; }

.shot figcaption {
  max-width: 76ch;
  color: var(--n-500);
  font-size: var(--t-small);
  line-height: 1.6;
}
.shot figcaption b { color: var(--n-900); }
.shot figcaption .eyebrow { margin-bottom: 5px; }
.band.dark .shot figcaption { color: rgba(255, 255, 255, .62); }
.band.dark .shot figcaption b { color: #fff; }

/* ---------------------------------------------------------------- registry */

.groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 34px;
  padding-bottom: 8px;
}
.group h3 {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--n-100);
  color: var(--n-500);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.group li { font-size: 15px; color: var(--n-900); }
.group li em {
  margin-left: 6px;
  color: var(--n-400);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 22px;
}
.gallery .shot { gap: 12px; }
.gallery .shot .frame { box-shadow: none; aspect-ratio: 4 / 3; }
.gallery .shot .frame img { width: 100%; height: 100%; object-fit: cover; }
.gallery .shot:hover .frame { box-shadow: var(--block); }
.gallery figcaption { display: flex; flex-direction: column; gap: 6px; max-width: none; }
.tag {
  display: inline-block;
  width: max-content;
  padding: 2px 7px;
  background: var(--brand-ink);
  color: #fff;
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.gallery figcaption b { font-size: 17px; letter-spacing: -.015em; }
.gallery figcaption .cap { color: var(--n-500); font-size: var(--t-small); line-height: 1.5; }

/* ---------------------------------------------------------------- split */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split-copy { display: flex; flex-direction: column; gap: 34px; }
.claim { padding-left: 18px; border-left: 2px solid var(--brand-100); }
.claim p { font-size: 15px; }
.split-media .sticky { position: sticky; top: 88px; }

/* ---------------------------------------------------------------- table */

.tablewrap {
  overflow-x: auto;
  border: 2px solid var(--brand);
}
table { border-collapse: collapse; width: 100%; min-width: 720px; }
thead th {
  text-align: left;
  padding: 13px 18px;
  background: var(--brand-ink);
  border-bottom: 2px solid var(--brand);
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
tbody th, tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--d-700);
  vertical-align: top;
  font-size: var(--t-small);
  line-height: 1.55;
  text-align: left;
}
tbody th { color: #fff; font-weight: var(--w-bold); width: 22%; }
tbody td { color: rgba(255, 255, 255, .72); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.no { color: #E9A79E; }
td.yes { color: var(--brand-200); }

.closing {
  max-width: 76ch;
  margin: 24px 0 48px;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
}

/* ---------------------------------------------------------------- pricing */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.tier {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px 26px;
  background: var(--n-0);
  border: 2px solid var(--n-900);
}
.tier.featured { border-color: var(--brand-ink); box-shadow: var(--block); }
.tier-name {
  color: var(--brand-ink);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tier-price { font-size: var(--t-metric); font-weight: var(--w-black); letter-spacing: -.02em; line-height: 1.1; }
.tier-for { color: var(--n-500); font-size: var(--t-small); }
.tier ul {
  list-style: none;
  margin: 16px 0 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--n-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tier li { position: relative; padding-left: 20px; color: var(--n-600); font-size: 15px; }
.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--brand);
}
.soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--n-900);
  color: #fff;
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.fineprint { margin-top: 22px; color: var(--n-500); font-size: var(--t-small); max-width: 76ch; }

/* ---------------------------------------------------------------- faq */

.faq { display: flex; flex-direction: column; }
details {
  border-top: 1px solid var(--n-200);
  padding: 4px 0;
}
details:last-child { border-bottom: 1px solid var(--n-200); }
summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 40px 16px 0;
  position: relative;
  font-size: 17px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--n-400);
  border-bottom: 1.5px solid var(--n-400);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
summary:hover { color: var(--brand-ink); }
details > p { margin: 0 0 20px; max-width: 76ch; color: var(--n-500); font-size: 15px; }

/* ---------------------------------------------------------------- cta */

.band.cta { padding: 96px 0 104px; text-align: center; border-top: 3px solid var(--brand); }
.band.cta h2 {
  margin: 0 auto;
  max-width: 24ch;
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.band.cta p { margin: 18px auto 0; max-width: 58ch; color: rgba(255, 255, 255, .68); font-size: var(--t-lede); }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ---------------------------------------------------------------- footer */

.footer { padding: 40px 0 56px; background: var(--n-0); border-top: 1px solid var(--n-100); }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--n-100);
}
.footer-top nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-top nav a { color: var(--n-500); font-size: var(--t-small); font-weight: var(--w-medium); }
.footer-top nav a:hover { color: var(--n-900); }
.attrib { margin-top: 20px; color: var(--n-400); font-size: 12px; line-height: 1.7; max-width: 90ch; }

/* ---------------------------------------------------------------- motion
   One idiom: a short rise with a fade, on a single easing curve. Nothing
   moves sideways, nothing bounces, nothing loops except the live dot. */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

.hero-copy .eyebrow, .hero-h1, .hero-sub, .hero-cta, .hero-fine, .hero-device {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .9s var(--ease) forwards;
}
.l1 { animation-delay: .06s; }
.l2 { animation-delay: .14s; }
.l3 { animation-delay: .24s; }
.l4 { animation-delay: .38s; }
.l5 { animation-delay: .50s; }
.l6 { animation-delay: .62s; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-copy .eyebrow, .hero-h1, .hero-sub, .hero-cta, .hero-fine, .hero-device {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .hero-shot { transition: none; }
  .hero-caption .dot { animation: none; }
  .gallery .shot:hover .frame { transform: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .groups { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media .sticky { position: static; }
  .hero-in { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; }
  .device { width: 100%; margin-left: 0; box-shadow: -14px 14px 0 var(--brand); }
  .hero-sub, .hero-fine { max-width: 62ch; }
  /* stacked layout: the block behind the device would otherwise cut across
     the copy above it, so it drops down to sit only behind the device. */
  .hero-glow { top: auto; bottom: 0; right: 0; width: 60%; height: 46%; }
}

@media (max-width: 860px) {
  .topnav { display: none; }
  .topactions .action-button:not(.primary) { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .statstrip-in { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .09); padding-left: 24px; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }
  .hero-in { padding: 64px 24px 76px; }
  .band { padding: 68px 0; }
}

@media (max-width: 620px) {
  .grid-4, .groups, .gallery { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .panel-body { padding: 20px 18px 22px; }
  .panel-head { padding: 12px 18px; }
  .hero-panel { max-width: none; }
  .band.cta { padding: 72px 0 80px; }
  .btn { width: 100%; }
  .hero-cta, .cta-actions { flex-direction: column; }
  /* on a phone the whole desktop frame is unreadable, so crop into the map */
  .device { aspect-ratio: 4 / 3; }
  .hero-shot { object-position: 26% 46%; }
}

/* ===========================================================================
   v2 additions: scroll progress, provider logos, assurance chips, the sticky
   flow, the interactive registry, two-tier pricing, dark footer.
   Motion stays on one curve (--ease) and one idiom (rise + fade), the way the
   app's own transitions do.
   =========================================================================== */

/* ---------------------------------------------------------- scroll progress */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transform-origin: left center;
  transition: width .12s linear;
}

/* ------------------------------------------------------------ bigger brand */

.brand.big .lockup { height: 46px; }

/* --------------------------------------------------------- assurance chips
   The old fine print under the hero buttons was the most reassuring sentence
   on the page and it was set at 13px grey. Three chips, each with the claim in
   front of the caveat. */

.assure {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 46ch;
}
.assure li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  padding: 11px 14px;
  border-left: 3px solid var(--brand);
  background: rgba(255, 255, 255, .04);
  transition: background .2s var(--ease);
}
.assure li:hover { background: rgba(255, 255, 255, .08); }
.assure svg {
  width: 22px; height: 22px;
  padding: 4px;
  background: var(--brand);
  stroke: var(--d-900);
  stroke-width: 2.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.assure b {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: var(--w-bold);
  letter-spacing: -.01em;
}
.assure span { color: rgba(255, 255, 255, .58); font-size: var(--t-small); line-height: 1.5; }

/* ------------------------------------------------------------ provider row */

.band.providers { padding: 46px 0; }

.provider-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px 58px;
}
.provider-list li { display: flex; align-items: center; }
.provider-list img {
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .58;
  transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
/* Optical sizing, not raw height: these lockups have wildly different aspect
   ratios, so matching their box heights makes the wide ones unreadable. */
.provider-list img[alt="Copernicus"]          { height: 38px; max-width: 210px; }
.provider-list img[alt="NASA"]                { height: 38px; }
.provider-list img[alt="Amazon Web Services"] { height: 26px; }
.provider-list img[alt="Element 84"]          { height: 24px; }
.provider-list li:hover img { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
.provider-list .wordlogo {
  height: 38px;
  display: flex;
  align-items: center;
  color: var(--n-500);
  font-size: 21px;
  font-weight: var(--w-medium);
  letter-spacing: -.025em;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.provider-list .wordlogo b { font-weight: var(--w-bold); color: var(--n-600); }
.provider-list li:hover .wordlogo { color: var(--n-900); transform: translateY(-2px); }
.provider-list li:hover .wordlogo b { color: var(--n-900); }

/* -------------------------------------------------------------- the flow
   Steps scroll on the left; one sticky frame on the right swaps to whichever
   step is in view. Below 1040px the sticky frame is dropped and each step
   carries its own screenshot inline. */

.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: start; }

.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.flow-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 18px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--n-100);
  opacity: .5;
  transition: opacity .45s var(--ease);
}
.flow-step:first-child { border-top: 0; }
.flow-step.is-active { opacity: 1; }

.flow-n {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--n-100);
  background: var(--n-0);
  color: var(--n-400);
  font-size: 15px;
  font-weight: var(--w-bold);
  transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.flow-step.is-active .flow-n {
  color: #fff;
  background: var(--brand-ink);
  border-color: var(--brand-ink);
}
.flow-body h3 { margin-bottom: 8px; }
.flow-body p { margin: 0; color: var(--n-500); font-size: 15px; }

.flow-inline { display: none; margin: 16px 0 0; }
.flow-inline img { width: 100%; border: 1px solid var(--n-200); border-radius: var(--radius); }

.flow-media { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }

.flow-frame {
  position: relative;
  aspect-ratio: 1500 / 844;
  border: 1px solid var(--n-200);
  border-radius: var(--radius);
  background: var(--n-200);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.flow-shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.flow-shot.is-on { opacity: 1; transform: none; }

.flow-rail { display: flex; gap: 7px; justify-content: center; }
.flow-tick {
  width: 30px; height: 3px;
  border-radius: 2px;
  background: var(--n-200);
  transition: background .35s var(--ease), width .35s var(--ease);
}
.flow-tick.is-on { background: var(--brand-ink); width: 46px; }

/* ------------------------------------------------------------ the registry */

.reg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.reg-filter {
  height: 33px;
  padding: 0 13px;
  border: 2px solid var(--n-900);
  background: var(--n-0);
  color: var(--n-900);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.reg-filter:hover { background: var(--n-900); color: #fff; }
.reg-filter[aria-pressed="true"] {
  color: #fff;
  background: var(--brand-ink);
  border-color: var(--brand-ink);
}

.reg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 16px 18px;
  border: 2px solid var(--n-200);
  background: var(--n-0);
  cursor: default;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), opacity .3s var(--ease);
}
.mod:hover, .mod:focus-visible {
  border-color: var(--brand-ink);
  box-shadow: var(--block);
}
.mod.is-out { display: none; }

.mod-mark {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-ink);
  transition: background .28s var(--ease), color .28s var(--ease);
}
.mod:hover .mod-mark, .mod:focus-visible .mod-mark { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }
.mod-icon { width: 19px; height: 19px; }

.mod h3 { font-size: 15px; letter-spacing: -.01em; }
.mod p { margin: 0; color: var(--n-500); font-size: var(--t-small); line-height: 1.5; }

.reg-note { margin-top: 22px; color: var(--n-500); font-size: var(--t-small); }
.reg-note b { color: var(--n-900); }

/* -------------------------------------------------------------- pricing v2 */

.tiers.two { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; }
.tier-foot { margin-top: 12px; color: var(--n-400); font-size: var(--t-micro); text-align: center; }
.tier li b { color: var(--n-900); }
.tier.featured li::before { background: var(--brand); }

/* --------------------------------------------------------------- footer v2 */

.footer { padding: 52px 0 60px; background: var(--d-800); border-top: 4px solid var(--brand); }
.footer .lg-ink { fill: #fff; }
.footer-top { align-items: flex-start; padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .10); }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-by {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .42);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.geoai-link { display: inline-flex; }
/* the supplied lockup is drawn on the ink colour, so it sits flush on this band */
.geoai { height: 34px; width: auto; opacity: .92; transition: opacity .25s var(--ease); }
.geoai-link:hover .geoai { opacity: 1; }
.footer-top nav a { color: rgba(255, 255, 255, .58); }
.footer-top nav a:hover { color: #fff; }
.attrib { color: rgba(255, 255, 255, .34); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow-media { display: none; }
  .flow-inline { display: block; }
  .flow-step { opacity: 1; }
  .flow-step .flow-n { color: #fff; background: var(--brand-ink); border-color: var(--brand-ink); }
  .reg-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .reg-grid { grid-template-columns: repeat(2, 1fr); }
  .tiers.two { grid-template-columns: 1fr; }
  .provider-list { gap: 20px 30px; }
  .provider-list img[alt="Copernicus"] { height: 30px; max-width: 165px; }
  .provider-list img[alt="NASA"] { height: 30px; }
  .provider-list img[alt="Amazon Web Services"] { height: 21px; }
  .provider-list img[alt="Element 84"] { height: 20px; }
  .provider-list .wordlogo { height: 30px; font-size: 17px; }
}

@media (max-width: 620px) {
  .lockup { height: 28px; }
  .brand.big .lockup { height: 38px; }
  .reg-grid { grid-template-columns: 1fr; }
  .assure { max-width: none; }
  .footer-top { flex-direction: column; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-shot, .flow-step, .flow-n, .flow-tick, .mod, .provider-list img, .provider-list .wordlogo {
    transition: none !important;
  }
  .flow-step { opacity: 1; }
  .mod:hover { transform: none; }
  .progress span { transition: none; }
}

/* ===========================================================================
   v3: provenance disclosure, selling footer, tier cards.
   =========================================================================== */

/* ------------------------------------------------------- provenance detail
   The Copernicus notice is a licence condition, not decoration, so it stays on
   the page. It belongs here, next to the data it describes, rather than as the
   footer's parting words. */

.provenance {
  max-width: 76ch;
  margin: 0 0 48px;
  border-top: 1px solid var(--d-600);
  border-bottom: 1px solid var(--d-600);
}
.provenance summary {
  padding: 14px 30px 14px 0;
  color: rgba(255, 255, 255, .62);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
}
.provenance summary:hover { color: #fff; }
.provenance summary::after { border-color: rgba(255, 255, 255, .42); }
.provenance > p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .5);
  font-size: var(--t-small);
  line-height: 1.65;
}

/* ------------------------------------------------------------- footer sell */

.footer-pitch {
  margin: 24px 0 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  line-height: 1.55;
}
.footer-pitch b { color: #fff; }
.attrib { margin-top: 18px; }

/* --------------------------------------------------------------- tier cards */

.tier {
  position: relative;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tier:hover { border-color: var(--brand-ink); box-shadow: var(--block); }
.tier.featured:hover { box-shadow: var(--block-lg); }
.tier-flag {
  position: absolute;
  top: 0; left: 0;
  padding: 3px 10px;
  background: var(--brand-ink);
  color: #fff;
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tier-price em { display: block; margin-top: 2px; color: var(--n-400); font-size: var(--t-small); font-style: normal; font-weight: var(--w-normal); letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .tier { transition: none !important; }
  .tier:hover { transform: none; }
}