/*
 * ESG OnSite — landing page.
 * Layout, sizes and colours follow design-reference/mockup-2026-11.png (a 90rem design
 * shown at 64rem: its measurements × 1.4 give the values here). --accent is set per request
 * from ACCENT_COLOR in views/layouts/main.hbs. Motion is driven by classes that
 * public/js/landing.js adds (.is-visible, .is-scrolled, .is-open, .is-loaded); without JS
 * every element renders in its final state.
 */

/* ---------- Fonts (self-hosted, from @fontsource; licences in /fonts) ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-opsz-normal.woff2) format('woff2-variations');
  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+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
}

/* ---------- Tokens ---------- */

:root {
  --accent: #2BF593;
  --on-accent: #04261D;

  --ink: #0D131E;
  --text: #1F2733;
  --text-muted: #4A5463;
  /* Green for text and icons on light backgrounds (4.5:1 on white). */
  --green: #08804C;
  --green-icon: #0E9A5C;

  --page: #F9FAFC;
  --surface: #FFFFFF;
  --band-light: #F1F3F6;
  --band-dark: #10181E;
  --navy: #0F161C;
  --border: #E4E8ED;
  --divider: #DCE1E6;
  --hero-bg: #1B1212;
  --alarm: #FD4E40;
  /* The mockup's red, darkened just enough for white text (4.5:1). */
  --alarm-button: #D93A2F;

  --on-dark: #E6EBEF;
  --on-dark-muted: #A9B3BC;
  --on-dark-nav: #EEF1F4;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Fluid type: phone → desktop. */
  --fs-h1: clamp(2.125rem, 0.45rem + 2.8vw, 2.9375rem);
  /* Every section title has the same size, and fits a 4-column heading. */
  --fs-h2: clamp(1.625rem, 1rem + 1.2vw, 2rem);
  --fs-lead: clamp(1rem, 0.9rem + 0.25vw, 1.0625rem);
  /* One vertical rhythm: the space between consecutive blocks of the page. */
  --space: 2.5rem;

  --page-w: 76rem;
  /* The 12-column grid every section lines up on, from 360px up. --gutter is the margin around
     the page column; the bands reach --breakout past it on each side, so their content sits on
     the same columns. */
  --grid: repeat(12, minmax(0, 1fr));
  --col-gap: clamp(0.5rem, 2.2vw, 2rem);
  --gutter: clamp(1.125rem, 5vw, 2.5rem);
  --breakout: calc(var(--gutter) - 0.75rem);
  --header-h: 3.875rem;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --focus-ring: var(--green);

  --stripes: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 0.5rem, transparent 0.5rem 1rem);
  --shimmer: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
}

/* ---------- Scale ---------- */

/* From 1101px up, the whole page scales with the window, so it keeps its proportions on any
   screen: 1rem is 16px at 1440px and grows half as fast as the window, between 14 and 20px,
   so big screens get more air rather than bigger type. Sizes are in rem (hairlines stay in px). Phones and tablets keep the browser's text size. At 1440px the
   12 columns are 72px wide with 32px between them. */
@media (min-width: 1101px) {
  html { font-size: clamp(87.5%, 0.5rem + 0.5556vw, 125%); }
  :root {
    --fs-h1: 2.9375rem;
    --fs-h2: 2rem;
    --fs-lead: 1.0625rem;
    --col-gap: 2rem;
    --gutter: 4.4375rem;
    --breakout: 2.3125rem;
  }
  .band--wide { --breakout: 3.6875rem; }
  /* Short texts break where the mockup breaks them ("\n"); on smaller screens they wrap freely. */
  .hero__lead,
  .pillar__text,
  .platform__copy .lead,
  .why__text,
  .final-cta__text { white-space: pre-line; }
}

/* Phones: the bands run edge to edge. */
@media (max-width: 700px) {
  :root { --breakout: var(--gutter); }
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background: var(--page);
}

section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

h2,
h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; }

:where(a, button, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0.1875rem; }
.site-header,
.hero,
.band--dark,
.error-page { --focus-ring: var(--accent); }

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

/* Page column, and the wider rounded bands that sit just outside it: their padding is the
   breakout, so what they hold lines up with the page column. */
.wrap { width: min(100% - 2 * var(--gutter), var(--page-w)); margin-inline: auto; box-sizing: border-box; }
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: min(100% - 2 * (var(--gutter) - var(--breakout)), var(--page-w) + 2 * var(--breakout));
  margin-inline: auto;
  padding-inline: var(--breakout);
  border-radius: 0.875rem;
}
@media (max-width: 700px) {
  .band { border-radius: 0; }
}
.band--dark {
  color: #FFFFFF;
  background:
    radial-gradient(ellipse 32% 90% at 92% 115%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(100deg, #0F161B 0%, #141D23 55%, #10181E 100%);
}
.band--light { background: linear-gradient(90deg, #F0F2F5, #F4F6F9); }
/* Thin accent stroke drawn across a dark band. */
.band__line { position: absolute; z-index: -1; overflow: visible; pointer-events: none; }
.band__line path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 75%, transparent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7812rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--green);
}
.eyebrow--accent { color: var(--accent); }

.section-title {
  margin: 0.75rem 0 0;
  font-size: var(--fs-h2);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  /* A title may carry a line break ("\n") where the design breaks it. */
  white-space: pre-line;
}
.band--dark .section-title { color: #FFFFFF; }

.lead { margin: 0; font-size: var(--fs-lead); line-height: 1.35; color: var(--text-muted); }
.lead--on-dark { color: var(--on-dark-muted); }

.link-arrow { font-size: 0.9375rem; font-weight: 600; color: var(--green); text-decoration: none; }
.link-arrow__icon { display: inline-block; width: 1rem; height: 1rem; vertical-align: -0.15em; transition: transform 0.2s var(--ease-out); }
.link-arrow:hover .link-arrow__icon,
.btn:hover .link-arrow__icon { transform: translateX(0.1875rem); }

.highlight { color: var(--accent); }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  box-sizing: border-box;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.5rem;
  transition:
    box-shadow 0.2s,
    filter 0.2s,
    transform 0.25s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn .link-arrow__icon { width: 0.9375rem; height: 0.9375rem; }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { filter: brightness(1.05); box-shadow: 0 0.5rem 1.5rem -0.625rem var(--accent); }
/* A light sheen sweeps across once on hover. */
.btn--accent::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--shimmer);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn--accent:hover::after { transform: translateX(110%); transition: transform 0.6s var(--ease-out); }
.btn--sm { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.7812rem; border-radius: 0.4375rem; }
.btn--lg { min-height: 2.625rem; padding: 0 1.375rem; font-size: 0.9375rem; }

/* "See how it works": a ring with a play mark, then the label. */
.play-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8125rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
}
.play-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4375rem;
  height: 2.4375rem;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.play-link__icon svg { width: 1.0625rem; height: 1.0625rem; margin-left: 2px; fill: currentColor; }
.play-link:hover .play-link__icon { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

/* ---------- Photos ---------- */

/* Striped stand-in until a real photo is supplied, with a short shimmer. */
.placeholder-photo {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E3E8ED;
  background-image: var(--stripes);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
}
.placeholder-photo::after,
.js .media[data-media]:not(.is-loaded)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shimmer);
  background-size: 250% 100%;
  animation: shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}
/* Loading photos shimmer until they arrive; empty slots only twice (WCAG 2.2.2: under 5 s). */
.placeholder-photo::after { animation-iteration-count: 2; }

/* Real photo slot (views/partials/picture.hbs). */
.media { position: relative; overflow: hidden; }
.media picture { display: contents; }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js .media[data-media] img { opacity: 0; transition: opacity 0.5s ease; }
.js .media[data-media].is-loaded img { opacity: 1; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: #FFFFFF;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}
/* Home page: over the hero photo. It scrolls away without JS; with it, it stays and turns solid. */
.site-header--overlay { position: absolute; left: 0; right: 0; background: transparent; }
.js .site-header--overlay { position: fixed; }
.site-header.is-scrolled {
  background: rgba(15, 22, 28, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(0.75rem);
  backdrop-filter: saturate(140%) blur(0.75rem);
  box-shadow: 0 0.625rem 1.875rem -0.75rem rgba(0, 0, 0, 0.5);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.site-menu { display: contents; }
.brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.brand__mark { width: 1.625rem; height: 1.625rem; }
.brand__name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  margin: 0 auto 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-dark-nav);
}
.site-nav a { position: relative; text-decoration: none; transition: color 0.15s; }
.site-nav a:hover,
.site-nav a[aria-current] { color: #FFFFFF; }
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.375rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease-out);
}
.site-nav a[aria-current]::after { transform: scaleX(1); }
.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.site-header__signin { font-size: 0.875rem; font-weight: 500; text-decoration: none; color: var(--on-dark-nav); }
.site-header__signin:hover { color: #FFFFFF; }

.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
}
.menu-toggle__bar {
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.25s var(--ease-out),
    opacity 0.2s;
}
.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

@media (min-width: 1101px) {
  .site-header__inner { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); }
  .brand { grid-column: 1 / span 3; }
  .site-nav { grid-column: 4 / span 5; margin: 0; }
  .site-header__actions { grid-column: 9 / -1; justify-self: end; }
}
@media (max-width: 1100px) {
  .site-nav { gap: 0.5rem 1.75rem; }
}

/* Collapsible menu below 60rem (only when JS can open it again). */
@media (max-width: 960px) {
  .js .menu-toggle { display: inline-flex; }
  .js .site-menu { display: none; flex-basis: 100%; flex-direction: column; gap: 1.25rem; padding: 0.25rem 0 1rem; }
  .js .site-header.is-open .site-menu { display: flex; animation: menu-in 0.25s var(--ease-out); }
  .js .site-nav { flex-direction: column; gap: 0; margin: 0; font-size: 1.0625rem; }
  .js .site-nav a { padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .js .site-nav a::after { display: none; }
  .js .site-header__actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .js .site-header__signin { padding: 0.75rem 0; font-size: 1.0625rem; }
  .js .site-header__actions .btn { min-height: 2.75rem; }
  .site-header.is-open { background: var(--navy); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* As tall as the mockup's hero; the copy sits in the middle of the space under the header. */
  display: grid;
  min-height: 27.8125rem;
  color: #FFFFFF;
  background:
    radial-gradient(ellipse 45% 80% at 0% 45%, #2A1610 0%, transparent 70%),
    linear-gradient(90deg, #1B1212 0%, #1D1515 45%, #2A2023 100%);
}
/* The photo sits right of the copy, fading into the background on its left and top edges. */
.hero__photo {
  position: absolute;
  z-index: -1;
  top: 3.5rem;
  bottom: 0;
  right: 0;
  /* From the end of column 5 (30.5rem into the page column). */
  left: max(40%, 50% - var(--page-w) / 2 + 30.5rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
  mask-composite: intersect;
}
.hero__photo img { object-position: right top; }
.hero__inner {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  align-self: center;
  padding: calc(var(--header-h) + 2.4375rem) 0 2.3125rem;
}
.hero__inner > * { grid-column: 1 / span 6; }
.hero__title {
  margin: 0;
  max-width: 10.6em;
  font-size: var(--fs-h1);
  line-height: 0.97;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.hero__lead { margin: 1.1875rem 0 0; max-width: 31em; font-size: var(--fs-lead); line-height: 1.38; color: #EDE7E5; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.875rem; margin-top: 1.875rem; }

@media (max-width: 960px) {
  /* The photo turns into the background, under a darker veil. */
  .hero__photo { top: 0; left: 0; -webkit-mask-image: none; mask-image: none; }
  .hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(20, 13, 12, 0.92) 0%,
      rgba(20, 13, 12, 0.75) 60%,
      rgba(20, 13, 12, 0.45) 100%
    );
  }
  .hero__photo img { object-position: 70% center; }
  .hero__inner { padding: calc(var(--header-h) + 3rem) 0 3rem; }
  .hero__inner > * { grid-column: 1 / span 9; }
}
@media (max-width: 700px) {
  .hero__inner > * { grid-column: 1 / -1; }
}

/* ---------- Pillars ---------- */

.pillars { background: linear-gradient(180deg, #F3F5F8, #F6F7FA); }
.pillars__inner {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  /* The row sits in the middle of the band; the pillars start on the same top line. */
  align-content: center;
  align-items: start;
  min-height: 7.1875rem;
}
.pillar {
  position: relative;
  grid-column: span 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  padding: 1rem 0;
}
.pillar > div { grid-column: 2 / -1; }
.pillar + .pillar::before {
  content: '';
  position: absolute;
  left: calc(var(--col-gap) / -2);
  top: 50%;
  height: 3.3125rem;
  margin-top: -1.625rem;
  border-left: 1px solid var(--divider);
}
/* Pulled up and left so the drawn shape, not its box, lines up with the title and the column. */
.pillar__icon { flex: none; width: 3rem; height: 3rem; margin: -0.25rem 0 0 -0.625rem; color: var(--green-icon); }
.pillar__title {
  margin: 0;
  max-width: 9.5em;
  font-size: 1.0625rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pillar__text { margin: 0.4375rem 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--text-muted); }

@media (max-width: 860px) {
  .pillars__inner { padding: 0.5rem 0; }
  .pillar { grid-column: 1 / -1; display: flex; gap: 1.5rem; }
  .pillar + .pillar { border-top: 1px solid var(--divider); }
  .pillar + .pillar::before { display: none; }
  .pillar__title { max-width: none; }
}

/* ---------- Platform ---------- */

.platform {
  /* The band below keeps the distance (--space). */
  padding: var(--space) 0 0;
}
/* Two halves of the grid: the photo on columns 1-6, the copy on 7-12, both starting on the same
   line (the photo's top and the eyebrow over the headline). */
.platform__inner { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: start; }
.platform__media {
  position: relative;
  grid-column: 1 / span 6;
  aspect-ratio: 1497 / 953;
  isolation: isolate;
}
.platform__photo { position: absolute; inset: 0; }
.platform__copy { grid-column: 7 / -1; }
.platform__copy .lead { margin-top: 0.875rem; max-width: 33em; }
.platform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9375rem var(--col-gap);
  margin-top: 1.5625rem;
}
.feature {
  display: flex;
  /* Top-aligned, so the titles of a row line up when one description takes two lines. */
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.125rem;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6875rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.25s var(--ease-out);
}
/* Cards lift a little under the pointer. */
.feature:hover,
.person:hover { transform: translateY(-3px); }
.feature:hover {
  border-color: color-mix(in srgb, var(--green-icon) 35%, var(--border));
  box-shadow: 0 0.625rem 1.5rem -1.125rem rgba(13, 19, 30, 0.35);
}
.feature__icon { flex: none; width: 2.25rem; height: 2.25rem; margin: 0 -0.25rem; color: var(--green-icon); }
.feature__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.feature__text { margin: 0.25rem 0 0; font-size: 0.8438rem; line-height: 1.35; color: var(--text-muted); }

/* Narrower screens: the photo above the copy. */
@media (max-width: 1100px) {
  .platform__inner { row-gap: 2rem; }
  .platform__media { grid-column: 1 / span 8; }
  .platform__copy { grid-column: 1 / -1; }
  .feature { gap: 1.125rem; padding-left: 1.125rem; }
}
@media (max-width: 600px) {
  .platform__media { grid-column: 1 / -1; }
  .platform__grid { grid-template-columns: 1fr; }
}

/* ---------- Emergency Stop ---------- */

.estop {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  align-items: center;
  min-height: 11.3125rem;
  margin-top: var(--space);
  overflow: visible;
}
.estop__head { grid-column: 1 / span 4; }
.estop .section-title { margin-top: 0.8125rem; }
.estop__list {
  grid-column: 5 / span 5;
  /* The rule between the heading and the list sits on the column line. */
  padding: 0.75rem 0 0.75rem var(--col-gap);
  border-left: 1px solid color-mix(in srgb, var(--accent) 55%, var(--band-dark));
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  list-style: none;
  font-size: 0.8594rem;
  line-height: 1.4;
  color: var(--on-dark);
}
.estop__list li { display: flex; align-items: center; gap: 0.75rem; }
.check-circle { flex: none; width: 1.1875rem; height: 1.1875rem; color: var(--accent); }
.estop__line { right: calc(var(--breakout) + 15.8125rem); bottom: 0; width: 7.75rem; height: 6.5rem; }

/* App screen poking out of the top of the band, its right edge on the end of column 12; the
   band's bottom edge cuts it off, and only it, so the phone's shadow is not boxed in. */
.estop__phone { position: absolute; right: var(--breakout); top: -0.875rem; bottom: 0; width: 16.25rem; clip-path: inset(-3rem -3rem 0 -3rem); }
.phone {
  position: relative;
  height: 18.75rem;
  box-sizing: border-box;
  padding: 1rem 1rem;
  /* Metal frame: a dark rim, a light edge, then the black band around the screen. */
  border: 0.25rem solid #2A2F35;
  border-radius: 2.375rem;
  background: #0A0F14;
  box-shadow:
    inset 0 0 0 1.5px #5E646B,
    inset 0 0 0 0.3125rem #080B0E,
    0 1.25rem 2.5rem rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
}
/* The notch, hanging from the top of the screen, with its camera. */
.phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6rem;
  height: 1.5625rem;
  margin-left: -3rem;
  border-radius: 0 0 0.9375rem 0.9375rem;
  background: #030507;
}
.phone__notch::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  right: 1.375rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #17202B;
}
.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.phone__status svg { width: 2.125rem; height: 0.625rem; }
.phone__alert { display: flex; align-items: flex-start; gap: 0.5625rem; margin-top: 1.75rem; }
.phone__warning { flex: none; width: 2rem; height: 2rem; margin-top: -2px; color: var(--alarm); filter: drop-shadow(0 0 0.375rem rgba(253, 78, 64, 0.6)); }
.phone__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.phone__text { margin-top: 0.375rem; font-size: 0.625rem; line-height: 1.5; letter-spacing: -0.005em; color: #E1E5E8; white-space: pre-line; }
.phone__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.1875rem;
  margin-top: 1.125rem;
  border-radius: 0.75rem;
  background: var(--alarm-button);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .estop { row-gap: 1.25rem; padding-block: 2.25rem; }
  .estop__head,
  .estop__list { grid-column: 1 / span 7; }
  .estop__list { padding: 0; border-left: 0; }
  .estop__line { display: none; }
}
@media (max-width: 700px) {
  .estop { padding-block: 2rem 0; }
  .estop__head,
  .estop__list { grid-column: 1 / -1; }
  .estop__phone {
    position: relative;
    grid-column: 1 / -1;
    justify-self: center;
    right: auto;
    top: auto;
    width: 15rem;
    height: 11.875rem;
    margin-top: 0.75rem;
  }
}

/* Until the scaled layout reaches its proportions (1260px), the lines would cross the text. */
@media (max-width: 1260px) {
  .estop__line, .final-cta__line { display: none; }
}

/* ---------- Why it matters ---------- */

.why {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  align-items: center;
  padding: var(--space) 0;
}
.why__head { grid-column: 1 / span 4; }
.why__body {
  grid-column: 5 / -1;
  display: flex;
  align-items: center;
  gap: var(--col-gap);
  padding: 0.375rem 0 0.375rem var(--col-gap);
  border-left: 2px solid #BBE8D5;
}
.why .section-title { margin-top: 0.625rem; }
.why__tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 0.5625rem;
  background: #E3FAF0;
  color: var(--green-icon);
}
.why__tile svg { width: 2rem; height: 2rem; }
.why__text {
  margin: 0;
  max-width: 27em;
  font-size: var(--fs-lead);
  line-height: 1.33;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .why { row-gap: 1.5rem; }
  .why__head,
  .why__body { grid-column: 1 / -1; }
  .why__body { gap: 1.25rem; padding: 0; border-left: 0; }
}

/* ---------- Security & data ---------- */

.security {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  align-items: center;
  min-height: 7.9375rem;
}
.security__head { grid-column: 1 / span 4; padding: 1.1875rem 0; }
.security .section-title { margin-top: 0.625rem; }
.security__items { display: contents; list-style: none; }
.security-item {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text);
}
.security-item::before {
  content: '';
  position: absolute;
  left: calc(var(--col-gap) / -2);
  top: 50%;
  height: 3.25rem;
  margin-top: -1.375rem;
  border-left: 1px solid var(--divider);
}
.security-item svg { width: 2rem; height: 2rem; color: var(--ink); }
.security-item strong { display: block; font-weight: 600; color: var(--ink); }

@media (max-width: 1100px) {
  .security { row-gap: 0.5rem; padding-block: 1.75rem 2rem; }
  .security__head { grid-column: 1 / -1; padding: 0 0 0.75rem; }
  .security-item { grid-column: span 3; }
  .security-item:first-of-type::before { display: none; }
}
@media (max-width: 600px) {
  .security { row-gap: 1.75rem; }
  .security-item { grid-column: span 6; }
  .security-item::before { display: none; }
}

/* ---------- How it works ---------- */

.how {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  align-items: center;
  min-height: 10rem;
  margin-top: var(--space);
}
.how__head { grid-column: 1 / span 4; }
.how__line { right: 2.25rem; bottom: 0.1875rem; width: 3.3125rem; height: 5rem; }
.how .section-title { margin-top: 0.75rem; }
.how__steps {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin: 0;
  padding: 1.5rem 0;
  list-style: none;
}
.step { position: relative; grid-column: span 3; }
.step:last-child { grid-column: span 2; }
.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 1.9375rem;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0.4375rem;
  font-family: var(--font-mono);
  font-size: 0.7812rem;
  color: var(--accent);
}
/* Connector to the next step, ending in a dot. */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 3.5rem;
  right: calc(0.75rem - var(--col-gap));
  top: 0.9375rem;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent));
  transform-origin: left;
}
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  right: calc(0.5312rem - var(--col-gap));
  top: 0.75rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
}
.step__title { position: relative; margin: 0.875rem 0 0; font-size: 1rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.step__text {
  max-width: 10.75rem;
  margin: 0.3125rem 0 0;
  font-size: 0.8438rem;
  line-height: 1.35;
  color: var(--on-dark-muted);
}
/* Divider between steps, in the gap between their columns. */
.step:not(:last-child) .step__title::after {
  content: '';
  position: absolute;
  right: calc(var(--col-gap) / -2);
  top: 0.625rem;
  height: 3.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.js .how__steps:not(.is-visible) .step::after { transform: scaleX(0); }
.how__steps.is-visible .step::after {
  animation: grow-x 0.6s var(--ease-out) calc(0.3s + var(--i, 0) * 0.2s) backwards;
}

@media (max-width: 1100px) {
  .how { padding-block: 2rem 0.5rem; }
  .how__head { grid-column: 1 / -1; }
  .how__steps { grid-column: 1 / -1; grid-template-columns: var(--grid); }
  .step,
  .step:last-child { grid-column: span 4; }
}
@media (max-width: 700px) {
  .how__steps { row-gap: 1.5rem; }
  .step,
  .step:last-child { grid-column: 1 / -1; }
  .step:not(:last-child)::after,
  .step:not(:last-child)::before,
  .step:not(:last-child) .step__title::after { display: none; }
  .step__text { max-width: none; }
  .how__line { display: none; }
}

/* ---------- Leadership ---------- */

.leadership { padding: var(--space) 0; }
.leadership__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.leadership__grid { display: grid; grid-template-columns: var(--grid); gap: 1rem var(--col-gap); margin-top: 1.25rem; }
/* Every row as tall as the tallest card, so the whole block reads as one grid (a single column keeps each card's own height). */
@media (min-width: 601px) {
  .leadership__grid { grid-auto-rows: 1fr; }
}
.person {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6875rem;
  transition:
    box-shadow 0.2s,
    transform 0.25s var(--ease-out);
}
.person:hover { box-shadow: 0 0.625rem 1.5rem -1.125rem rgba(13, 19, 30, 0.35); }
/* Photo, name and role on top; the bio under them, across the whole card. */
.person__head { display: flex; align-items: center; gap: 1rem; }
.person__photo { flex: none; width: 4.5rem; height: 5.625rem; border-radius: 0.5rem; }
.person__who { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.person__name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.person__role { font-size: 0.8125rem; line-height: 1.35; color: var(--green); font-weight: 500; }
.person__bio { font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }

@media (max-width: 1100px) {
  .person { grid-column: span 6; }
}
@media (max-width: 600px) {
  .person { grid-column: 1 / -1; }
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  align-items: start;
  padding: var(--space) 0;
  border-top: 1px solid #E9ECF0;
}
.faq__head { grid-column: 1 / span 4; padding-top: 0.4375rem; }
.faq .section-title { margin-top: 0.8125rem; }
.faq__list { grid-column: 5 / -1; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 2.5625rem;
  padding: 0.5rem 0.75rem 0.5rem 0;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  font-size: 0.9062rem;
  font-weight: 600;
  color: #141B26;
  transition: color 0.15s;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--green); }
.faq__chevron {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--green-icon);
  border-bottom: 2px solid var(--green-icon);
  transform: translateY(-0.1875rem) rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.faq__item[open] .faq__chevron { transform: translateY(2px) rotate(225deg); }
.faq__answer {
  margin: 0;
  padding: 0 2.5rem 1rem 0;
  max-width: 40rem;
  font-size: 0.9062rem;
  line-height: 1.55;
  color: var(--text-muted);
}
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 0.3s var(--ease-out),
      content-visibility 0.3s allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}

@media (max-width: 960px) {
  .faq { row-gap: 1.5rem; }
  .faq__head,
  .faq__list { grid-column: 1 / -1; }
}

/* ---------- Final CTA ---------- */

.final-cta {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  align-items: center;
  min-height: 9.5rem;
  margin-bottom: var(--space);
  padding-block: 1.5rem;
  background:
    radial-gradient(ellipse 30% 70% at 52% 125%, rgba(255, 138, 64, 0.28), transparent 70%),
    linear-gradient(100deg, #1A262C 0%, #18222A 40%, #1A1F25 100%);
}
.final-cta__photo {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 41%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
/* Rises towards the button, which starts at column 10. */
.final-cta__line { right: calc(var(--breakout) + 17.5rem); bottom: 0; width: 27.1875rem; height: 70%; }
.final-cta__title {
  grid-column: 1 / span 4;
  grid-row: 1;
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: pre-line;
}
.final-cta__text {
  grid-column: 5 / span 4;
  grid-row: 1;
  margin: 0;
  /* The rule between the heading and the text sits on the column line. */
  padding: 0.875rem 0 0.875rem var(--col-gap);
  border-left: 1px solid color-mix(in srgb, var(--accent) 45%, #1A262C);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--on-dark);
}
.final-cta__button {
  grid-column: 10 / -1;
  grid-row: 1;
  min-height: 2.625rem;
  font-size: 0.9688rem;
}

@media (max-width: 1100px) {
  .final-cta { row-gap: 0.75rem; padding-block: 2rem; }
  .final-cta__title { grid-column: 1 / span 8; }
  .final-cta__text { grid-column: 1 / span 8; grid-row: 2; padding: 0; border-left: 0; }
  .final-cta__button { grid-column: 9 / -1; grid-row: 1 / span 2; justify-self: end; }
  .final-cta__line { display: none; }
}
@media (max-width: 700px) {
  .final-cta__title,
  .final-cta__text,
  .final-cta__button { grid-column: 1 / -1; grid-row: auto; }
  .final-cta__button { justify-self: start; margin-top: 0.5rem; }
  .final-cta__photo { width: 100%; opacity: 0.35; }
}

/* ---------- Legal pages and error pages ---------- */

.legal__inner {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(4rem, 8vw, 6.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.legal__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.legal__body { font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }
.legal__body h2 { margin: 2.5rem 0 0.5rem; font-size: 1.375rem; line-height: 1.3; color: var(--text); }
.legal__body p,
.legal__body ol { margin: 0 0 1rem; }
.legal__body li + li { margin-top: 0.375rem; }
.legal__body a { color: var(--green); }
.legal__note {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--band-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.error-page { background: var(--navy); color: #FFFFFF; }
.error-page__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  min-height: 50vh;
  padding: 4rem 0;
}
.error-page__title { margin: 0; font-size: var(--fs-h1); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid #E9ECF0; color: var(--text-muted); font-size: 0.8438rem; }
.site-footer__inner {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--col-gap);
  row-gap: 1rem;
  align-items: center;
  padding: 1.75rem 0 2rem;
}
.site-footer__brand { grid-column: 1 / span 6; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.site-footer__links { grid-column: 7 / -1; justify-self: end; }
.site-footer__email,
.store-links,
.site-footer__meta { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .site-footer__brand,
  .site-footer__links { grid-column: 1 / -1; justify-self: start; }
}
.site-footer .brand { color: var(--ink); }
.site-footer .brand__mark { width: 1.5rem; height: 1.5rem; }
.site-footer .brand__name { font-size: 1.0625rem; }
.site-footer__powered { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; }
.site-footer__links,
.site-footer__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer a { text-decoration: none; transition: color 0.15s; }
.site-footer a:not(.brand):hover { color: var(--green); }
.store-links { display: flex; gap: 0.625rem; }
.store-link { padding: 0.4375rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; }

/* ---------- Motion ---------- */

/* Scroll reveal: each block fades in and rises a little as it enters the screen, the items of a
   group one after another (style="--i: n"). Short (0.6 s) and only when JS is there to reveal
   it again. An animation, not a transition, so hover transforms stay snappy afterwards. */
.js [data-reveal]:not(.is-visible) { opacity: 0; }
.js [data-reveal].is-visible { animation: rise-in 0.6s var(--ease-out) calc(var(--i, 0) * 80ms) backwards; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-0.375rem); }
}
@keyframes shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@keyframes grow-x {
  from { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover,
  .feature:hover,
  .person:hover { transform: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .js [data-reveal]:not(.is-visible) { opacity: 1; }
  .site-header,
  .site-header--overlay { position: static; }
}