/* ==========================================================================
   login.html — the public landing page.

   This screen is deliberately branded-dark and does NOT follow the saved theme,
   which is why tests/test_ui_accessibility.py exempts it from both
   test_every_app_screen_follows_the_saved_theme and
   test_screen_stylesheets_are_theme_agnostic. That exemption is keyed on this
   FILENAME, so keep it: a rebuild that split this into ews-landing.css would be
   scanned and its near-black surfaces would fail.

   Structure:
     1  local palette
     2  page shell, background layers
     3  nav
     4  hero copy
     5  the engine diagram
     6  section furniture (kickers, headings, reveal)
     7  cards: problem, capabilities, flow, use cases, benefits
     8  ticker
     9  output schema
     10 the auth card
     11 footer
     12 motion, responsive, reduced-motion
   ========================================================================== */

/* ── 1. Local palette ──────────────────────────────────────────────────────
   Prefixed --lp-* and defined here rather than in ews.css, because these are
   one screen's values, not design-system tokens. Brand hues come from the
   shared layer so the landing page and the product cannot drift apart. */

:root {
  --lp-bg:          #05070f;   /* page floor, darker than the app's dark theme */
  --lp-bg-2:        #070b17;
  --lp-panel:       #0c1222;   /* cards */
  --lp-panel-2:     #101830;   /* raised cards, inputs */
  --lp-line:        rgba(139, 158, 255, .14);
  --lp-line-2:      rgba(139, 158, 255, .28);

  --lp-ink:         #f2f5fc;   /* headings */
  --lp-ink-2:       #c3ccdf;   /* body */
  --lp-ink-3:       #8b95ad;   /* muted, measured 5.6:1 on --lp-panel */

  --lp-accent:      var(--ews-brand);          /* #4f6bff — borders, rings, glows */
  --lp-accent-2:    #8b9eff;                   /* lighter, for accent TEXT on dark */
  --lp-accent-deep: var(--ews-brand-strong);   /* #3a52d8 */

  /* Fill for anything carrying WHITE text. Measured: white on --lp-accent is
     4.30:1, which fails AA for the 15px/800 button label (WCAG "large text"
     starts at 18.66px bold, so the 4.5:1 threshold applies). This is the same
     hue at v=0.94 — visually indistinguishable, 4.76:1. --lp-accent is still
     used everywhere the colour is not behind text. */
  --lp-accent-btn:  #4a65f0;

  --lp-hi:   #ff6b6b;   /* HIGH severity */
  --lp-md:   #f0b429;   /* MED */
  --lp-lo:   #2fd48f;   /* LOW / positive */

  /* Decorative background densities. Tuned twice: the stream was invisible at
     .13 and distracting at .62. */
  --lp-stream: rgba(150, 168, 255, .17);
  --lp-dot:    rgba(186, 199, 255, .8);

  /* In rem, not px, so the content column grows with the root scale below:
     75rem is 1200px at a 16px base and 1500px at 125%. */
  --lp-shell:  min(75rem, 92vw);
  --lp-radius: 18px;
}

/* ── 1b. Root scale ───────────────────────────────────────────────────────────
   Almost everything on this page is sized in rem, so one value scales the whole
   layout proportionally — type, spacing, cards, the content column.

   THE PROBLEM THIS SOLVES. A CSS pixel is a fixed fraction of an inch only if the
   OS or browser is scaling. On a 16" ThinkBook running Windows at 100%, the
   browser reports ~1920 CSS px, so a 1200px content column occupies about 62% of
   a physically large screen and the type is small in absolute terms — the page
   looks under-sized. The same CSS on a 14" at 1470 px fills the screen properly.
   Reported as: correct on 13-14", too small on 16", right at 125% browser zoom.

   THE RULE. Add magnification only when nothing else already has. If the OS is
   scaling (a 1920x1200 panel at Windows 125% presents ~1536 px) or the user has
   zoomed, the viewport is already small in CSS px and these thresholds are not
   met, so nothing is doubled up. Gated on height as well as width, because a wide
   but short viewport has no room to spend.

   Expressed in %, not px, so it multiplies the user's own preferred font size
   instead of overriding it — setting a px root font size breaks the browser's
   font-size setting for everyone who has changed it.

   Safe to put on `html` here: static/css/ews-login.css is linked from
   templates/login.html and nowhere else, and nothing in ews.css sets a root font
   size, so this cannot leak into the app screens.
   -------------------------------------------------------------------------- */

html { font-size: 100%; }

/* 16" and larger at native scaling. 1512 (MacBook Pro 14") and 1536 (a 15.6" FHD
   at Windows 125%) stay at 100% deliberately — both were already right. */
@media (min-width: 1600px) and (min-height: 860px)  { html { font-size: 110%; } }
@media (min-width: 1800px) and (min-height: 950px)  { html { font-size: 118%; } }
@media (min-width: 1920px) and (min-height: 1000px) { html { font-size: 125%; } }

/* Very large displays: keep growing so a 27" is not a 1500px column adrift in the
   middle, but ease off — past about 1.4x the line length gets uncomfortable. */
@media (min-width: 2400px) and (min-height: 1200px) { html { font-size: 135%; } }

/* ── 2. Page shell + background layers ────────────────────────────────────── */

.lp-body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-ink-2);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────────
   This page had no scrollbar styling, so it inherited the OS default: on Windows
   a pale grey sliver that reads as chrome rather than as an invitation, and on
   macOS an overlay bar that is not drawn at all until you already scroll. On a
   page whose whole job is to get you past the fold, that is the wrong default.

   Deliberately NOT darker. The page floor is #05070f, so a darker thumb would be
   less visible, not more. It is brand blue instead — the one colour on the page
   that already means "interactive" — and wide enough to register peripherally.

   The track keeps a hairline left border so the channel is legible even at the
   very top and bottom, which is where the thumb is not.

   Unscoped on purpose: ews-login.css is linked from login.html and nowhere else,
   so this cannot reach the app screens, which have their own light and dark
   treatments and would look wrong with a fixed dark track.
   -------------------------------------------------------------------------- */

/* Firefox. `auto` rather than `thin`: on a marketing page the bar is a signal,
   not furniture to be minimised. */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--lp-accent) var(--lp-bg-2);
}

/* Chrome, Edge, Safari. */
::-webkit-scrollbar { width: 14px; height: 14px; }

::-webkit-scrollbar-track {
  background: var(--lp-bg-2);
  border-left: 1px solid var(--lp-line);
}

::-webkit-scrollbar-thumb {
  /* The 4px border is the page colour, which insets the thumb into a pill rather
     than letting it fill the channel edge to edge. */
  background: linear-gradient(180deg, var(--lp-accent-2), var(--lp-accent));
  border: 4px solid var(--lp-bg-2);
  border-radius: 999px;
  /* A thumb that shrinks with a long page stops reading as a grabbable object;
     this page is ~8 screens tall, so without a floor it would be a few pixels. */
  min-height: 3.5rem;
}
::-webkit-scrollbar-thumb:hover { background: var(--lp-accent-2); }
::-webkit-scrollbar-corner { background: var(--lp-bg-2); }

/* The transaction-stream canvas, painted by ews-landing.js. */
#lp-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Sits over the canvas so the stream reads as depth rather than noise, and so
   text never has to compete with a moving dot. */
.lp-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% 22%,
                    color-mix(in srgb, var(--lp-accent) 16%, transparent), transparent 70%),
    radial-gradient(45rem 32rem at 8% 82%,
                    color-mix(in srgb, var(--lp-accent-deep) 13%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(5, 7, 15, .3) 0%, rgba(5, 7, 15, .82) 60%, var(--lp-bg) 100%);
}

/* Engineering-drawing grid. Masked to fade out at the edges so it never ends
   in a hard line. */
.lp-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, var(--lp-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lp-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 30%, #000 30%, transparent 100%);
          mask-image: radial-gradient(75% 60% at 50% 30%, #000 30%, transparent 100%);
}

.lp {
  position: relative;
  z-index: 2;
}

/* ── 3. Nav ───────────────────────────────────────────────────────────────── */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: .85rem max(1.25rem, calc((100vw - var(--lp-shell)) / 2));
  box-sizing: border-box;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
/* ews-landing.js adds .is-stuck once the page has scrolled, so the bar only
   earns its background when there is content behind it. */
.lp-nav.is-stuck {
  background: color-mix(in srgb, var(--lp-bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--lp-line);
}

.lp-nav__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex: none;
}

/* The logo is effectively solid black — measured mean brightness 1/255 — so on a
   near-black page it needs a light disc behind it to exist at all. */
.lp-brand__mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 9px;
  background: #f5f7fc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.lp-brand__mark img { width: 1.4rem; height: 1.4rem; object-fit: contain; display: block; }

.lp-nav__names { display: flex; flex-direction: column; line-height: 1.1; }
.lp-brand__name { font-size: .9375rem; font-weight: 800; color: var(--lp-ink); letter-spacing: -.01em; }
.lp-brand__org {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lp-accent-2);
}

.lp-nav__links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.lp-nav__links a {
  padding: .45rem .7rem;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--lp-ink-3);
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.lp-nav__links a:hover { color: var(--lp-ink); background: rgba(139, 158, 255, .09); }

.lp-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  padding: .55rem 1.05rem;
  border-radius: 9px;
  border: 1px solid var(--lp-line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lp-accent) 22%, transparent), transparent);
  color: var(--lp-ink);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.lp-nav__cta svg { width: .9rem; height: .9rem; }
.lp-nav__cta:hover {
  border-color: var(--lp-accent);
  background: color-mix(in srgb, var(--lp-accent) 26%, transparent);
  transform: translateY(-1px);
}

/* ── 4. Hero ──────────────────────────────────────────────────────────────── */

.lp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: 3rem;
  width: var(--lp-shell);
  margin: 0 auto;
  min-height: calc(100svh - 4.5rem);
  padding: 2rem 0 5.5rem;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.15rem;
  padding: .4rem .8rem .4rem .55rem;
  border: 1px solid var(--lp-line-2);
  border-radius: 999px;
  background: rgba(139, 158, 255, .07);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lp-accent-2);
}
.lp-eyebrow__pulse {
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--lp-lo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-lo) 25%, transparent);
  animation: lp-beat 1.8s ease-in-out infinite;
}

.lp-title {
  margin: 0 0 1.1rem;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -.035em;
  color: var(--lp-ink);
}
.lp-title__line, .lp-title__accent { display: block; }

/* The rotating half. inline-block would collapse the line box; block keeps the
   two halves stacked, and the gradient is clipped to the glyphs. */
.lp-title__accent {
  /* Two lines reserved. The rotating phrases range from "before it happens." to
     "before the cash is structured.", which wrap to one line and two; without a
     reserved height the entire hero shifted on every rotation. */
  min-height: 2.06em;
  background: linear-gradient(96deg, var(--lp-accent-2) 0%, var(--lp-accent) 55%, #b9c4ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: opacity .3s ease, transform .3s ease;
}
.lp-title__accent.is-out { opacity: 0; transform: translateX(-.5rem); }

.lp-lede {
  margin: 0 0 1.4rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--lp-ink-2);
}

.lp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.lp-chips li {
  padding: .3rem .6rem;
  border: 1px solid var(--lp-line);
  border-radius: 7px;
  background: rgba(139, 158, 255, .05);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--lp-ink-3);
}

.lp-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }

.lp-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 32rem;
}
.lp-proof li {
  padding: .7rem .75rem;
  border: 1px solid var(--lp-line);
  border-radius: 11px;
  background: rgba(12, 18, 34, .55);
}
.lp-proof b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--lp-accent-2);
  font-variant-numeric: tabular-nums;
}
.lp-proof span {
  display: block;
  margin-top: .1rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}

/* ── 5. The engine diagram ────────────────────────────────────────────────── */

.lp-engine {
  position: relative;
  aspect-ratio: 1 / .86;
  min-height: 27rem;
  /* Slight inset so the satellites can hang past the copy column's edge without
     touching the viewport. */
  padding: 0 .5rem;
  box-sizing: border-box;
}

.lp-engine__glow {
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--lp-accent) 22%, transparent) 0%,
              transparent 66%);
  filter: blur(28px);
  animation: lp-glow 6s ease-in-out infinite;
}

.lp-engine__core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 13.5rem; height: 13.5rem;
  display: grid;
  place-items: center;
}

/* Three concentric rings. Each is one element with a conic gradient masked to an
   annulus — one node and one animation rather than a sprite or an SVG per ring. */
.lp-engine__ring {
  position: absolute;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.lp-engine__ring--1 {
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0 200deg,
              var(--lp-accent) 310deg, transparent 360deg);
  animation: lp-spin 7s linear infinite;
}
.lp-engine__ring--2 {
  inset: 1.35rem;
  background: conic-gradient(from 140deg, transparent 0 230deg,
              var(--lp-accent-2) 330deg, transparent 360deg);
  animation: lp-spin 11s linear infinite reverse;
  opacity: .75;
}
.lp-engine__ring--3 {
  inset: 2.7rem;
  background: conic-gradient(from 40deg, transparent 0 260deg,
              var(--lp-lo) 340deg, transparent 360deg);
  animation: lp-spin 16s linear infinite;
  opacity: .5;
}

.lp-engine__hub {
  position: relative;
  display: grid;
  place-items: center;
  gap: .1rem;
  width: 7rem; height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--lp-panel-2), #060a14 78%);
  border: 1px solid var(--lp-line-2);
  box-shadow: 0 0 46px -8px color-mix(in srgb, var(--lp-accent) 42%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .05);
}
.lp-engine__hub b {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--lp-accent-2);
  line-height: 1;
}
.lp-engine__hub i {
  font-style: normal;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .17em;
  color: var(--lp-ink-3);
}
.lp-engine__beat {
  width: .35rem; height: .35rem;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--lp-lo);
  animation: lp-beat 1.6s ease-in-out infinite;
}

/* The four satellites. Absolute so they can sit at the corners of the orbit and
   drift independently; the drift is why each carries its own delay. */
.lp-node {
  position: absolute;
  width: 45%;
  min-width: 11.5rem;
  padding: .7rem .8rem;
  border: 1px solid var(--lp-line-2);
  border-radius: 13px;
  background: color-mix(in srgb, var(--lp-panel) 92%, transparent);
  backdrop-filter: blur(9px);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .9);
  animation: lp-float 7s ease-in-out infinite;
  /* The contents are nowrap tables and fixed bars against an explicit width, so
     without this they spill out of the box and widen the document. Measured 23px
     of horizontal overflow at a 390px viewport before this was added. */
  overflow: hidden;
}
.lp-node header {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .5rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lp-accent-2);
}
.lp-node__ico { font-size: .55rem; opacity: .85; }

/* Pulled in toward the hub so the four read as orbiting it rather than framing
   it. Staggered delays keep the drift from looking mechanical. */
.lp-node--upload { left: 0;    top: 7%;    animation-delay: 0s; }
.lp-node--risk   { right: 0;   top: 2%;    animation-delay: -1.7s; }
.lp-node--txn    { left: 1%;   bottom: 6%; animation-delay: -3.4s; }
.lp-node--json   { right: 0;   bottom: 11%; animation-delay: -5.1s; }

/* The dot where the connector meets the card. The connector itself is the dot's
   own box-shadow trail, so there is no extra element and no SVG to keep in sync
   with a responsive layout. */
.lp-node__dot {
  position: absolute;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent) 26%, transparent),
              0 0 14px 2px color-mix(in srgb, var(--lp-accent) 55%, transparent);
  animation: lp-beat 2.4s ease-in-out infinite;
}
.lp-node--upload .lp-node__dot { right: -.25rem; bottom: 22%; }
.lp-node--risk   .lp-node__dot { left: -.25rem;  bottom: 22%; }
.lp-node--txn    .lp-node__dot { right: -.25rem; top: 22%; }
.lp-node--json   .lp-node__dot { left: -.25rem;  top: 22%; }

.lp-node__skel { display: grid; gap: .3rem; margin-bottom: .5rem; }
.lp-node__skel i {
  height: .3rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139, 158, 255, .3), rgba(139, 158, 255, .08));
}
.lp-node__skel i:nth-child(1) { width: 62%; }
.lp-node__skel i:nth-child(2) { width: 88%; }
.lp-node__skel i:nth-child(3) { width: 44%; }
.lp-node__btn {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 6px;
  background: var(--lp-accent-btn);
  color: #fff;
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.lp-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .1rem .4rem;
  margin-bottom: .35rem;
}
.lp-bar label { grid-column: 1 / -1; font-size: .5625rem; font-weight: 600; color: var(--lp-ink-3); }
.lp-bar__t { height: .3rem; border-radius: 999px; background: rgba(139, 158, 255, .12); overflow: hidden; }
.lp-bar__t i { display: block; height: 100%; width: var(--w); border-radius: 999px; }
.lp-bar__t--hi i { background: var(--lp-hi); }
.lp-bar__t--md i { background: var(--lp-md); }
.lp-bar__t--lo i { background: var(--lp-lo); }
.lp-bar b { font-size: .5rem; font-weight: 800; letter-spacing: .06em; }
.lp-bar__t--hi + b { color: var(--lp-hi); }
.lp-bar__t--md + b { color: var(--lp-md); }
.lp-bar__t--lo + b { color: var(--lp-lo); }

.lp-txn { width: 100%; border-collapse: collapse; font-size: .5625rem; }
.lp-txn td { padding: .16rem 0; color: var(--lp-ink-3); white-space: nowrap; }
.lp-txn td:nth-child(2) { color: var(--lp-ink-2); font-weight: 700; padding-left: .4rem; }
.lp-txn td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-txn .is-cr { color: var(--lp-lo); }
.lp-txn .is-dr { color: var(--lp-hi); }
.lp-txn .is-warn { color: var(--lp-md); }

.lp-json {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .5rem;
  line-height: 1.6;
  color: var(--lp-ink-3);
  white-space: pre;
}
.lp-json .k, .lp-code__body .k { color: var(--lp-accent-2); }
.lp-json .s, .lp-code__body .s { color: var(--lp-lo); }
.lp-json .n, .lp-code__body .n { color: var(--lp-md); }
.lp-code__body .b { color: var(--lp-hi); }

/* Fixed to the VIEWPORT, not the hero. It was absolute within .lp-hero at
   bottom: 1.4rem — and once the hero grew taller than the first screen (1090px of
   hero against 1030px of viewport on a 16" at 125% root scale) the cue rendered
   below the fold, so the one element whose entire purpose is to say "scroll" was
   only visible after scrolling. Fixed positioning pins it where it is needed, and
   it fades out once its job is done. */
.lp-scrollcue {
  position: fixed;
  left: 50%; bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 30;              /* above the scrim, below the nav at 40 */
  display: grid;
  justify-items: center;
  gap: .4rem;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
/* ews-landing.js sets this on the first scroll. */
html.lp-scrolled .lp-scrollcue { opacity: 0; visibility: hidden; }
.lp-scrollcue i {
  font-style: normal;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-scrollcue em {
  width: 1px; height: 2.4rem;
  background: linear-gradient(180deg, var(--lp-accent), transparent);
  animation: lp-drop 2.1s ease-in-out infinite;
}

/* ── 6. Section furniture ─────────────────────────────────────────────────── */

.lp-sec {
  width: var(--lp-shell);
  margin: 0 auto;
  padding: 5.5rem 0;
}
.lp-sec__head { max-width: 44rem; margin: 0 auto 2.6rem; text-align: center; }

.lp-kicker {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .28rem .7rem;
  border: 1px solid var(--lp-line-2);
  border-radius: 999px;
  background: rgba(139, 158, 255, .07);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-accent-2);
}
.lp-h2 {
  margin: 0 0 .8rem;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--lp-ink);
}
/* The accent half of every section heading, so the two-tone treatment from the
   hero carries down the page. */
.lp-h2 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--lp-accent-2), var(--lp-accent));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.lp-sub { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--lp-ink-3); }

/* Scroll reveal. ews-landing.js adds .is-in via IntersectionObserver; the
   pre-reveal state lives here so there is no flash of unstyled motion, and the
   whole thing is disabled under prefers-reduced-motion at the bottom. */
/* Gated on html.lp-js, which the inline script in the template head sets before
   first paint. This matters more than it looks: the pre-reveal state is
   opacity:0, so if the stylesheet hid these unconditionally and ews-landing.js
   then failed to load — blocked, cached badly, a syntax error in an earlier
   function — most of the page, including the sign-in card, would be invisible
   with no way to recover. Gating means no JS simply means no animation.

   Offset and easing match the reference's GSAP recipe: y:40, .8s, power3.out. */
html.lp-js [data-lp-in] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
              transform .8s cubic-bezier(.16, 1, .3, 1);
}
html.lp-js [data-lp-in].is-in { opacity: 1; transform: none; }

/* ── 7. Cards ─────────────────────────────────────────────────────────────── */

.lp-cards { display: grid; gap: 1rem; }
.lp-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lp-card2, .lp-cap, .lp-use, .lp-ben {
  padding: 1.35rem 1.2rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--lp-panel) 88%, transparent),
              color-mix(in srgb, var(--lp-bg-2) 88%, transparent));
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lp-card2:hover, .lp-cap:hover, .lp-use:hover, .lp-ben:hover {
  border-color: var(--lp-line-2);
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -26px rgba(0, 0, 0, .95);
}
.lp-card2 h3, .lp-cap h3, .lp-use h3, .lp-ben h3 {
  margin: 0 0 .4rem;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--lp-ink);
}
.lp-card2 p, .lp-cap p, .lp-use p, .lp-ben p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--lp-ink-3);
}

.lp-card2__ico {
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  margin-bottom: .8rem;
  border: 1px solid var(--lp-line-2);
  border-radius: 10px;
  background: rgba(139, 158, 255, .08);
  color: var(--lp-accent-2);
}
.lp-card2__ico svg { width: 1.1rem; height: 1.1rem; }

.lp-cap { position: relative; overflow: hidden; }
.lp-cap__n {
  display: block;
  margin-bottom: .55rem;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.04em;
  /* Deliberately low-contrast: an ordinal is a wayfinding aid, not content. */
  color: rgba(139, 158, 255, .3);
  font-variant-numeric: tabular-nums;
}
.lp-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.lp-tags li {
  padding: .18rem .45rem;
  border: 1px dashed var(--lp-line-2);
  border-radius: 5px;
  font-size: .5625rem;
  font-weight: 700;
  color: var(--lp-ink-3);
}

/* The seven-step flow. A numbered rail: the connector is a pseudo-element on the
   list, so adding a step cannot leave a dangling line. */
.lp-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lp-step;
}
.lp-flow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1.1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-line-2) 12%,
              var(--lp-line-2) 88%, transparent);
}
.lp-flow li { position: relative; padding-top: 3rem; }
.lp-flow__n {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--lp-line-2);
  background: var(--lp-panel-2);
  color: var(--lp-accent-2);
  font-size: .8125rem;
  font-weight: 900;
}
.lp-flow h3 { margin: 0 0 .3rem; font-size: .8125rem; font-weight: 800; color: var(--lp-ink); }
.lp-flow p { margin: 0; font-size: .75rem; line-height: 1.55; color: var(--lp-ink-3); }

.lp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.lp-stats li {
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: linear-gradient(180deg, rgba(139, 158, 255, .07), transparent);
}
.lp-stats b {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.035em;
  background: linear-gradient(96deg, var(--lp-accent-2), var(--lp-accent));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.lp-stats span {
  display: block;
  margin-top: .3rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}

/* ── 8. Ticker ────────────────────────────────────────────────────────────── */

/* One marquee row of capability words. The list is duplicated by
   ews-landing.js rather than in the template, so the copy exists once. */
/* The <ul> is the viewport: full width, clipping, and masked at both edges so
   items fade rather than being cut. ews-landing.js moves the items into a
   .lp-ticker__track child and duplicates them; the track is what animates.
   Without JS this stays a plain clipped row — no animation, nothing broken. */
.lp-ticker {
  display: block;
  width: 100%;
  margin: 2.6rem 0 0;
  padding: .9rem 0;
  list-style: none;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Pre-JS / no-JS fallback: the bare <li> children still lay out as a row. */
.lp-ticker > li { display: inline-block; margin-right: 2.5rem; }

.lp-ticker__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  /* 28s to match the reference. Duplicated content means -50% lands the second
     copy exactly where the first began, so the loop has no seam. */
  animation: lp-ticker 28s linear infinite;
}
.lp-ticker__track > li { flex: none; }
.lp-ticker li {
  flex: none;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  white-space: nowrap;
}
.lp-ticker li::before { content: "◆"; margin-right: .7rem; color: var(--lp-accent); font-size: .5rem; }

/* ── 9. Output schema ─────────────────────────────────────────────────────── */

.lp-schema {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.25rem;
  /* Without this the code card stretches to the taller field column and trails a
     large empty panel under the JSON. */
  align-items: start;
}

.lp-code {
  border: 1px solid var(--lp-line-2);
  border-radius: var(--lp-radius);
  background: #060a14;
  overflow: hidden;
}
.lp-code__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--lp-line);
  background: rgba(139, 158, 255, .05);
}
.lp-code__bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lp-line-2); }
.lp-code__bar i:first-child { background: var(--lp-hi); }
.lp-code__bar i:nth-child(2) { background: var(--lp-md); }
.lp-code__bar i:nth-child(3) { background: var(--lp-lo); }
.lp-code__bar span {
  margin-left: .35rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .6875rem;
  color: var(--lp-ink-3);
}
.lp-code__body {
  margin: 0;
  padding: 1rem .95rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .6875rem;
  line-height: 2;
  color: var(--lp-ink-3);
  /* Long JSON lines scroll inside the card rather than widening the page. */
  overflow-x: auto;
  white-space: pre;
}
.lp-code__foot {
  padding: .6rem .85rem;
  border-top: 1px solid var(--lp-line);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-lo);
}

.lp-fields { display: grid; gap: .5rem; margin: 0; }
.lp-fields > div {
  padding: .75rem .9rem;
  border: 1px solid var(--lp-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--lp-panel) 82%, transparent);
  transition: border-color .18s ease;
}
.lp-fields > div:hover { border-color: var(--lp-line-2); }
.lp-fields dt {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .75rem;
  font-weight: 700;
  color: var(--lp-accent-2);
}
.lp-fields dd { margin: .15rem 0 0; font-size: .75rem; color: var(--lp-ink-3); }

/* ── 10. The auth card ────────────────────────────────────────────────────── */

.lp-sec--access {
  padding-bottom: 4rem;
  /* Both forms post to #access so a rendered error lands in view; without this
     the sticky nav would sit on top of the card's tabs. */
  scroll-margin-top: 5rem;
}

.lp-card {
  width: min(37rem, 100%);
  margin: 0 auto;
  padding: 1.6rem;
  border: 1px solid var(--lp-line-2);
  border-radius: 22px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--lp-panel-2) 94%, transparent),
              color-mix(in srgb, var(--lp-panel) 96%, transparent));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95),
              inset 0 1px 0 rgba(255, 255, 255, .05);
}

.lp-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  margin-bottom: 1.3rem;
  padding: .25rem;
  border: 1px solid var(--lp-line);
  border-radius: 11px;
  background: rgba(6, 10, 20, .6);
}
.lp-tab {
  padding: .55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lp-ink-3);
  font: 700 .8125rem/1 'Inter', sans-serif;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.lp-tab:hover { color: var(--lp-ink); }
.lp-tab[aria-selected="true"] {
  background: var(--lp-accent-btn);
  color: #fff;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--lp-accent) 90%, transparent);
}
/* Opaque, two-layer, and light enough to read over the blue fill as well as the
   card. The previous ring was --lp-accent at 40% alpha, which composites to
   rgb(44,61,141): measured 1.67:1 against the tab strip, well under the 3:1 WCAG
   1.4.11 wants of a focus indicator — and it came with outline:none, so it also
   removed the browser's own fallback. */
.lp-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lp-bg), 0 0 0 4px var(--lp-accent-2);
}

.lp-panel:focus { outline: none; }
.lp-panel__title { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 800; color: var(--lp-ink); }
.lp-panel__sub { margin: 0 0 1.1rem; font-size: .8125rem; line-height: 1.55; color: var(--lp-ink-3); }

.lp-alert {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .7rem .8rem;
  border: 1px solid color-mix(in srgb, var(--lp-hi) 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--lp-hi) 12%, transparent);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: #ffc9c9;
}
.lp-alert svg { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }
.lp-alert--ok {
  border-color: color-mix(in srgb, var(--lp-lo) 40%, transparent);
  background: color-mix(in srgb, var(--lp-lo) 12%, transparent);
  color: #b8f5da;
}

/* Two columns, because stacked this form ran past a laptop viewport and read as
   mostly empty space. The full-width exceptions are the two long fields. */
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .8rem; }
.lp-grid > .lp-field:nth-last-child(2),
.lp-grid > .lp-field:last-child { grid-column: 1 / -1; }

.lp-field { margin-bottom: .85rem; }
.lp-grid .lp-field { margin-bottom: 0; }

.lp-label {
  display: block;
  margin-bottom: .3rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-optional { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .7; }

.lp-inputwrap { position: relative; display: flex; align-items: center; }
.lp-inputwrap svg {
  position: absolute;
  left: .7rem;
  width: 1rem; height: 1rem;
  color: var(--lp-ink-3);
  pointer-events: none;
}

.lp-input {
  width: 100%;
  box-sizing: border-box;
  padding: .68rem .8rem .68rem 2.3rem;
  border: 1px solid var(--lp-line-2);
  border-radius: 10px;
  background: rgba(6, 10, 20, .72);
  color: var(--lp-ink);
  font: 600 .875rem/1.4 'Inter', sans-serif;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lp-input--plain { padding-left: .8rem; }
.lp-input::placeholder { color: #6c7590; font-weight: 500; }
.lp-input:focus {
  outline: none;
  border-color: var(--lp-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent-2) 45%, transparent);
}
textarea.lp-input { resize: vertical; min-height: 3.1rem; }

.lp-reveal {
  position: absolute;
  right: .45rem;
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--lp-ink-3);
  cursor: pointer;
}
.lp-reveal:hover { color: var(--lp-ink); background: rgba(139, 158, 255, .1); }
.lp-reveal svg { position: static; width: 1rem; height: 1rem; }
.lp-reveal[aria-pressed="true"] { color: var(--lp-accent-2); }

.lp-hint { margin: .3rem 0 0; font-size: .6875rem; color: var(--lp-ink-3); }

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: .3rem;
  padding: .8rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: linear-gradient(96deg, var(--lp-accent-btn) 0%, var(--lp-accent-deep) 100%);
  color: #fff;
  font: 800 .9375rem/1 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 32px -14px color-mix(in srgb, var(--lp-accent) 95%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lp-btn svg { width: 1.05rem; height: 1.05rem; }
.lp-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
/* Same fix as .lp-tab: the 45%-alpha ring measured 1.81:1 against the card and
   2.0:1 against the button's own fill. --lp-accent-2 (#8b9eff) is opaque and
   clears 3:1 on both. */
.lp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lp-bg), 0 0 0 4px var(--lp-accent-2);
}
.lp-btn--ghost {
  background: rgba(139, 158, 255, .1);
  border-color: var(--lp-line-2);
  box-shadow: none;
}
.lp-btn--ghost:hover { background: rgba(139, 158, 255, .16); }
.lp-btn--hero { width: auto; margin-top: 0; }
.lp-btn--quiet {
  width: auto;
  margin-top: 0;
  background: transparent;
  border-color: var(--lp-line-2);
  color: var(--lp-ink-2);
  box-shadow: none;
  font-weight: 700;
}
.lp-btn--quiet:hover { background: rgba(139, 158, 255, .08); color: var(--lp-ink); }

.lp-note { margin: 1rem 0 0; font-size: .75rem; line-height: 1.6; color: var(--lp-ink-3); }
.lp-note a { color: var(--lp-accent-2); font-weight: 700; }

.lp-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lp-line);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-trust i { width: 3px; height: 3px; border-radius: 50%; background: var(--lp-line-2); }

/* ── 11. Footer ───────────────────────────────────────────────────────────── */

.lp-foot {
  width: var(--lp-shell);
  margin: 0 auto;
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--lp-line);
}
.lp-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.lp-nav__brand--foot { margin-bottom: .8rem; }
.lp-foot__addr { margin: 0; max-width: 20rem; font-size: .8125rem; line-height: 1.65; color: var(--lp-ink-3); }

.lp-foot__col h3 {
  margin: 0 0 .8rem;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-ink);
}
.lp-foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.lp-foot__col a { font-size: .8125rem; color: var(--lp-ink-3); text-decoration: none; }
.lp-foot__col a:hover { color: var(--lp-accent-2); }
.lp-foot__k {
  margin: 0 0 .15rem;
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #6c7590;
}
.lp-foot__v { margin: 0 0 .7rem; font-size: .8125rem; font-weight: 600; }
.lp-foot__v a { color: var(--lp-ink-2); text-decoration: none; }
.lp-foot__v a:hover { color: var(--lp-accent-2); }

.lp-certs {
  padding: 1.3rem 0;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
}
.lp-certs__lead {
  margin: 0 0 .9rem;
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6c7590;
}
.lp-certs ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-certs li {
  padding: .7rem .85rem;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  background: rgba(139, 158, 255, .04);
}
.lp-certs b { display: block; font-size: .8125rem; font-weight: 800; color: var(--lp-ink); }
.lp-certs span { display: block; margin-top: .1rem; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-lo); }

.lp-foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin: 1.4rem 0 0;
  font-size: .75rem;
  color: #6c7590;
}
.lp-foot__legal a { color: var(--lp-ink-3); text-decoration: none; }
.lp-foot__legal a:hover { color: var(--lp-accent-2); }

/* ── 12. Motion ───────────────────────────────────────────────────────────── */

@keyframes lp-spin  { to { transform: rotate(1turn); } }
@keyframes lp-beat  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lp-glow  { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes lp-drop  { 0% { opacity: 0; transform: scaleY(.2); transform-origin: top; }
                      45% { opacity: 1; }
                      100% { opacity: 0; transform: scaleY(1); transform-origin: top; } }
@keyframes lp-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Resolution independence ───────────────────────────────────────────────────
   Width alone is not enough. Measured across the real device matrix in CSS pixels
   — which is what the layout sees, so a 1920x1080 ThinkPad at Windows' default
   125% scaling is 1536x864, and a 14" MacBook Pro is 1512x982 — the hero's own
   content came to 948-1130px tall. On a 1366x768 ThinkBook that leaves the stats
   row and both buttons below the fold, which is exactly the "looks different on
   every machine" problem: the same page, but the call to action visible on a 16"
   and cut off on a 13".

   So the hero also responds to viewport HEIGHT. Nothing is hidden that carries
   information; the type and the rhythm tighten, and the decorative scroll cue
   goes since on a short screen it is redundant.
   -------------------------------------------------------------------------- */

@media (max-height: 900px) and (min-width: 901px) {
  .lp-hero { padding: 1rem 0 3.5rem; gap: 2.25rem; }
  .lp-title { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: .8rem; }
  .lp-lede { font-size: 1rem; line-height: 1.55; margin-bottom: 1rem; }
  .lp-chips { margin-bottom: 1.1rem; }
  .lp-chips li { padding: .25rem .5rem; }
  .lp-eyebrow { margin-bottom: .8rem; }
  .lp-hero__actions { margin-bottom: 1.25rem; }
  .lp-proof li { padding: .55rem .6rem; }
  .lp-engine { min-height: 22rem; }
  .lp-engine__core { width: 11.5rem; height: 11.5rem; }
  .lp-engine__hub { width: 6.2rem; height: 6.2rem; }
  /* The cue is NOT hidden here any more. It used to be in-flow in the hero, so on
     a short screen it cost space worth reclaiming; now it is fixed to the viewport
     and costs none — and a short screen is precisely where a scroll hint earns
     its keep. */
}

/* 13" and 15" laptops running at 150% scaling land here (1280x720, 1366x768). */
@media (max-height: 780px) and (min-width: 901px) {
  .lp-hero { padding: .5rem 0 2.5rem; gap: 1.75rem; }
  .lp-title { font-size: clamp(1.85rem, 3.1vw, 2.5rem); }
  .lp-lede { font-size: .9375rem; }
  .lp-engine { min-height: 19rem; }
  .lp-engine__core { width: 10rem; height: 10rem; }
  .lp-engine__hub { width: 5.4rem; height: 5.4rem; }
  .lp-engine__ring--2 { inset: 1rem; }
  .lp-engine__ring--3 { inset: 2rem; }
  .lp-node { font-size: .9em; }
  .lp-sec { padding: 3.5rem 0; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  /* Below this the two hero columns are ~420px each and the 4-up proof row spills:
     measured 55px of horizontal overflow at 960x600 (a 1440x900 Mac at 150% zoom).
     2x2 fixes it without touching the desktop layout. */
  .lp-proof { grid-template-columns: 1fr 1fr; max-width: 26rem; }
}

@media (max-width: 1080px) {
  .lp-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.6rem; }
  .lp-flow::before { display: none; }
  .lp-schema { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; gap: 2.5rem; min-height: 0; padding-top: 1rem; }
  .lp-engine { order: -1; min-height: 24rem; margin: 0 auto; max-width: 30rem; width: 100%; }
  .lp-nav__links { display: none; }
  .lp-scrollcue { display: none; }
  .lp-foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .lp-sec { padding: 3.5rem 0; }
  .lp-cards--5, .lp-cards--4, .lp-cards--3 { grid-template-columns: 1fr; }
  .lp-flow { grid-template-columns: 1fr 1fr; }
  .lp-stats { grid-template-columns: 1fr 1fr; }
  .lp-proof { grid-template-columns: 1fr 1fr; }
  .lp-certs ul { grid-template-columns: 1fr 1fr; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-card { padding: 1.15rem; }
  .lp-foot__grid { grid-template-columns: 1fr; }
}

/* Below this the four satellites are ~180px wide holding 9px tables — present
   but unreadable, and the reason the page overflowed horizontally. The core on
   its own still says "engine", so they are dropped rather than shrunk further. */
@media (max-width: 560px) {
  .lp-node { display: none; }
  .lp-engine { min-height: 17rem; }
  .lp-engine__core { width: 11rem; height: 11rem; }
  .lp-engine__hub { width: 6rem; height: 6rem; }
  .lp-engine__ring--2 { inset: 1.1rem; }
  .lp-engine__ring--3 { inset: 2.2rem; }
}

@media (max-width: 480px) {
  .lp-flow { grid-template-columns: 1fr; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────────
   Everything animated here is decoration — the rings, the drift, the marquee, the
   rotating half of the headline. The information is in the prose either way, so
   stopping all of it costs nothing. Reveals resolve to their visible end state
   rather than staying hidden, which is the part that would otherwise break the
   page for anyone who sets the preference. */

@media (prefers-reduced-motion: reduce) {
  .lp-engine__ring,
  .lp-engine__glow,
  .lp-engine__beat,
  .lp-eyebrow__pulse,
  .lp-node,
  .lp-node__dot,
  .lp-scrollcue em,
  .lp-ticker__track { animation: none !important; }

  html.lp-js [data-lp-in] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-title__accent { transition: none; }
  .lp-title__accent.is-out { opacity: 1; transform: none; }
  .lp-card2, .lp-cap, .lp-use, .lp-ben, .lp-nav__cta, .lp-btn { transition: none; }
}

@media print {
  #lp-canvas, .lp-scrim, .lp-grid-bg, .lp-engine, .lp-scrollcue { display: none !important; }
}