/* ============================================================
   EKPA — marketing site · "Prospectus"
   Click-through pages on a white page: home / product / how it
   works / pricing / FAQ, plus the sign-in screen. One page shows
   at a time (a tiny hash router in marketing.js) — no continuous
   scroll. Scoped under .ek (and .auth-shell for sign-in) so the
   in-app styles are untouched.

   The system: white page, near-black teal ink, hairline rules,
   one accent (#305e5f) that appears exactly twice — filled pill
   CTAs and italic serif phrases. Newsreader sets every headline,
   Inter every label and paragraph, Reddit Mono every figure.
   Gain/loss stay green/red — color only ever means money moved.
   ============================================================ */

.ek,
.auth-shell {
  --lp-bg: #ffffff;
  --lp-band: #f4f9f9; /* faint tinted band behind alternating sections */
  --lp-ink: #0f2a2c; /* near-black teal — headings and primary text */
  --lp-slate: #4d6564; /* paragraphs, captions */
  /* labels, metadata, marquee. Darker than the concept's #7d9392, which lands
     at 3.3:1 on white — these carry the legal fine print and the table heads. */
  --lp-mute: #617a79;
  --lp-rule: #e2eeee; /* hairline */
  --lp-rule-soft: #ecf4f4; /* hairline, quieter (inside cards, gutter rails) */
  --lp-accent: #305e5f; /* the one accent */
  --lp-accent-deep: #24494a; /* accent hover, and accent text on a wash */
  --lp-accent-wash: #daecec;
  --lp-navy: #254d79; /* the family's fourth color — gradients only */
  --lp-seafoam: #8fc5c4; /* mid step between wash and accent — gradients only */
  --lp-shadow-card: 0 6px 24px -12px rgba(15, 42, 44, 0.18);
  --lp-shadow-big: 0 24px 60px -24px rgba(15, 42, 44, 0.25);
  --lp-font: "Inter", -apple-system, "Segoe UI", sans-serif;
  --lp-sec: clamp(56px, 7vw, 100px); /* one section rhythm everywhere */
  --ek-maxw: 1120px;
  --ek-gutter: clamp(20px, 4vw, 40px);
}

/* The app sits on teal paper; the marketing site and sign-in screen are
   white, so the over-scroll gutter has to follow them. */
html:has(.ek:not([hidden])),
html:has(.auth-shell:not([hidden])) {
  background: #ffffff;
  scrollbar-color: #cfe0e0 #ffffff;
}

html:has(.ek:not([hidden])) body,
html:has(.auth-shell:not([hidden])) body {
  background: #ffffff;
}

.ek {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ek ::selection,
.auth-shell ::selection {
  background: var(--lp-accent-wash);
}

.ek h1,
.ek h2,
.ek h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.14;
  color: var(--lp-ink);
}

.ek :focus-visible,
.auth-shell :focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.ek-wrap {
  width: 100%;
  max-width: var(--ek-maxw);
  margin: 0 auto;
  padding: 0 var(--ek-gutter);
}

/* Gutter rails — 1px hairlines at the content column's edge, fixed so they
   run the whole viewport. Only drawn when the column is actually inset. */
.ek-rails {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ek-rails::before,
.ek-rails::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--lp-rule-soft);
}

.ek-rails::before { left: calc(50% - 560px); }
.ek-rails::after { left: calc(50% + 559px); }

@media (max-width: 1200px) {
  .ek-rails { display: none; }
}

/* ---------- Reveal primitive ----------
   marketing.js adds .is-in as each element comes into view. The landing
   shell is itself JS-gated (app.js unhides it once the session is known),
   so there's no no-JS state to protect here. */

.ek-rv {
  opacity: 0;
  transform: perspective(900px) translateY(26px) rotateX(7deg);
  transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.16, 0.84, 0.3, 1);
  transition-delay: var(--d, 0s);
}

.ek-rv.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Nav (shared by landing pages and sign-in) ---------- */

.ek-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lp-rule-soft);
}

.ek-nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 64px;
  max-width: var(--ek-maxw);
  margin: 0 auto;
  padding: 0 var(--ek-gutter);
}

.ek-wordmark {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--lp-ink);
  text-decoration: none;
}

.ek-wordmark .ek-dot {
  color: var(--lp-accent);
}

.ek-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: 44px;
}

.ek-nav-links a {
  position: relative;
  color: var(--lp-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.ek-nav-links a:hover {
  color: var(--lp-accent);
  opacity: 1;
}

.ek-nav-links a[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
}

/* the underline is a gradient that grows from the left on hover; the
   current page keeps it at full width */
.ek-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lp-accent), var(--lp-seafoam));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.ek-nav-links a:hover::after,
.ek-nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.ek-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* the sign-in screen's own nav has no actions wrapper */
.ek-nav-inner > .ek-nav-signin {
  margin-left: auto;
}

.ek-nav-signin {
  padding: 9px 4px;
  border: 0;
  background: none;
  color: var(--lp-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ek-nav-signin:hover {
  color: var(--lp-accent);
}

.ek-nav-signin.is-current {
  cursor: default;
  color: var(--lp-accent);
}

/* ---------- Phone side menu ----------
   The page links collapse into a slide-in menu below 640px instead of
   vanishing; everything here stays display:none above that. Open/close
   is marketing.js (#ekMenuBtn / #ekSideMenu / #ekMenuScrim). */

.ek-menu-btn,
.ek-menu-scrim,
.ek-sidemenu {
  display: none;
}

/* The page behind an open menu holds still. */
html.ek-menu-open {
  overflow: hidden;
}

/* ---------- Pages ---------- */

.ek-pages {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ek-page {
  flex: 1;
  width: 100%;
}

/* pages whose content isn't in a banded section carry their own rhythm */
.ek-page > .ek-wrap {
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: clamp(64px, 8vw, 104px);
}

/* ---------- Section furniture ---------- */

.ek-band {
  background: var(--lp-band);
  border-top: 1px solid var(--lp-rule-soft);
  border-bottom: 1px solid var(--lp-rule-soft);
}

.ek-head {
  max-width: 660px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.ek-head.is-center {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ek-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--lp-accent);
}

.ek-h2 {
  font-size: clamp(29px, 3.5vw, 42px);
  line-height: 1.14;
}

.ek-sub {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--lp-slate);
  font-size: 17.5px;
  line-height: 1.55;
}

.ek-head.is-center .ek-sub {
  margin-left: auto;
  margin-right: auto;
}

.ek-page-cta {
  margin-top: clamp(32px, 4vw, 44px);
}

/* centered section headers carry a centered CTA; the closing band on the home
   page is a left-aligned column, like the concept */
.ek-head.is-center ~ .ek-page-cta {
  text-align: center;
}

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

.ek-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--lp-accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, box-shadow 0.2s ease,
    transform 0.3s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.ek-btn:hover {
  background: var(--lp-accent-deep);
  box-shadow: 0 8px 20px -10px rgba(48, 94, 95, 0.6);
}

.ek-btn-lg {
  padding: 14px 28px;
  font-size: 16.5px;
}

.ek-btn-ghost {
  border-color: var(--lp-rule);
  background: #fff;
  color: var(--lp-ink);
}

.ek-btn-ghost:hover {
  border-color: var(--lp-accent);
  background: #fff;
  color: var(--lp-accent);
  box-shadow: none;
}

/* a soft gradient sheen sweeps the filled pill while hovered (fine pointers
   only — on touch a tap-hover sweep just looks broken) */
@media (hover: hover) and (pointer: fine) {
  .ek-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(218, 236, 236, 0.34) 50%, transparent 70%);
    transform: translateX(-110%);
  }

  .ek-btn:hover::after {
    transform: translateX(110%);
    transition: transform 0.9s ease;
  }

  .ek-btn-ghost::after {
    display: none;
  }
}

.ek-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-accent);
  font-family: var(--lp-font);
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  cursor: pointer;
}

.ek-arrow-link::after {
  content: "→";
  transition: transform 0.25s ease;
}

.ek-arrow-link:hover::after {
  transform: translateX(3px);
}

.ek-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ---------- Home · hero ---------- */

.ek-hero-sec {
  position: relative;
  padding: clamp(48px, 6vw, 84px) 0 clamp(60px, 7vw, 96px);
  overflow: hidden; /* the ribbons bleed past the corner */
}

/* The gradient ribbons — DAECEC→seafoam→teal→navy — sweeping the top-right
   corner. marketing.js counter-rotates them slowly with scroll. */
.og-ribbon {
  position: absolute;
  top: -340px;
  right: -380px;
  width: 1050px;
  height: 560px;
  border-radius: 999px;
  background: linear-gradient(100deg,
    rgba(218, 236, 236, 0) 6%,
    rgba(218, 236, 236, 0.85) 26%,
    rgba(143, 197, 196, 0.68) 50%,
    rgba(48, 94, 95, 0.42) 74%,
    rgba(37, 77, 121, 0.4) 96%);
  transform: rotate(-16deg);
  pointer-events: none;
  will-change: transform;
}

.og-ribbon.is-b {
  top: -300px;
  right: -300px;
  width: 780px;
  height: 330px;
  background: linear-gradient(100deg,
    rgba(218, 236, 236, 0) 10%,
    rgba(143, 197, 196, 0.35) 55%,
    rgba(37, 77, 121, 0.28) 96%);
}

.ek-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 56px);
  align-items: center;
}

.ek-hero-copy {
  position: relative;
  z-index: 2;
}

.ek-hero .ek-eyebrow {
  margin-bottom: 22px;
}

.ek-title {
  font-size: clamp(37px, 4.6vw, 54px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

/* Plain italic accent, deliberately: the old gradient shimmer
   (background-clip: text + transparent fill) rendered the phrase INVISIBLE
   in Safari whenever the em wrapped across lines — WebKit doesn't paint the
   clipped background on inline fragments. Text is never worth losing to a
   gradient; don't reintroduce it here. */
.ek-title em {
  font-style: italic;
  color: var(--lp-accent);
}

/* The three benefit bullets under the H1 (replaced the one-sentence sub). */
.ek-hero-points {
  max-width: 470px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--lp-slate);
  font-size: 19px;
  line-height: 1.58;
}

.ek-hero-points li {
  position: relative;
  padding-left: 24px;
}

.ek-hero-points li + li {
  margin-top: 6px;
}

.ek-hero-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-accent);
}

.ek-hero-cta {
  margin-top: 34px;
}

/* The safety one-liners under the hero CTA. Quiet by design: slate text with
   the single accent reserved for the icons, so it reassures without competing
   with the button above it. */
.ek-assure {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  max-width: 460px;
}

.ek-assure li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--lp-slate);
  font-size: 14px;
  line-height: 1.5;
}

.ek-assure svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--lp-accent);
}

.ek-assure strong {
  color: var(--lp-ink);
  font-weight: 600;
}

.ek-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 30px 0 0;
  color: var(--lp-slate);
  font-size: 14px;
  font-weight: 500;
}

.ek-yc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f26522;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ek-hero-art {
  position: relative;
  z-index: 2;
  perspective: 1300px;
}

/* ---------- Home · the growth chart ----------
   A white chart card in place of a second dashboard miniature (the live one
   is on #/product). Line and fill are --gain — color only ever means money
   moved, and this money moves up. Tilts and sheens like a preview frame;
   the line draws in on reveal. */

.ek-chart {
  position: relative;
  margin: 0;
  padding: 22px 24px 16px;
  border: 1px solid var(--lp-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lp-shadow-big);
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.32s cubic-bezier(0.16, 0.84, 0.3, 1), box-shadow 0.32s ease;
  will-change: transform;
}

.ek-chart.is-hover {
  box-shadow: 0 34px 80px -30px rgba(15, 42, 44, 0.36);
}

.ek-chart::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(143, 197, 196, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ek-chart.is-hover::after {
  opacity: 1;
}

.ek-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ek-chart-label {
  color: var(--lp-mute);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ek-chart-fig {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
}

.ek-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.ek-chart-grid line {
  stroke: var(--lp-rule);
  stroke-width: 1;
}

.ek-chart-ticks text {
  fill: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* the fill arrives only once the line has finished drawing (0.45s + 1.6s) */
.ek-chart-area {
  fill: url(#ekGrowFill);
  opacity: 0;
  transition: opacity 0.8s ease 2.05s;
}

.ek-chart-line {
  fill: none;
  stroke: var(--gain);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 590; /* the polyline is ~581 long */
  stroke-dashoffset: 590;
  transition: stroke-dashoffset 1.6s ease-out 0.45s;
}

.ek-chart-dot {
  fill: var(--gain);
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.4s ease 1.7s;
}

.ek-chart-end {
  fill: var(--lp-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-anchor: end;
  opacity: 0;
  transition: opacity 0.4s ease 1.7s;
}

/* everything keys off the revealed wrapper, one beat after it rises */
.ek-hero-art.is-in .ek-chart-line { stroke-dashoffset: 0; }
.ek-hero-art.is-in .ek-chart-area,
.ek-hero-art.is-in .ek-chart-dot,
.ek-hero-art.is-in .ek-chart-end { opacity: 1; }

.ek-chart-cap {
  margin: 12px 0 0;
  color: var(--lp-mute);
  font-size: 11.5px;
}

/* ---------- The app miniature ----------
   The live interactive demo on #/product — real product UI drawn on white
   card stock. (The hero's copy of it was retired for the growth chart.) */

.ek-preview {
  position: relative;
  border: 1px solid var(--lp-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lp-shadow-big);
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.32s cubic-bezier(0.16, 0.84, 0.3, 1), box-shadow 0.32s ease;
  will-change: transform;
}

.ek-preview.is-hover {
  box-shadow: 0 34px 80px -30px rgba(15, 42, 44, 0.36);
}

/* the sheen: a faint teal light that sits under the cursor */
.ek-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(143, 197, 196, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ek-preview.is-hover::after {
  opacity: 1;
}

.ek-preview-wrap {
  max-width: 880px;
  margin: 0 auto;
  perspective: 1600px;
}

/* The inert-click nudge: floats over the frame bottom. Above the sheen
   (z-index 5); the frame's overflow: hidden clips it, so it stays inside. */
.ek-preview-nudge {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* left: 50% caps an abspos box at half the frame — max-content restores
     shrink-to-content sizing, the max-width caps it on phones */
  width: max-content;
  max-width: min(calc(100% - 24px), 560px);
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--lp-ink);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--lp-shadow-big);
  animation: ek-nudge-in 0.3s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.ek-preview-nudge .ek-arrow-link {
  color: var(--lp-seafoam);
  font-size: 13.5px;
  flex-shrink: 0;
}

@keyframes ek-nudge-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ek-preview-nudge {
    animation: none;
  }
}

.ek-frame-top {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--lp-rule-soft);
  background: #fbfdfd;
}

.ek-frame-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b9d4d4;
}

.ek-frame-dot:nth-child(1) { background: #e9a09a; }
.ek-frame-dot:nth-child(2) { background: #e6c98e; }
.ek-frame-dot:nth-child(3) { background: #a5cbb2; }

.ek-frame-url {
  margin: 0 auto;
  padding: 4px 16px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-slate);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.ek-app {
  min-height: 372px;
  color: var(--lp-ink);
  font-family: var(--lp-font);
  font-size: 14px;
}

/* The app's floating-tab chrome in miniature: utility row (wordmark left,
   session cluster right), the greeting, then the centered underline tabs. */
.ek-mini-chrome {
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--lp-rule-soft);
  background: #fbfdfd;
}

.ek-mini-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ek-mini-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The app's wordmark face (the marketing wordmark is serif; this frame
   depicts the product, so it wears the product's mark). */
.ek-side-mark {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ek-dot {
  color: var(--lp-accent);
}

.ek-mini-greet {
  margin: 10px 0 2px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
}

.ek-mini-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3vw, 28px);
}

.ek-tab {
  position: relative;
  padding: 7px 2px 10px;
  border: 0;
  background: none;
  color: var(--lp-slate);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease;
}

.ek-tab:hover {
  color: var(--lp-ink);
}

.ek-tab.is-active {
  color: var(--lp-ink);
  font-weight: 600;
}

.ek-tab.is-active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--lp-accent);
}

.ek-syncpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e5f2ea;
  color: var(--gain);
  font-size: 10.5px;
  font-weight: 600;
}

.ek-syncdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gain);
}

.ek-side-email {
  color: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.ek-view {
  padding: 18px 20px;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}


.ek-view.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.ek-view-head {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}

/* miniature · dashboard — the platform's card layout in small: the
   blue-gradient hero card, the allocation donut, then positions + doors. */

.ek-ov {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

.ek-ov-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  /* the app's .hero-card gradient (styles.css) */
  background: linear-gradient(150deg, #1d3e63 0%, #254d79 100%);
  color: #fff;
}

.ek-hero-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ek-hero-figure {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ek-hero-delta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.ek-hero-delta.is-up { color: #8ff0bc; }
.ek-hero-delta.is-down { color: #ffb4ac; }

.ek-hero-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  font-weight: 600;
}

/* the value-history line inside the hero card, like the real dashboard's */
.ek-hero-chart {
  width: 100%;
  height: 52px;
  margin-top: 6px;
}

.ek-hero-chart path {
  fill: none;
  stroke: rgba(143, 240, 188, 0.6);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.ek-hero-caption {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.ek-ov-alloc {
  padding: 12px 14px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 12px;
  background: #fff;
}

.ek-mini-label {
  display: block;
  color: var(--lp-mute);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ek-alloc-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.ek-donut {
  position: relative;
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 50%;
}

/* the hole */
.ek-donut::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: #fff;
}

.ek-legend {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
}

.ek-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--lp-slate);
}

.ek-legend li i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.ek-legend .ek-num {
  margin-left: auto;
  font-size: 11px;
}

/* allocation card chrome: the Holdings / Type / Account lens toggle, the
   donut's center readout, and the analysis lines under the legend */
.ek-alloc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ek-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 999px;
  background: #f7fbfb;
}

.ek-seg-btn {
  padding: 2.5px 9px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--lp-mute);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.ek-seg-btn.is-active {
  background: #fff;
  color: var(--lp-ink);
  box-shadow: 0 1px 3px rgba(15, 42, 44, 0.12);
}

.ek-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-ink);
}

.ek-donut-center i {
  font-style: normal;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-mute);
}

.ek-alloc-stats {
  margin: 10px 0 0;
  color: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 10px;
}

.ek-alloc-prose {
  margin: 5px 0 0;
  color: var(--lp-slate);
  font-size: 11.5px;
  line-height: 1.5;
}

/* the doors at the bottom of the real dashboard */
.ek-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.ek-door {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; /* let the nowrap door-line ellipsize instead of widening the grid */
  padding: 11px 14px 12px;
  border: 1px solid var(--lp-rule);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ek-door:hover {
  border-color: var(--lp-accent);
  box-shadow: var(--lp-shadow-card);
}

.ek-door-head {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lp-ink);
}

.ek-door-line {
  overflow: hidden;
  color: var(--lp-slate);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ek-door-cta {
  margin-top: 2px;
  color: var(--lp-accent);
  font-size: 12px;
  font-weight: 600;
}

.ek-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}

.ek-tbl th {
  padding: 0 10px 6px;
  border-bottom: 1px solid var(--lp-rule);
  color: var(--lp-mute);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.ek-tbl td {
  padding: 7.5px 10px;
  border-bottom: 1px solid var(--lp-rule-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.ek-tbl th:first-child,
.ek-tbl td:first-child {
  padding-left: 0;
}

.ek-tbl th:last-child,
.ek-tbl td:last-child {
  padding-right: 0;
}

.ek-tbl tbody tr:last-child td,
.ek-tbl tr:last-child td {
  border-bottom: 0;
}

.ek-tbl td:first-child {
  font-weight: 600;
}

.ek-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ek-up { color: var(--gain); }
.ek-down { color: var(--loss); }

/* miniature · news */

.ek-news-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lp-rule-soft);
}

.ek-chip {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--lp-accent-wash);
  color: var(--lp-accent-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.ek-news-body h4 {
  margin: 0 0 2px;
  font-family: var(--lp-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.ek-news-meta {
  margin: 0;
  color: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* news extras: exposure chip, per-story AI answer, source-pill counts */
.ek-news-item { align-items: flex-start; }

.ek-news-body { flex: 1; }

.ek-touch {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: #eef5f5;
  color: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ek-impact {
  flex: none;
  align-self: center;
  padding: 4px 11px;
  border: 1px solid var(--lp-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-accent-deep);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ek-impact:hover { border-color: var(--lp-accent); }

.ek-impact[aria-expanded="true"] {
  border-color: var(--lp-accent-wash);
  background: var(--lp-accent-wash);
}

.ek-impact-answer {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--lp-seafoam);
  border-radius: 0 8px 8px 0;
  background: #f4fafa;
  color: var(--lp-slate);
  font-size: 12px;
  line-height: 1.55;
}

.ek-count {
  margin-left: 5px;
  font-style: normal;
  opacity: 0.6;
}

/* miniature · research + discover cards */

.ek-card {
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 1px solid var(--lp-rule);
  border-radius: 10px;
  background: #fff;
}

.ek-card:last-child {
  margin-bottom: 0;
}

.ek-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ek-card-sym {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}

.ek-card-theme {
  color: var(--lp-slate);
  font-size: 12.5px;
}

.ek-tag {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

.ek-tag.is-buy { background: #e5f2ea; color: var(--gain); }
.ek-tag.is-hold { background: #e3ecf6; color: var(--navy); }
.ek-tag.is-trim { background: #f7e8e5; color: var(--loss); }
.ek-tag.is-low { background: #e5f2ea; color: var(--gain); }
.ek-tag.is-med { background: var(--lp-accent-wash); color: var(--lp-accent-deep); }
.ek-tag.is-high { background: #f7e8e5; color: var(--loss); }

.ek-card-line {
  display: block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.ek-card-why {
  margin: 7px 0 0;
  color: var(--lp-slate);
  font-size: 12.5px;
  line-height: 1.55;
}

.ek-card-toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ek-card-caret {
  color: var(--lp-accent);
  font-size: 15px;
  font-weight: 500;
}

.ek-card-body {
  margin-top: 2px;
}

.ek-card-src {
  margin: 8px 0 0;
  color: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* miniature · controls */

.ek-th-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.ek-th-btn:hover {
  color: var(--lp-ink);
}

.ek-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.ek-filter {
  padding: 5px 12px;
  border: 1px solid var(--lp-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-slate);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ek-filter:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent);
}

.ek-filter.is-active {
  border-color: var(--lp-accent-wash);
  background: var(--lp-accent-wash);
  color: var(--lp-accent-deep);
}

@keyframes ek-flash-up {
  from { background: rgba(21, 107, 63, 0.14); }
  to { background: transparent; }
}

@keyframes ek-flash-down {
  from { background: rgba(168, 64, 47, 0.12); }
  to { background: transparent; }
}

.ek-flash-up { animation: ek-flash-up 0.7s ease-out; }
.ek-flash-down { animation: ek-flash-down 0.7s ease-out; }

/* miniature · strategy lab — the real Lab's builder-left / results-right
   split, small: three numbered controls, the strategy chain, and a live
   sample backtest with the double-rule headline the Lab is known for. */

.ek-lab {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
}

.ek-lab-controls {
  display: flex;
  flex-direction: column;
}

.ek-lab-controls .ek-mini-label {
  margin: 12px 0 5px;
}

.ek-lab-controls .ek-mini-label:first-child {
  margin-top: 0;
}

.ek-lab-select {
  padding: 6px 9px;
  border: 1px solid var(--lp-rule);
  border-radius: 8px;
  background: #fff;
  color: var(--lp-ink);
  font-family: inherit;
  font-size: 12.5px;
}

.ek-lab-blurb {
  margin: 4px 0 0;
  color: var(--lp-mute);
  font-size: 11px;
}

.ek-lab-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ek-lab-range input {
  flex: 1;
  min-width: 0;
  accent-color: var(--lp-accent);
}

.ek-lab-range output {
  flex: none;
  min-width: 48px;
  color: var(--lp-slate);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ek-lab-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}

.ek-lab-chain b {
  color: var(--lp-mute);
  font-size: 11px;
  font-weight: 500;
}

.ek-lab-step {
  display: flex;
  flex-direction: column;
  padding: 5px 9px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--lp-ink);
  font-family: var(--font-mono);
  font-size: 10px;
}

.ek-lab-step i {
  color: var(--lp-mute);
  font-style: normal;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ek-lab-headline {
  margin: 0 0 2px;
  padding-top: 8px;
  border-top: 2px solid var(--lp-ink);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ek-lab-headline span {
  color: var(--lp-mute);
  font-size: 12px;
  font-weight: 500;
}

.ek-lab-sub {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lp-rule);
  color: var(--lp-slate);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.ek-lab-curve {
  position: relative;
  padding-bottom: 12px;
}

.ek-lab-curve svg {
  display: block;
  width: 100%;
  height: 84px;
}

.ek-lab-fill { fill: rgba(29, 157, 153, 0.1); }

.ek-lab-line {
  fill: none;
  stroke: #1d7a4f;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.ek-lab-cmax,
.ek-lab-cmin,
.ek-lab-cfrom,
.ek-lab-cto {
  position: absolute;
  color: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 8.5px;
}

.ek-lab-cmax { top: 0; left: 0; }
.ek-lab-cmin { bottom: 12px; left: 0; }
.ek-lab-cfrom { bottom: 0; left: 0; }
.ek-lab-cto { bottom: 0; right: 0; }

.ek-lab-take {
  margin: 10px 0 4px;
  color: var(--lp-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.ek-lab-take strong { font-family: var(--font-mono); }

.ek-lab-tbl { margin-top: 6px; }

.ek-lab-tbl td {
  padding: 5px 8px;
  font-size: 10.5px;
}

.ek-lab-note {
  margin: 16px 0 0;
  color: var(--lp-mute);
  font-size: 11px;
}

/* ---------- Home · brokerage marquee ---------- */

.ek-brokers {
  padding: 44px 0 52px;
  border-top: 1px solid var(--lp-rule-soft);
}

.ek-brokers-label {
  margin: 0 0 26px;
  color: var(--lp-mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.ek-marquee {
  overflow: hidden;
  /* fade the line out at both edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.ek-marquee-track {
  display: flex;
  width: max-content;
  animation: ek-marquee 75s linear infinite;
}

.ek-marquee:hover .ek-marquee-track {
  animation-play-state: paused;
}

.ek-marquee-group {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

/* muted, but these names answer "is my broker supported?" — they read at the
   label grey rather than the concept's near-invisible #93a8a7 */
.ek-marquee-group span {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--lp-mute);
  letter-spacing: 0.01em;
}

.ek-marquee-group span::after {
  content: "·";
  margin: 0 26px;
  color: #c3d6d5;
}

@keyframes ek-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Home · stats band ---------- */

.ek-stats {
  position: relative;
  padding: clamp(64px, 8vw, 92px) 0;
  text-align: center;
  overflow: hidden; /* the dial bleeds past the band */
}

.ek-stats .ek-wrap {
  position: relative;
  z-index: 2;
}

/* The dial: the app's allocation donut blown up to architecture. Its segments
   are the brand palette; marketing.js turns it with scroll, so scrolling the
   page literally turns the instrument. */
.og-dial {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 780px;
  height: 780px;
  margin: -390px 0 0 -390px;
  border-radius: 50%;
  background: conic-gradient(
    var(--lp-accent) 0deg 96deg, transparent 96deg 100deg,
    var(--lp-seafoam) 100deg 182deg, transparent 182deg 186deg,
    var(--lp-navy) 186deg 252deg, transparent 252deg 256deg,
    var(--lp-accent-wash) 256deg 322deg, transparent 322deg 326deg,
    var(--lp-accent-deep) 326deg 356deg, transparent 356deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 75%, #000 96%, transparent 97%);
  mask: radial-gradient(closest-side, transparent 74%, #000 75%, #000 96%, transparent 97%);
  opacity: 0.2;
  pointer-events: none;
  will-change: transform;
}

/* a fine tick ring inside the dial, like a bezel */
.og-dial-ticks {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(15, 42, 44, 0.5) 0deg 0.5deg, transparent 0.5deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%, #000 100%);
  mask: radial-gradient(closest-side, transparent 90%, #000 91%, #000 100%);
  opacity: 0.12;
  pointer-events: none;
  will-change: transform;
}

.ek-stats .ek-h2 {
  margin-bottom: clamp(38px, 5vw, 56px);
}

/* two stats, so the pair sits centred rather than stretched across the column */
.ek-stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin: 0 auto;
}

.ek-stat {
  padding: 0 18px;
  border-left: 1px solid var(--lp-rule);
}

.ek-stat:first-child {
  border-left: 0;
}

.ek-stat-n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--lp-accent);
  font-variant-numeric: tabular-nums;
}

.ek-stat-c {
  display: block;
  margin-top: 8px;
  color: var(--lp-slate);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- Home · closing CTA ---------- */

.ek-cta-sec {
  padding: clamp(64px, 8vw, 108px) 0 clamp(72px, 9vw, 116px);
}

.ek-cta-sec .ek-sub {
  max-width: 460px;
}

/* ---------- Product · showcase ---------- */

.ek-showcase {
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
}

.ek-show-caption {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--lp-slate);
  text-align: center;
}

.ek-show-caption .ek-arrow-link {
  margin-left: 10px;
}

/* ---------- Product · feature cards ---------- */

.ek-cards-sec {
  padding: clamp(64px, 8vw, 100px) 0;
}

.ek-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  perspective: 1600px;
}

/* A feature card can be gated off (Learn ships behind LEARN_ENABLED), which
   leaves the grid on an odd count and the last card stranded beside a hole.
   Centre it at its normal width instead. Only above the single-column
   breakpoint, where "odd" means anything at all. */
@media (min-width: 901px) {
  .ek-grid > .ek-fcard:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    margin-inline: auto;
  }
}

.ek-fcard {
  position: relative;
  padding: 30px 28px 26px;
  border: 1px solid var(--lp-rule);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--lp-shadow-card);
  transform: translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.3, 1), box-shadow 0.4s ease;
}

.ek-fcard.is-hover {
  --lift: -7px;
  box-shadow: 0 22px 52px -18px rgba(15, 42, 44, 0.32);
}

/* the hairline becomes a brand-gradient ring while hovered */
.ek-fcard::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: 17px;
  padding: 1.5px;
  background: conic-gradient(from 140deg,
    var(--lp-rule), var(--lp-seafoam), var(--lp-accent), var(--lp-navy), var(--lp-seafoam), var(--lp-rule));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ek-fcard.is-hover::before {
  opacity: 1;
}

/* a teal light inside the card follows the cursor */
.ek-fcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 16px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(143, 197, 196, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ek-fcard.is-hover::after {
  opacity: 1;
}

.ek-fcard h3 {
  font-size: clamp(22px, 2.3vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

/* The art region carries the card's own gradient — Stripe's rule: gradient
   color lives inside the card art. Oversized so hover can drift it. */
.ek-fart {
  position: relative;
  height: 232px;
  margin-top: 22px;
  padding: 20px 18px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 12px;
  background-image: var(--grad);
  background-size: 170% 170%;
  background-position: 0% 0%;
  font-size: 13px;
  overflow: hidden;
  transition: background-position 1.1s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.ek-fcard.is-hover .ek-fart {
  background-position: 85% 90%;
}

/* each card owns one blend of the family — no two alike */
.ek-grid .ek-fcard:nth-child(1) .ek-fart { --grad: linear-gradient(160deg, #f0f8f8 0%, #d8ecec 45%, #bfdcdc 100%); }
.ek-grid .ek-fcard:nth-child(2) .ek-fart { --grad: linear-gradient(150deg, #eaf5f4 0%, #cfe7e6 48%, #9ecfce 100%); }
.ek-grid .ek-fcard:nth-child(3) .ek-fart { --grad: linear-gradient(165deg, #edf6f8 0%, #d2e4ee 52%, #b4cde4 100%); }
.ek-grid .ek-fcard:nth-child(4) .ek-fart { --grad: linear-gradient(145deg, #f0f8f6 0%, #d4eae2 50%, #b7dcd0 100%); }
.ek-grid .ek-fcard:nth-child(5) .ek-fart { --grad: linear-gradient(150deg, #e7f3f3 0%, #c4e0e0 45%, #8fc5c4 100%); }
.ek-grid .ek-fcard:nth-child(6) .ek-fart { --grad: linear-gradient(155deg, #eef5fa 0%, #d3e2f0 52%, #b6cbe6 100%); }

.ek-ln {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 9px 12px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
}

.ek-mk {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.ek-amt {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ek-fart-total {
  display: flex;
  padding: 11px 12px 0;
  border-top: 1px solid #d4e5e5;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.ek-rcard {
  padding: 16px 18px;
  border: 1px solid var(--lp-rule);
  border-radius: 10px;
  background: #fff;
}

.ek-rcard-head {
  display: flex;
  align-items: center;
}

.ek-rtk {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}

.ek-rtag {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f7e8e5;
  color: var(--loss);
  font-size: 10.5px;
  font-weight: 700;
}

.ek-rtag.is-new {
  background: #e5f2ea;
  color: var(--gain);
}

.ek-rline {
  margin: 9px 0 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--lp-rule-soft);
  font-family: var(--font-mono);
  font-size: 14px;
}

.ek-rwhy {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--lp-rule-soft);
  color: var(--lp-slate);
  font-size: 13px;
  line-height: 1.5;
}

.ek-rline.is-last,
.ek-rwhy.is-last {
  padding-bottom: 2px;
  border-bottom: 0;
}

/* The news card's art borrows the miniature's .ek-news-item rows; inside the
   fixed-height art region the first row hugs the top and the last drops its
   rule so the feed reads as a cropped window, not a truncated list. */
.ek-fart .ek-news-item:first-child {
  padding-top: 0;
}

.ek-fart .ek-news-item:last-child {
  border-bottom: 0;
}

.ek-lchip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e3ecf6;
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ek-lq {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 600;
}

.ek-la {
  margin: 8px 0 0;
  color: var(--lp-slate);
  font-size: 12.5px;
  line-height: 1.6;
}

.ek-ldots {
  display: flex;
  gap: 5px;
  margin-top: 14px;
}

.ek-ldots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c3d6d5;
}

.ek-ldots i.is-on {
  background: var(--lp-accent);
}

/* ---------- Product · demo videos ----------
   Tiles are a thumbnail behind a play button until clicked, then the same
   box becomes the YouTube iframe — the 16:9 aspect-ratio lives on the
   shared .ek-demo-media sizing so nothing reflows at the swap. */

.ek-demo-sec {
  padding: var(--lp-sec) 0;
}

.ek-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.ek-demo {
  display: flex;
  flex-direction: column;
}

.ek-demo-play,
.ek-demo-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--lp-rule);
  border-radius: 14px;
  background: #eaf3f3;
  box-shadow: var(--lp-shadow-card);
}

.ek-demo-play {
  position: relative;
  padding: 0;
  overflow: hidden;
  /* no global button reset on this site — without this the duration chip
     renders in the UA's button font instead of Inter */
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.3, 1), box-shadow 0.4s ease;
}

.ek-demo-frame {
  border-color: transparent;
}

.ek-demo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hqdefault is 4:3 with letterbox bars baked in; the crop hides them */
  transform: scale(1.005);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.ek-demo-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(15, 42, 44, 0.82);
  box-shadow: 0 8px 26px -8px rgba(15, 42, 44, 0.55);
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.ek-demo-btn svg {
  width: 30px;
  height: 30px;
  margin-left: 2px; /* optical centring of the triangle */
  fill: #fff;
}

.ek-demo-dur {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(15, 42, 44, 0.82);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.ek-demo-meta {
  padding: 18px 2px 0;
}

.ek-demo-meta h3 {
  font-size: 20px;
  line-height: 1.25;
}

.ek-demo-meta p {
  margin: 8px 0 0;
  color: var(--lp-slate);
  font-size: 15.5px;
  line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
  .ek-demo-play:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 52px -18px rgba(15, 42, 44, 0.32);
  }

  .ek-demo-play:hover .ek-demo-thumb {
    transform: scale(1.04);
  }

  .ek-demo-play:hover .ek-demo-btn {
    background: var(--lp-accent);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ek-demo-play,
  .ek-demo-thumb,
  .ek-demo-btn {
    transition: none;
  }

  .ek-demo-play:hover,
  .ek-demo-play:hover .ek-demo-thumb {
    transform: none;
  }

  .ek-demo-play:hover .ek-demo-btn {
    transform: translate(-50%, -50%);
  }
}

/* ---------- How it works · custody ---------- */

.ek-permits-wrap {
  perspective: 1400px;
}

.ek-permits {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--lp-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lp-shadow-card);
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.32s cubic-bezier(0.16, 0.84, 0.3, 1), box-shadow 0.32s ease;
}

.ek-permits.is-hover {
  box-shadow: 0 22px 52px -20px rgba(15, 42, 44, 0.3);
}

.ek-permits::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(143, 197, 196, 0.13), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ek-permits.is-hover::after {
  opacity: 1;
}

.ek-permit-col {
  padding: 26px 30px;
}

.ek-permit-col + .ek-permit-col {
  border-left: 1px solid var(--lp-rule-soft);
}

/* a column label, not a heading voice — outranks the .ek h2 serif default */
.ek .ek-permit-head {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lp-rule);
  color: var(--lp-mute);
  font-family: var(--lp-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ek-permit-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--lp-rule-soft);
  font-size: 15px;
  font-weight: 500;
}

.ek-permit-row:last-child {
  border-bottom: 0;
}

/* the ✓/✕ pops in with a spring, a beat after its row reveals; the row's
   stagger delay (--d, set by marketing.js) carries into the icon */
.ek-permit-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) + 0.25s),
    opacity 0.3s ease calc(var(--d, 0s) + 0.25s);
}

.ek-permit-row.is-in .ek-permit-ic {
  transform: scale(1);
  opacity: 1;
}

.ek-permit-ic.is-ok { background: #e5f2ea; color: var(--gain); }
.ek-permit-ic.is-no { background: #f7e8e5; color: var(--loss); }

.ek-trust-foot {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16.5px;
  color: var(--lp-slate);
  text-align: center;
}

/* ---------- Pricing ---------- */

.ek-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
  perspective: 1400px;
}

/* The paid tier can be gated off (the Strategy Lab ships behind a flag, and
   retiring it leaves nothing to sell). One tier then centres at its own width
   instead of sitting beside an empty half. Above the single-column breakpoint
   only, where "alone" means anything at all. */
@media (min-width: 861px) {
  .ek-tiers > .ek-tier:only-child {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    margin-inline: auto;
  }
}

.ek-tier {
  position: relative;
  padding: 34px 34px 30px;
  border: 1px solid var(--lp-rule);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--lp-shadow-card);
  transform: translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.3, 1), box-shadow 0.4s ease;
  cursor: pointer; /* the whole card clicks through to its signup button */
}

.ek-tier.is-hover {
  --lift: -6px;
  box-shadow: 0 22px 52px -18px rgba(15, 42, 44, 0.3);
}

/* the Plus tier wears the brand gradient as a ring, quietly; hovering
   brings it up to full strength */
.ek-tier.is-plus {
  border-color: transparent;
  box-shadow: 0 18px 44px -20px rgba(48, 94, 95, 0.35);
}

.ek-tier.is-plus::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: 17px;
  padding: 1.5px;
  background: conic-gradient(from 140deg,
    var(--lp-seafoam), var(--lp-accent), var(--lp-navy), var(--lp-accent), var(--lp-seafoam));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ek-tier.is-plus.is-hover::before {
  opacity: 1;
}

.ek-tier h2 {
  font-size: 28px;
  letter-spacing: -0.005em;
}

.ek-tier p {
  min-height: 52px;
  margin: 12px 0 0;
  color: var(--lp-slate);
  font-size: 15.5px;
  line-height: 1.6;
}

.ek-tier .ek-btn {
  margin-top: 20px;
}

.ek-tier-badge {
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lp-accent-wash);
  color: var(--lp-accent-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.ek-faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--lp-rule);
}

.faq-item {
  border-bottom: 1px solid var(--lp-rule);
}

.faq-h {
  margin: 0;
}

.faq-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 4px 22px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--lp-ink);
  cursor: pointer;
  transition: color 0.25s ease;
}

.faq-q:hover {
  color: var(--lp-accent);
}

.faq-q i {
  flex: none;
  color: var(--lp-accent);
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.faq-item.open .faq-q {
  color: var(--lp-accent-deep);
}

.faq-item.open .faq-q i {
  transform: rotate(45deg); /* + turns into ×, read as − space */
}

/* an open question carries a short gradient rule under its title */
.faq-q::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 14px;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lp-accent), var(--lp-seafoam));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.faq-item.open .faq-q::after {
  transform: scaleX(1);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p {
  margin: 4px 0 24px;
  max-width: 68ch;
  color: var(--lp-slate);
  font-size: 16px;
  line-height: 1.65;
}

.faq-a a {
  color: var(--lp-accent);
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}

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

.ek-foot {
  border-top: 1px solid var(--lp-rule);
  padding: 44px 0 54px;
}

.ek-foot-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  max-width: var(--ek-maxw);
  margin: 0 auto;
  padding: 0 var(--ek-gutter);
}

.ek-tagline {
  margin: 8px 0 0;
  color: var(--lp-slate);
  font-size: 14px;
}

.ek-foot-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.ek-foot-nav a,
.ek-foot-nav .ek-link {
  color: var(--lp-slate);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.ek-foot-nav a:hover,
.ek-foot-nav .ek-link:hover {
  color: var(--lp-accent);
}

.ek-legal {
  max-width: var(--ek-maxw);
  margin: 28px auto 0;
  padding: 0 var(--ek-gutter);
  color: var(--lp-mute);
  font-size: 12px;
  line-height: 1.6;
}

/* the disclaimer opens the fine print, so it carries the rule above it */
.ek-foot .ek-legal:first-of-type {
  padding-top: 20px;
}

.ek-foot .ek-legal:first-of-type::before {
  content: "";
  display: block;
  max-width: 1040px;
  margin: 0 auto 20px;
  border-top: 1px solid var(--lp-rule-soft);
}

.ek-foot .ek-legal + .ek-legal {
  margin-top: 14px;
}

/* The tilt-capable cards are themselves .ek-rv, and `.ek-rv.is-in`
   (0-2-0) sets `transform: none` — which would freeze their tilt. These
   (0-2-0) rules sit later in the file, so the tilt lane wins; the cards
   trade the reveal's rise for a plain fade, which is what the concept
   rendered for them too. */
.ek-grid .ek-fcard,
.ek-tiers .ek-tier,
.ek-permits-wrap .ek-permits {
  transform: translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* ---------- Legal pages (privacy.html / terms.html) ---------- */

.ek-prose {
  max-width: 720px;
  margin: 0 auto;
}

.ek-prose h2 {
  margin: 40px 0 12px;
  font-size: 24px;
}

.ek-prose p,
.ek-prose li {
  margin: 12px 0;
  color: var(--lp-slate);
  font-size: 16.5px;
  line-height: 1.7;
}

.ek-prose ul {
  margin: 12px 0;
  padding-left: 22px;
}

.ek-prose a {
  color: var(--lp-accent);
}

.ek-prose-date {
  margin: 12px 0 0;
  color: var(--lp-mute);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ---------- Sign-in screen ---------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: var(--lp-bg);
}

.auth-shell .ek-nav-inner {
  align-items: center;
}

.auth-shell .auth-card {
  margin: auto; /* centers in the space under the nav */
  border: 1px solid var(--lp-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lp-shadow-big);
}

.auth-shell .auth-card h1 {
  font-family: var(--font-display);
  font-weight: 500;
}

/* the top nav already gets you home — the extra back link just adds noise */
.auth-shell .auth-back {
  display: none;
}

/* center the card's header block; the form fields stay left-aligned */
.auth-shell .auth-card .wordmark,
.auth-shell .auth-card h1,
.auth-shell .auth-card .auth-sub {
  text-align: center;
}

/* ---------- Responsive ----------
   The concept is a 1440px desktop. Three steps down from it:
   1000px — the hero stacks (content-width driven, deliberately off the
   640/900 system the app files use); 900px — "tablet": nav tightens, the
   card grid and tiers go single-column; 640px — "phone": one column, full-
   width CTAs, page links move to the footer, thumb-sized touch targets. */

@media (max-width: 1000px) {
  .ek-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ek-hero-points { max-width: 560px; }
  .ek-grid { gap: 20px; }
  /* the corner sweep shrinks to one ribbon; the dial scales to the band */
  .og-ribbon { width: 720px; height: 400px; right: -320px; top: -260px; }
  .og-ribbon.is-b { display: none; }
  .og-dial { width: 540px; height: 540px; margin: -270px 0 0 -270px; }
  .og-dial-ticks { width: 430px; height: 430px; margin: -215px 0 0 -215px; }
}

@media (max-width: 900px) {
  .ek-nav-inner { height: 60px; }
  .ek-nav-links { gap: 20px; margin-left: 26px; }
  .ek-nav-links a { font-size: 14px; }
  .ek-grid { grid-template-columns: 1fr; }
  .ek-tiers { grid-template-columns: 1fr; }
  .ek-tier-badge {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
  }
}

@media (max-width: 640px) {
  /* The reveal's perspective projection renders below-the-fold elements a few
     px wider than the viewport, leaving the whole page horizontally
     scrollable until everything has revealed. Flatten the rise on phones
     (the 3D tilt barely reads at this size) and clip as a backstop —
     overflow-x: clip, not hidden, so the sticky nav keeps working. */
  .ek { overflow-x: clip; }
  .ek-rv { transform: translateY(22px); }

  /* the nav can't hold four links and two actions — the page links move
     into the side menu; the header keeps the wordmark, the CTA pill, and
     the menu button. Sign in rides along into the menu. */
  .ek-nav-inner { height: 56px; }
  .ek-nav-links { display: none; }
  .ek-nav-actions > .ek-nav-signin { display: none; }
  .ek-wordmark { font-size: 24px; }

  .ek-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: -9px; /* the icon, not the hit area, aligns to the gutter */
    padding: 0;
    border: 0;
    background: none;
    color: var(--lp-ink);
    cursor: pointer;
  }

  .ek-menu-btn svg {
    width: 24px;
    height: 24px;
  }

  .ek-menu-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 58;
    background: rgba(15, 42, 44, 0.34);
  }

  .ek-sidemenu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 59;
    width: min(300px, 84vw);
    padding: 8px 22px calc(22px + env(safe-area-inset-bottom));
    background: #fff;
    border-left: 1px solid var(--lp-rule);
    box-shadow: var(--lp-shadow-big);
    animation: ek-menu-in 0.22s cubic-bezier(0.16, 0.84, 0.3, 1);
  }

  @keyframes ek-menu-in {
    from {
      transform: translateX(40px);
      opacity: 0.5;
    }
  }

  .ek-sidemenu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    margin-bottom: 8px;
  }

  .ek-sidemenu-close {
    width: 42px;
    height: 42px;
    margin-right: -12px;
    border: 0;
    background: none;
    color: var(--lp-slate);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .ek-sidemenu-links {
    display: flex;
    flex-direction: column;
  }

  .ek-sidemenu-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--lp-rule-soft);
    color: var(--lp-ink);
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
  }

  .ek-sidemenu-links a[aria-current="page"] {
    color: var(--lp-accent);
    font-weight: 600;
  }

  .ek-sidemenu-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
  }

  .ek-sidemenu-foot .ek-nav-signin {
    padding: 12px 4px;
  }

  /* ---- Density: less on screen at once ---- */

  /* The moving broker strip is decoration; the count line and the checker
     answer the actual question and stay. The checker gets the page gutter
     it never needed while the marquee ran full-bleed above it. */
  .ek-marquee { display: none; }
  .ek-brokers { padding: 32px 0 40px; }
  .ek-brokers-label { margin-bottom: 0; }
  .ek-broker-check { padding: 0 var(--ek-gutter); }

  /* The clickable product miniature is a desktop artifact — a full dashboard
     crushed to phone width reads as broken, not impressive. Its caption goes
     with it (styled out below, where the cascade allows); the page heading
     and the feature cards below carry the Product page on phone. The head's
     margin fed the gap to the now-gone preview, so it goes too. */
  .ek-preview-wrap {
    display: none;
  }

  .ek-showcase .ek-head {
    margin-bottom: 0;
  }

  /* One notch tighter everywhere: section rhythm and the hero's stack. */
  .ek { --lp-sec: 48px; }
  .ek-hero-sec { padding-bottom: 44px; }
  .ek-hero .ek-eyebrow { margin-bottom: 14px; }
  .ek-hero-points { margin-top: 16px; }
  .ek-hero-cta { margin-top: 24px; }
  .ek-assure { margin-top: 20px; gap: 8px; }
  .ek-trust { margin-top: 20px; }

  /* phone type scale: body a step down, the title sized to wrap in two
     lines at 390px instead of four */
  .ek { font-size: 16px; }
  .ek-title { font-size: clamp(33px, 9.6vw, 40px); }
  .ek-hero-points { font-size: 17px; }
  .ek-hero-sec { padding-top: 40px; }

  /* one thumb-width action per line */
  .ek-hero-cta .ek-btn-lg,
  .ek-page-cta .ek-btn-lg,
  .ek-tier .ek-btn { width: 100%; }
  .ek-btn-lg { min-height: 50px; }

  .ek-permits { grid-template-columns: 1fr; }
  .ek-permit-col + .ek-permit-col {
    border-left: 0;
    border-top: 1px solid var(--lp-rule-soft);
  }
  .ek-view { overflow-x: auto; }
  .ek-demo-grid { grid-template-columns: 1fr; }
  .ek-demo-btn { width: 54px; height: 54px; }
  .ek-demo-btn svg { width: 26px; height: 26px; }
  .ek-tbl th,
  .ek-tbl td { white-space: nowrap; }
  /* mini chrome at phone width: the address goes first (like the real app),
     the greeting shrinks, and the tab row tightens instead of wrapping */
  .ek-side-email { display: none; }
  .ek-mini-greet { font-size: 18px; }
  /* five tabs don't fit a phone — the row scrolls, like the real app's */
  .ek-mini-tabs {
    gap: 10px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ek-tab { font-size: 12.5px; }
  .ek-ov { grid-template-columns: 1fr; }
  .ek-doors { grid-template-columns: 1fr; }
  .ek-lab { grid-template-columns: 1fr; }
  .ek-alloc-head { flex-wrap: wrap; }
  .ek-news-item { flex-wrap: wrap; }
  .ek-impact { align-self: flex-start; }

  .ek-stat-row { grid-template-columns: 1fr; row-gap: 30px; }
  .og-ribbon { display: none; }
  .og-dial, .og-dial-ticks { display: none; }
  .ek-stat { border-left: 0; padding: 0; }
  .ek-fcard { padding: 24px 22px 22px; }
  .ek-fart { height: auto; min-height: 200px; }
  .ek-tier { padding: 26px 24px 24px; }
  /* Hidden with the miniature above it — "…this fills with your real
     accounts" makes no sense once the preview it points at is gone. */
  .ek-show-caption { display: none; }

  /* the FAQ question is the tap target — give it the full row and a thumb's
     height */
  .faq-q { font-size: 19px; min-height: 48px; }

  /* footer stacks: wordmark block, then the nav as a wrapped row of links
     that are comfortable to tap */
  .ek-foot { padding: 36px 0 44px; }
  .ek-foot-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .ek-foot-nav { gap: 12px 22px; }
  .ek-foot-nav a,
  .ek-foot-nav .ek-link { padding: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ek-rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ek-view,
  .ek-btn,
  .ek-fcard,
  .ek-arrow-link::after {
    transition: none;
  }
  /* the organic layer holds still: no tilt, no sheen, no pull; ribbons and
     dial keep their resting pose (marketing.js never rotates them), the
     curve is drawn, the icons are in, the FAQ opens instantly */
  .ek-preview,
  .ek-fcard,
  .ek-tier,
  .ek-permits,
  .ek-chart {
    transform: none !important;
    transition: none;
  }
  .ek-chart-line {
    stroke-dasharray: none;
    transition: none;
  }
  .ek-chart-area,
  .ek-chart-dot,
  .ek-chart-end {
    opacity: 1;
    transition: none;
  }
  .ek-chart::after {
    transition: none;
  }
  .ek-btn::after {
    display: none;
  }
  .ek-preview::after,
  .ek-fcard::after,
  .ek-fcard::before,
  .ek-permits::after {
    transition: none;
  }
  .ek-fcard.is-hover .ek-fart {
    background-position: 0% 0%;
  }
  .ek-fart {
    transition: none;
  }
  .ek-permit-ic {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .faq-a,
  .faq-q,
  .faq-q i,
  .faq-q::after,
  .ek-nav-links a::after {
    transition: none;
  }
  .ek-flash-up,
  .ek-flash-down {
    animation: none;
  }
  /* the broker line holds still and wraps instead of scrolling — and drops the
     edge fade, which would otherwise wash out the ends of every wrapped row */
  .ek-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    /* held still, it's a list — so it sits in the column instead of bleeding */
    max-width: var(--ek-maxw);
    margin: 0 auto;
    padding: 0 var(--ek-gutter);
  }
  .ek-marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ek-marquee-group {
    flex-wrap: wrap;
    justify-content: center;
  }
  .ek-marquee-group[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Tier prices (kept from the cinema round) ----------
   Plan name left, price right, one baseline; the Plus badge floats on the
   card's top border (the price now owns the top-right corner) and rides
   above the gradient ring, which draws at z-index 3. */

.ek-tier h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ek-tier-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  white-space: nowrap;
}

.ek-tier-price i {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lp-mute);
}

.ek-tier-badge {
  top: -13px;
  right: auto;
  left: 24px;
  z-index: 4;
}

/* ---------- "Is my broker supported?" ----------
   The marquee above is decoration; this is the part that answers the question.
   Deliberately plain: a search field, one line of answer, and the names. */
.ek-broker-check {
  max-width: 560px;
  margin: 30px auto 0;
  text-align: center;
}

.ek-broker-search {
  display: block;
}

.ek-broker-search-label {
  display: block;
  margin: 0 0 8px;
  color: var(--lp-mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ek-broker-search input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: center;
  transition: border-color 0.15s ease;
}

.ek-broker-search input:focus {
  outline: none;
  border-color: var(--lp-ink, #0a2540);
}

.ek-broker-result {
  min-height: 1.6em;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.ek-broker-chips-head {
  margin: 18px 0 10px;
  color: var(--lp-mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ek-broker-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.ek-broker-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--lp-rule-soft);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .ek-broker-check {
    margin-top: 24px;
  }

  .ek-broker-search input {
    padding: 11px 14px;
  }
}