/* Lifted from echo.ec's own layer on echo.ec (owner, 2026-09-30 onwards): the header with
   its dropdowns and phone menu, the fog hero with the heat mark, the strip of
   example campaigns, the sections, the subpages and the footer. On the
   homepage it sits on a Framer export whose own sections are hidden. Black,
   white and one mint; two solid greys for text; no icon boxes. */

:root {
  --eh-font: "Switzer", "Inter", ui-sans-serif, system-ui, sans-serif;
  --eh-mint: rgb(var(--acc-rgb)); --eh-soft: #c4c8ca; --eh-dim: #8e9498;
  --eh-ease: cubic-bezier(.23, 1, .32, 1); --eh-fast: 150ms;
  --fs-h1: clamp(42px, 6vw, 88px); --fs-h3: clamp(24px, 2.4vw, 32px);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────── */
html { scrollbar-color: #2a2a2a #000; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: rgb(var(--acc-rgb) / 0.28); color: #fff; }
.eh-top, .eh-intro, .eh-sec, .eh-foot { font-family: var(--eh-font); -webkit-font-smoothing: antialiased; font-synthesis-weight: none; color: #fff; }
.eh-brand, .eh-foot a { color: inherit; text-decoration: none; }
.eh-top a { text-decoration: none; }
.eh-body, .eh-top, .eh-mobile, .eh-intro, .eh-sec, .eh-foot { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }
.eh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Skip link: off screen until focused. */
a.eh-skip {
  position: fixed; left: 16px; top: 8px; z-index: 80; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px;
  background: #fff; color: #000; font: 700 15px/1 var(--eh-font); text-decoration: none; transform: translateY(-150%);
}
a.eh-skip:focus { transform: none; }
main#content:focus { outline: none; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.eh-app, .eh-ghost {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none;
  font-family: var(--eh-font); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: 0;
  transition: color var(--eh-fast) ease, background-color var(--eh-fast) ease, transform 160ms var(--eh-ease);
}
.eh-app { justify-self: end; height: 44px; padding: 0 16px; border-radius: 12px; color: var(--eh-mint) !important; background: rgb(var(--acc-rgb) / 0.14); }
.eh-app:hover { background: rgb(var(--acc-rgb) / 0.22); }
.eh-app-lg { height: 44px !important; padding: 0 20px !important; font-size: 15px !important; border-radius: 12px !important; }
.eh-ghost { height: 44px; padding: 0 20px; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, 0.08); }
.eh-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.eh-cta-row { display: flex; gap: 8px; }

/* ── Header ───────────────────────────────────────────────────────── */
.eh-top {
  position: sticky; top: 0; z-index: 60; height: 60px; padding: 0 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(0, 0, 0, 0.72); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
html.eh-menu-open .eh-top { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
.eh-brand { display: inline-flex; align-items: center; height: 44px; justify-self: start; }
.eh-logo { height: 18px; width: auto; display: block; }
.eh-nav { position: relative; display: flex; align-items: center; gap: 4px; }
.eh-top-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.eh-top .eh-dd-btn, .eh-top .eh-nav-link {
  display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1; color: var(--eh-soft); text-decoration: none;
  transition: color var(--eh-fast) ease, background-color var(--eh-fast) ease, transform 160ms var(--eh-ease);
}
.eh-top .eh-dd-btn:hover, .eh-top .eh-nav-link:hover, .eh-top .eh-dd-btn[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.eh-app:active, .eh-ghost:active, .eh-top .eh-dd-btn:active, .eh-top .eh-nav-link:active { transform: scale(.97); }
.eh-chev { width: 14px; height: 14px; opacity: .7; transition: transform 180ms var(--eh-ease); }
.eh-dd-btn[aria-expanded="true"] .eh-chev { transform: rotate(180deg); }

/* Dropdowns: one quiet column under its own trigger, a title and one grey line per page. */
.eh-dd { position: relative; }
.eh-dd-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 70; width: max-content; min-width: 260px; padding: 8px; border-radius: 16px;
  background: #0c0c0c; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 0; opacity: 0; transform: translateY(-6px) scale(.98); visibility: hidden; pointer-events: none;
  transition: opacity 140ms var(--eh-ease), transform 140ms var(--eh-ease), visibility 0s linear 140ms;
}
.eh-dd-panel.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-duration: 200ms, 200ms, 0s; transition-delay: 0s; }
.eh-dd-panel.is-instant { transition: none; }
/* Bridges the gap to the trigger, so the pointer can travel down. */
.eh-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.eh-dd-list { display: flex; flex-direction: column; gap: 2px; }
.eh-dd-item { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; transition: background-color var(--eh-fast) ease; }
.eh-dd-item:hover { background: rgba(255, 255, 255, 0.06); }
.eh-dd-item b { display: block; font-weight: 500; font-size: 15px; line-height: 1.2; color: #fff; }
.eh-dd-item small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--eh-dim); white-space: nowrap; }
/* The page you are on: white on a quiet fill (mint marks money you can still get). */
.eh-dd-item[aria-current="page"] { background: rgba(255, 255, 255, 0.08); }
.eh-dd-item[aria-current="page"] b { color: #fff; }

/* Phone menu: two bars that turn into an X, and a black sheet of plain links. */
.eh-menu-btn {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--eh-ease);
}
.eh-menu-btn:active { transform: scale(.97); }
.eh-menu-btn i { position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 200ms var(--eh-ease); }
.eh-menu-btn i:first-child { transform: translateY(-4px); }
.eh-menu-btn i:last-child { transform: translateY(4px); }
.eh-menu-btn[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.eh-menu-btn[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
.eh-mobile {
  position: fixed; inset: 56px 0 0; z-index: 59; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom)); background: #000; color: #fff; font-family: var(--eh-font); -webkit-font-smoothing: antialiased; font-synthesis-weight: none;
  opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
  transition: opacity 150ms var(--eh-ease), transform 150ms var(--eh-ease), visibility 0s linear 150ms;
}
.eh-mobile * { box-sizing: border-box; }
.eh-mobile.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-duration: 200ms, 200ms, 0s; transition-delay: 0s; }
.eh-m-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding-top: 24px; }
.eh-m-label { grid-column: 1 / -1; margin-bottom: 4px; font-size: 13px; line-height: 20px; color: var(--eh-dim); }
.eh-mobile .eh-m-link {
  display: flex; align-items: center; min-height: 48px; font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em;
  color: #fff; text-decoration: none; transition: color var(--eh-fast) ease;
}
.eh-mobile .eh-m-link:active { color: var(--eh-dim); }
.eh-mobile .eh-m-link[aria-current="page"] { margin: 0 -10px; padding: 0 10px; border-radius: 10px; color: #fff; background: rgba(255, 255, 255, 0.08); }
.eh-m-app { display: flex; flex-wrap: wrap; column-gap: 20px; padding-top: 24px; }
.eh-m-app .eh-m-label { flex-basis: 100%; }
.eh-mobile .eh-m-app a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--eh-soft); text-decoration: none; transition: color var(--eh-fast) ease; }
.eh-mobile .eh-m-app a:active { color: #fff; }
.eh-m-cta { display: flex; gap: 8px; margin-top: auto; padding-top: 24px; }
.eh-m-cta a { flex: 1 1 0; min-width: 0; padding: 0 12px !important; }
@media (min-width: 810px) { .eh-mobile { display: none !important; } }

/* ── Hero ─────────────────────────────────────────────────────────── */
.eh-intro { padding: 4px 20px 0; background: #000; }
.eh-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 16px;
  /* Grows with its text when a short screen can't hold it, so nothing touches. */
  min-height: max(560px, min(78vh, 760px)); padding: 40px 40px 36px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: linear-gradient(180deg, var(--g0) 0%, var(--g1) 30%, var(--g3) 62%, var(--g4) 88%, var(--g5) 100%);
}
.eh-fog { position: absolute; inset: -10%; z-index: -1; filter: blur(46px); }
.eh-fog i { position: absolute; display: block; border-radius: 50%; opacity: .55; will-change: transform; }
.eh-fog i:nth-child(1) { width: 55%; height: 45%; left: 30%; top: 30%; background: radial-gradient(closest-side, var(--f1), transparent); animation: eh-drift 26s ease-in-out infinite alternate; }
.eh-fog i:nth-child(2) { width: 60%; height: 50%; left: -5%; top: 55%; background: radial-gradient(closest-side, var(--f2), transparent); animation: eh-drift 32s ease-in-out -8s infinite alternate-reverse; }
.eh-fog i:nth-child(3) { width: 50%; height: 40%; left: 55%; top: 60%; background: radial-gradient(closest-side, var(--f3), transparent); animation: eh-drift 38s ease-in-out -14s infinite alternate; }
.eh-hero.is-off .eh-fog i { animation-play-state: paused; }
@keyframes eh-drift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.12); } }
/* A fine grain, like the reference. */
.eh-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The heat mark runs oversized behind the headline (echo-intro.js). */
.eh-heat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 500ms var(--eh-ease); }
.eh-heat.is-on { opacity: 1; }
.eh-hero > h1, .eh-hero > .eh-foot-row { position: relative; z-index: 1; }
.eh-hero h1 {
  margin: 0; max-width: 12.2em; font-family: var(--eh-font); font-weight: 500;
  font-size: clamp(40px, 6.3vw, 92px); line-height: 1.02; letter-spacing: -0.03em; color: #fff;
}
/* Solid greys, never see-through, so the heat mark never shows through the type. */
.eh-hero h1 span { color: var(--eh-dim); }
.eh-foot-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eh-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.eh-hero .eh-lead { margin: 0; max-width: 340px; font-size: 15px; line-height: 1.45; color: #fff; }
/* On the teal, the primary is solid mint and the second one a dark glass. */
.eh-hero .eh-app { background: var(--eh-mint); color: var(--acc-ink) !important; }
.eh-hero .eh-app:hover { background: var(--acc-hi); }
.eh-hero .eh-ghost { background: rgba(0, 0, 0, 0.4); }
.eh-hero .eh-ghost:hover { background: rgba(0, 0, 0, 0.55); }
.eh-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1; color: #fff; white-space: nowrap; }
/* The chain badge in our mint (owner: "do this in our green"). */
.eh-badge b { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; background: var(--eh-mint); color: var(--acc-ink); font-weight: 500; }
.eh-badge svg { width: 14px; height: 12px; display: block; }

/* Example campaigns: icon and figure share one grey box (owner: "texts should be in the boxes as well"). */
.eh-ticker { margin-top: 18px; }
.eh-ticker-label { display: block; margin: 0 0 10px 4px; font-size: 13px; line-height: 1; letter-spacing: 0; color: var(--eh-dim); }
/* Positioned, so the screen-reader units (absolute) stay clipped inside it even when the strip stands still. */
.eh-mask { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.eh-track { display: flex; gap: 8px; width: max-content; animation: eh-tick 48s linear infinite; }
@media (hover: hover) and (pointer: fine) { .eh-mask:hover .eh-track { animation-play-state: paused; } }
.eh-mask:focus-within .eh-track { animation-play-state: paused; }
/* The strip itself takes focus (to pause it); its mask would clip an outer ring. */
.eh-intro .eh-mask:focus-visible { outline-offset: -2px; border-radius: 10px; }
/* Touch screens can't hover to pause it: the strip stands still and swipes, one card at a time. */
@media (hover: none) {
  .eh-track { animation: none; }
  .eh-track > [aria-hidden="true"] { display: none !important; }
  .eh-mask { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .eh-mask::-webkit-scrollbar { display: none; }
  .eh-card { scroll-snap-align: start; }
}
@keyframes eh-tick { to { transform: translate3d(-50%, 0, 0); } }
.eh-card { position: relative; flex: none; width: 300px; padding: 14px 16px; box-sizing: border-box; border-radius: 10px; background: #131313; display: flex; flex-direction: column; gap: 12px; }
.eh-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.eh-card b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 15px; line-height: 1.2; color: #fff; }
.eh-card em { flex: none; font-style: normal; font-size: 13px; line-height: 1; color: var(--eh-dim); font-variant-numeric: tabular-nums; }
.eh-stats { display: flex; gap: 6px; }
.eh-stats > span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 15px; line-height: 1; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.eh-stats i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--eh-soft); }
.eh-stats svg { width: 14px; height: 14px; display: block; }
.eh-stats > .eh-paid { color: var(--eh-mint); background: rgb(var(--acc-rgb) / 0.12); }
.eh-stats > .eh-paid i { color: var(--eh-mint); }

/* ── Sections ─────────────────────────────────────────────────────── */
.eh-sec { background: #000; padding: 112px 20px 0; }
.eh-sec h2 { margin: 0; max-width: 16em; font-weight: 500; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.eh-sec h2 span { color: var(--eh-dim); }
.eh-sec.is-tight { padding-top: 72px; }
.eh-sec .eh-lead { margin: 16px 0 0; max-width: 56ch; font-size: 18px; line-height: 1.5; color: var(--eh-dim); }
/* A page without the closing band (cta: none) still ends with air above the footer. */
main > .eh-sec:last-child { padding-bottom: 112px; }
.eh-cta { padding-bottom: 112px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* Footer */
.eh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding: 28px 20px 36px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: #000; }
.eh-foot nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 20px; font-size: 15px; }
.eh-foot nav a { color: var(--eh-soft); display: inline-flex; min-height: 44px; align-items: center; transition: color var(--eh-fast) ease; }
.eh-foot nav a:hover { color: #fff; }
.eh-foot p { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: var(--eh-dim); }

/* ── Subpages (no Framer underneath) ───────────────────────────────── */
.eh-body { margin: 0; background: #000; color: #fff; font-family: var(--eh-font); -webkit-font-smoothing: antialiased; font-synthesis-weight: none; }
.eh-body *, .eh-body *::before, .eh-body *::after { box-sizing: border-box; }
.eh-body a { color: inherit; }
.eh-top-hero { padding: 96px 20px 0; font-family: var(--eh-font); }
.eh-top-hero h1 { margin: 0; max-width: 14em; font-weight: 500; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.03em; }
.eh-top-hero h1 span { color: var(--eh-dim); }
.eh-lead-lg { margin: 20px 0 0; max-width: 34em; font-size: 18px; line-height: 1.45; color: var(--eh-soft); }
.eh-top-hero .eh-cta-row { margin-top: 32px; }
.eh-hero-shot { position: relative; overflow: hidden; isolation: isolate; margin-top: 56px; padding: 56px 56px 0; max-height: 660px; border-radius: 20px; background: radial-gradient(90% 90% at 50% 105%, var(--g4) 0%, var(--g2) 48%, var(--g0) 82%); }
.eh-hero-shot::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.eh-hero-shot > .ui-shot { max-width: 1120px; margin: 0 auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Short screens stay at a natural size in the hero instead of being blown up. */
.eh-hero-shot > .ui-shot:has(img[src$="/balance.jpg"]) { max-width: 760px; }
.eh-hero-shot > .ui-shot:has(img[src$="/referral.jpg"]) { max-width: 980px; }
.eh-hero-shot:has(img[src$="/balance.jpg"]), .eh-hero-shot:has(img[src$="/referral.jpg"]) { padding-bottom: 0; }
/* Brand kit: the logo itself, large, on the glow. */
.eh-hero-shot.is-logo { padding: 0; display: grid; place-items: center; min-height: 420px; }
.eh-logo-stage { padding: 80px 24px; }
.eh-logo-xl { width: min(560px, 70vw); height: auto; display: block; color: #fff; }
.eh-mark-xl { width: min(120px, 40%); height: auto; display: block; color: #fff; }

/* ── Real screens (ui.py "shot"): an app window with its address ──── */
.ui-shot { margin: 0; overflow: hidden; border-radius: 14px; background: #0b0b0b; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 80px rgba(0, 0, 0, 0.55); text-align: left; }
.ui-bar { display: flex; align-items: center; gap: 0; height: 32px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: #0f0f0f; }
.ui-bar > span { flex: 0 1 auto; min-width: 0; margin: 0; max-width: none; padding: 0; height: auto; line-height: 1; background: none; font-family: var(--eh-font); font-weight: 500; font-size: 13px; color: var(--eh-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-shot > picture { display: block; }
.ui-shot > img, .ui-shot > picture > img { display: block; width: 100%; max-width: none; height: auto; }

/* ── Showcase: text beside a real screen ───────────────────────────── */
.eh-show { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
.eh-show.is-flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.eh-show.is-flip .eh-show-text { order: 2; }
.eh-show-text { padding: 8px 8px 8px 0; display: flex; flex-direction: column; justify-content: center; }
.eh-show-text h3 { margin: 0; font-weight: 500; font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.02em; }
.eh-show-text p { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--eh-dim); max-width: 30em; }
.eh-stage {
  position: relative; overflow: hidden; isolation: isolate; min-height: 440px; padding: 48px 0 0 48px; border-radius: 16px;
  display: grid; place-items: start; grid-template-columns: minmax(0, 1fr);
  background: radial-gradient(120% 90% at 70% 110%, var(--g4) 0%, var(--g2) 45%, var(--g0) 80%);
}
.eh-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The window rises from the glow and runs off the right edge. */
.eh-stage > .ui-shot { width: calc(100% + 24px); max-width: none; border-bottom-right-radius: 0; }
@media (min-width: 1024px) {
  /* A note under the long form lines up with its column, not the index. */
  .eh-doc + .eh-note { margin-left: 276px; }
  /* The text lines up with the window's top edge and stays beside it as it scrolls. */
  .eh-show { align-items: start; }
  .eh-show-text { justify-content: flex-start; padding-top: 48px; position: sticky; top: 96px; }
}

/* ── Bento: tiles of different sizes, each with a real screen ──────── */
.eh-bento { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
.eh-bento.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eh-bento.is-2 > .w2 { grid-column: 1 / -1; }
.eh-tile {
  position: relative; overflow: hidden; isolation: isolate; min-height: 340px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  /* The glow stops at the border, so tile edges stay neutral grey (owner: the blue edge lines "look weird"). */
  background: radial-gradient(120% 85% at 50% 115%, var(--g4) 0%, var(--g2) 46%, var(--g0) 80%); background-clip: padding-box;
}
.eh-tile > b { padding: 24px 24px 0; font-weight: 500; font-size: 18px; line-height: 1.2; }
.eh-tile > p { margin: 0; padding: 8px 24px 0; font-size: 15px; line-height: 1.45; color: var(--eh-dim); max-width: 30em; }
.eh-tile.w2 { grid-column: span 2; min-height: 300px; background: radial-gradient(70% 120% at 78% 70%, var(--g4) 0%, var(--g2) 46%, var(--g0) 82%); background-clip: padding-box; }
.eh-tile.is-tall { grid-row: span 2; }
/* The screen stands on the tile's bottom edge; long ones run off it. */
.eh-tile > .ui-shot { align-self: end; justify-self: center; width: calc(100% - 48px); max-width: 560px; max-height: 420px; margin: 28px 24px 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.eh-tile.w2 > .ui-shot { justify-self: stretch; width: auto; max-width: none; }
.eh-tile.is-tall > .ui-shot { max-height: none; }
/* A tile without a screen is a plain filled card, never an empty glow. */
.eh-tile:not(:has(> .ui-shot)):not(:has(> .eh-logo-stage)) { min-height: 0; padding-bottom: 24px; background: #131313; border: 0; }
/* Brand kit tiles: the logo or the mark on the glow, the downloads under it. */
/* A column whatever the order: the stage takes the spare height, so the logo sits centred on the glow. */
.eh-tile:has(> .eh-logo-stage) { display: flex; flex-direction: column; }
.eh-tile > .eh-logo-stage { flex: 1 0 auto; padding: 40px 24px; display: grid; place-items: center; }
.eh-tile .eh-logo-xl { width: min(320px, 80%); }
.eh-tile > .eh-cta-row { padding: 16px 24px 0; flex-wrap: wrap; }
.eh-tile > .eh-cta-row:last-child { padding-bottom: 24px; }

/* ── Facts, split, list, FAQ, note ─────────────────────────────────── */
.eh-facts { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.eh-fact { padding: 24px; border-radius: 16px; background: #131313; border: 0; overflow: hidden; }
.eh-fact em { display: block; font-style: normal; font-family: var(--eh-font); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.eh-fact span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.35; color: var(--eh-dim); }
/* Brand colours show the colour itself. */
.eh-fact[style*="--sw"]::before { content: ""; display: block; height: 120px; margin: -24px -24px 20px; border-radius: 16px 16px 0 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.eh-split { margin-top: 48px; max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
.eh-split:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eh-split h3 { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; }
.eh-split p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--eh-dim); }
.eh-dl { margin: 48px 0 0; max-width: 640px; }
.eh-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.eh-dl dt { font-size: 17px; color: var(--eh-dim); }
.eh-dl dd { margin: 0; font: 700 17px/1.2 var(--eh-font); font-variant-numeric: tabular-nums; }
.eh-faq { margin-top: 48px; max-width: 880px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.eh-q { border-bottom: 1px solid rgba(255, 255, 255, 0.08); interpolate-size: allow-keywords; }
.eh-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; font-size: 17px; line-height: 1.3; }
.eh-q summary::-webkit-details-marker { display: none; }
/* A drawn 2px plus, no box, no glyph; it turns into an x. */
.eh-q summary::after {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 0; color: var(--eh-dim);
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 200ms var(--eh-ease), color var(--eh-fast) ease;
}
.eh-q summary:hover::after { color: #fff; }
.eh-q[open] summary::after { transform: rotate(45deg); color: #fff; }
.eh-q::details-content { block-size: 0; overflow: clip; transition: block-size 220ms var(--eh-ease), content-visibility 220ms allow-discrete; }
.eh-q[open]::details-content { block-size: auto; }
.eh-q p { margin: 0 0 20px; max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--eh-dim); }
.eh-note { margin: 24px 0 0; padding: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.5; color: var(--eh-dim); max-width: 60ch; }
.eh-note a, .eh-sec p a, .eh-q p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; transition: text-decoration-color var(--eh-fast) ease; }
.eh-note a:hover, .eh-sec p a:hover, .eh-q p a:hover { text-decoration-color: #fff; }

/* Annotated screen: pins on the screen, the same numbers in the legend. */
.eh-anno { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: center; }
.eh-anno-img { position: relative; }
.eh-anno-img img { display: block; width: 100%; height: auto; }
.eh-anno-img > picture { display: block; }
.eh-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #fff; color: #000; font: 700 13px/1 var(--eh-font); box-shadow: 0 0 0 2px #000; }
.eh-anno-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.eh-anno-list li { display: flex; align-items: baseline; gap: 14px; }
.eh-anno-list .eh-num { flex: none; display: inline-flex; min-width: 16px; justify-content: flex-start; color: #fff; font: 700 15px/1.25 var(--eh-font); font-variant-numeric: tabular-nums; }
.eh-anno-list b { display: block; font-weight: 500; font-size: 17px; line-height: 1.25; }
.eh-anno-list p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--eh-dim); }

/* Worked sum: one filled surface, grey operators. */
.eh-math { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 28px 32px; border-radius: 16px; background: #131313; }
.eh-math > div { flex: 0 1 auto; padding: 0; border: 0; background: none; }
.eh-math small { display: block; font-size: 13px; color: var(--eh-dim); }
.eh-math b { display: block; margin-top: 10px; font: 700 clamp(26px, 3vw, 40px)/1 var(--eh-font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.eh-math > i { flex: none; font-style: normal; font-size: 28px; line-height: 1; color: var(--eh-dim); }
.eh-math > .is-out { background: none; border: 0; }
.eh-math > .is-out b { color: #fff; }
/* Mint only when the result is money you get (creators, referrals); a cost or a points total stays white. */
.eh-math > .is-out.is-money b { color: var(--eh-mint); }

/* Timeline: the label sits on the line and knocks it out. */
.eh-time { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.eh-time li { position: relative; padding: 0 20px 0 0; }
.eh-time li::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: rgba(255, 255, 255, 0.12); }
.eh-time li:last-child::before { right: auto; width: 40px; }
.eh-time small { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 12px 0 0; border-radius: 0; background: #000; box-shadow: none; font-size: 13px; color: var(--eh-soft); font-family: var(--eh-font); font-weight: 700; }
.eh-time b { display: block; margin-top: 18px; font-weight: 500; font-size: 17px; line-height: 1.25; }
.eh-time p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--eh-dim); max-width: 22em; }

/* Does / doesn't: hairline rows, yes in white, no in grey. */
.eh-yesno { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
.eh-yesno > div { padding: 0; border: 0; border-radius: 0; background: none; }
.eh-yesno h3 { margin: 0 0 8px; font-weight: 500; font-size: 18px; }
.eh-yesno ul { list-style: none; margin: 0; padding: 0; display: block; }
.eh-yesno li { display: block; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; line-height: 1.45; color: #fff; }
.eh-yesno li::before { content: none; }
.eh-yesno .is-no li { color: var(--eh-dim); }

/* Statement */
.eh-say { margin: 0; max-width: 22em; font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.025em; }
.eh-say span { color: var(--eh-dim); }
.eh-say.is-aeonik { font-family: var(--eh-font); font-weight: 700; letter-spacing: -0.02em; }
.eh-say.is-aeonik span { font-weight: 500; }
.eh-sec > .eh-say:first-child { margin-top: 0; }
/* After a heading or a list, the statement gets the same air as any first block. */
.eh-sec > * + .eh-say { margin-top: 48px; }

/* Long form with a side index */
.eh-doc { margin-top: 48px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
.eh-doc-nav { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 2px; margin-left: -12px; }
.eh-doc-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; color: var(--eh-dim); text-decoration: none; transition: background-color var(--eh-fast) ease, color var(--eh-fast) ease; }
.eh-doc-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.eh-doc-nav a[aria-current] { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* The column stops where its rows do, so the section rules match the FAQ rows. */
.eh-doc-body { max-width: 880px; }
.eh-doc-body > section { padding-bottom: 48px; }
.eh-doc-body > section + section { padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.eh-doc-body h2, .eh-doc-body h3 { margin: 0; max-width: none; font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; }
.eh-doc-body p { margin: 14px 0 0; max-width: 65ch; font-size: 17px; line-height: 1.6; color: var(--eh-dim); }
.eh-doc-body .ui-shot { margin-top: 24px; max-width: 760px; }
.eh-doc-body .eh-faq { margin-top: 16px; }
.eh-doc-body .eh-faq > .eh-q:last-child { border-bottom: 0; }

/* ── Focus: a 2px mint ring everywhere ─────────────────────────────── */
.eh-top :focus-visible, .eh-mobile :focus-visible, .eh-intro :focus-visible, .eh-sec :focus-visible, .eh-top-hero :focus-visible, .eh-foot :focus-visible, a.eh-skip:focus-visible {
  outline: 2px solid var(--eh-mint); outline-offset: 2px;
}
.eh-brand:focus-visible, .eh-foot nav a:focus-visible, .eh-mobile .eh-m-link:focus-visible, .eh-mobile .eh-m-app a:focus-visible, .eh-sec p a:focus-visible, .eh-note a:focus-visible, .eh-q summary:focus-visible { border-radius: 8px; }
.eh-top .eh-dd-item:focus-visible { outline-offset: -2px; }

/* ── Type details ──────────────────────────────────────────────────── */
.eh-hero h1, .eh-top-hero h1, .eh-sec h2, .eh-say, .eh-show-text h3, .eh-tile > b, .eh-doc-body h2, .eh-doc-body h3 { text-wrap: balance; }
.eh-lead, .eh-lead-lg, .eh-sec p, .eh-foot p { text-wrap: pretty; }

/* ── Wide screens: content stops at 1360px ─────────────────────────── */
@media (min-width: 1440px) {
  .eh-top, .eh-intro, .eh-sec, .eh-top-hero, .eh-foot { padding-left: max(20px, calc((100% - 1360px) / 2)); padding-right: max(20px, calc((100% - 1360px) / 2)); }
}

/* ── Tablet and down ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .eh-show, .eh-show.is-flip { grid-template-columns: 1fr; gap: 20px; }
  .eh-show.is-flip .eh-show-text { order: 0; }
  /* One column, so tiles never leave holes. */
  .eh-bento, .eh-bento.is-2 { grid-template-columns: minmax(0, 1fr); }
  .eh-tile, .eh-tile.w2, .eh-tile.is-tall, .eh-bento.is-2 > .w2 { grid-column: auto; grid-row: auto; min-height: 0; }
  .eh-tile.w2 { background: radial-gradient(120% 85% at 50% 115%, var(--g4) 0%, var(--g2) 46%, var(--g0) 80%); background-clip: padding-box; }
  .eh-tile > .ui-shot, .eh-tile.w2 > .ui-shot { justify-self: stretch; width: auto; max-width: none; }
  .eh-tile.is-tall > .ui-shot { max-height: 420px; }
  .eh-anno { grid-template-columns: 1fr; }
  .eh-time { grid-auto-flow: row; gap: 24px; }
  .eh-time li::before { display: none; }
  /* The index becomes a sticky strip of plain links (a block, so it can stick). */
  .eh-doc { display: block; }
  html:has(.eh-doc-nav) { scroll-padding-top: 120px; }
  .eh-doc-nav {
    position: sticky; top: 60px; z-index: 5; flex-direction: row; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -20px 24px; padding: 0 20px; background: #000; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .eh-doc-nav::-webkit-scrollbar { display: none; }
  .eh-doc-nav a, .eh-doc-nav a:hover, .eh-doc-nav a[aria-current] { flex: none; padding: 0; min-height: 44px; border-radius: 0; background: none; white-space: nowrap; }
  .eh-doc-nav a:focus-visible { outline-offset: -2px; }
}

/* ── Phones ────────────────────────────────────────────────────────── */
@media (max-width: 809px) {
  .eh-top { grid-template-columns: 1fr auto; height: 56px; padding: 0 16px; }
  .eh-nav { display: none; }
  .eh-menu-btn { display: inline-block; }
  .eh-top .eh-app { height: 44px; padding: 0 16px; border-radius: 12px; }
  .eh-top-end { gap: 4px; }
  .eh-foot nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; width: 100%; }

  .eh-intro { padding: 0 12px; }
  .eh-hero { min-height: max(520px, 76svh); padding: 24px 16px 22px; border-radius: 14px; gap: 28px; }
  .eh-foot-row { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .eh-hero-copy { align-self: stretch; }
  .eh-hero .eh-cta-row a { padding: 0 14px !important; }
  .eh-card { width: 272px; }
  .eh-mask { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent); }

  .eh-sec { padding: 80px 16px 0; }
  .eh-cta, main > .eh-sec:last-child { padding-bottom: 80px; }
  .eh-cta { flex-direction: column; align-items: flex-start; }
  .eh-sec > * + .eh-say { margin-top: 32px; }
  .eh-cta-row { width: 100%; flex-wrap: wrap; }
  .eh-cta-row a { flex: 1 1 140px; justify-content: center; }
  .eh-top-hero { padding: 56px 16px 0; }
  .eh-lead-lg { font-size: 17px; }

  .eh-show { margin-top: 48px; }
  .eh-show-text { min-height: 0; padding: 0; }
  .eh-facts, .eh-split, .eh-faq, .eh-anno, .eh-math, .eh-yesno, .eh-bento, .eh-time, .eh-doc, .eh-dl { margin-top: 32px; }
  .eh-split, .eh-split:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; gap: 28px; }
  .eh-yesno { grid-template-columns: 1fr; }
  .eh-fact em { font-size: 32px; }
  .eh-doc-nav { top: 56px; margin: 0 -16px 24px; padding: 0 16px; }

  /* Real screens are cropped, never shrunk: the app's text stays legible and
     the window runs off the right edge. Annotated screens stay whole. */
  .ui-shot > img, .ui-shot > picture > img { width: max(100%, var(--fw, 680px)); margin-left: calc((100% - max(100%, var(--fw, 680px))) * var(--fx, 0)); }
  .ui-bar { height: 28px; }
  .eh-stage { padding: 24px 0 0 16px; min-height: 0; }
  .eh-stage > .ui-shot { width: calc(100% + 16px); border-top-right-radius: 0; }
  .eh-tile > .ui-shot, .eh-tile.w2 > .ui-shot { justify-self: stretch; width: auto; max-width: none; margin: 24px 0 0 16px; border-top-right-radius: 0; }
  .eh-hero-shot { margin-top: 36px; padding: 20px 0 0 16px; border-radius: 14px; max-height: 380px; }
  .eh-hero-shot > .ui-shot { max-width: none; margin: 0; border-top-right-radius: 0; }
  .eh-hero-shot.is-logo { padding: 0; min-height: 280px; }

  /* The sum as a receipt: one row per term, the total last. */
  .eh-math { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 20px; }
  .eh-math > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; }
  .eh-math > div + div, .eh-math > i + div { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .eh-math > i { display: none; }
  .eh-math b { margin-top: 0; font-size: 24px; }
  /* Annotated screens keep a legible 680px and scroll sideways in their window; the pins stay on their spots. */
  .eh-anno-fig { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .eh-anno-img { width: 680px; }
  .eh-pin { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; box-shadow: 0 0 0 2px #000; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eh-fog i, .eh-track { animation: none !important; }
  .eh-mask { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .eh-track > [aria-hidden="true"] { display: none !important; }
  .eh-mobile { transform: none; transition-property: opacity, visibility; }
  .eh-menu-btn i { transition: none; }
  .eh-heat { transition: none; }
  .eh-q::details-content { transition: none; }
}

/* "App coming soon" in place of the way into the app (build.py soon_links): it reads as a label, not a button. */
.is-soon { cursor: default; }
/* Pressable for its sound (echo-sound.js), but never changes on hover: it leads nowhere yet. */
.eh-app.is-soon:hover { background: rgb(var(--acc-rgb) / 0.14); filter: none; transform: none; }
.eh-ghost.is-soon:hover { background: rgba(255, 255, 255, 0.06); }
.eh-app.is-soon { background: rgb(var(--acc-rgb) / 0.14); color: var(--eh-mint) !important; box-shadow: none; }
.eh-ghost.is-soon { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); }

/* Sound switch (echo-sound.js): a quiet text button at the end of the footer. */
.eh-sound { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--eh-soft, #c4c8ca); font: inherit; font-size: 14px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.eh-sound:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.eh-sound[aria-pressed="false"] { color: #8e9498; }