/* ══════════════════════════════════════════════════════════════════════
 * PonsDex — welcome page
 * Look: "Spotlight" (dark theme), rebuilt 1:1 from Figma node 2122:2244.
 * Ground: the "Green Vertical Blinds" clip, re-encoded in assets/video.
 *
 * Every number here is a Figma measurement in CSS pixels at the 1920
 * design width. Nothing scales fluidly — the RESPONSIVE block near the
 * bottom restates the tokens, never the rules.
 * ══════════════════════════════════════════════════════════════════════ */

/* ══ Reset ═══════════════════════════════════════════════════════════
 * The reference gets this from Tailwind's Preflight; standalone it has
 * to be spelled out. Only the parts the composition actually depends on —
 * notably headings and paragraphs losing their UA margins, and
 * `border-style: solid` by default so a bare `border-width` still
 * paints. */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd, pre, hr {
  margin: 0;
}

ul, ol, menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

b, strong { font-weight: bolder; }

small { font-size: 80%; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
}

/* The chrome is real links here rather than the reference's inert
 * spans, so anchors have to inherit instead of paint themselves. */
a {
  color: inherit;
  text-decoration: none;
}

/* ══ Tokens ══════════════════════════════════════════════════════════ */
:root {
  --font-general: "General Sans", system-ui, sans-serif;
  --font-onest: "Onest", system-ui, sans-serif;
  --font-script: "Playwrite US Trad", "Snell Roundhand", "Segoe Script", cursive;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* The page ground, and what "image 1" stands in for in Figma. Black is
   * only what shows under the asset — the video plate fills this layer. */
  --lk-asset: #000;

  /* ── Nav — Figma "Frame 68" ─────────────────────────────────────── */
  --nav-inset: 30px;        /* left/right offset from the canvas edge   */
  --nav-top: 16px;
  --nav-h: 62px;
  --nav-r: 64px;
  --nav-bg: rgba(255, 255, 255, 0.1);
  --nav-blur: 8px;
  --brand-x: 40px;          /* Frame 11 · x inside the bar             */
  --brand-gap: 8px;
  --brand-mark: 18px;
  --links-gap: 64px;        /* Frame 62 · the one gap between links    */
  --fs-nav: 24px;

  /* Nav CTA — Figma "Frame 63" */
  --navcta-w: 227px;
  --navcta-h: 54px;
  --navcta-inset: 4px;      /* 1860 − 1629 − 227 = 4, and top 4        */
  --navcta-pl: 48px;
  --navcta-pr: 3px;
  --navcta-icon: 48px;

  /* ── Hero — Figma "Frame 67" ────────────────────────────────────── */
  --hero-w: 1020px;
  --hero-gap: 72px;         /* headline block → CTA row                */
  --head-gap: 16px;         /* line 1 → line 2                         */
  --fs-h1a: 72px;           /* "The best on Pons" · General Sans Reg.  */
  --fs-h1b: 128px;          /* "Before they run" · Playwrite XLight    */

  /* The ramp both headline lines are cut out of. */
  --head-ramp: linear-gradient(to left, rgba(255, 255, 255, 0.3), #fff);
  --head-bleed: 24px;       /* side air for the script face's flourishes */

  /* CTA row — Figma "Frame 66" */
  --cta-gap: 16px;
  --btn-w: 260px;
  --btn-h: 71px;
  --btn-r: 64px;
  --btn-px: 64px;           /* padding-left on the solid, both on ghost */
  --btn-pr: 3px;
  --btn-icon: 65px;
  --fs-btn: 24px;
}

html {
  background: var(--lk-asset);
  /* Anchor jumps land below the fixed bar rather than under it. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + 24px);
}

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

body {
  margin: 0;
  /* The composition is still exactly one screen — `.lk-stage` holds that.
   * What changed is that it is now the FIRST screen of a page rather than
   * the only one, so the document scrolls where the reference did not. */
  min-height: 100svh;
  background: var(--lk-asset);
  font-family: var(--font-onest), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Full bleed. Black is the page's ground colour, not a frame around
 * it — the composition runs edge to edge like any real site. */
.lk-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--lk-asset);
}

/* ══ The asset plate ═════════════════════════════════════════════════
 * The living ground: the Green Vertical Blinds clip, full bleed, first
 * in the DOM so it stays behind everything.
 *
 * The poster is painted on the PLATE, not just handed to the <video>,
 * because the video is faded in on its first decoded frame — fading the
 * element would fade its own poster with it. So the still sits
 * underneath at the same cover geometry and the motion arrives over it.
 * The `poster` attribute stays on the element as well: with JS off the
 * video is never hidden and its own poster does the waiting. */
.lk-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--lk-asset) url("../img/hero-blinds-poster.jpg")
    center / cover no-repeat;
}

.lk-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hidden only when the script is there to reveal it. The still and the
 * first frame are different moments of the loop, so the swap is a short
 * cross-fade rather than a cut. */
html.lk-js .lk-bg-video {
  opacity: 0;
  transition: opacity 700ms linear;
}

html.lk-js .lk-bg-video.is-playing {
  opacity: 1;
}

/* The composition layer. In the app this is scaled inside the modal's
 * media frame; here it simply fills the screen. */
.uip-layer {
  position: absolute;
  inset: 0;
}

.lk {
  overflow: hidden;
  color: #fff;
}

/* ── Entry state ──────────────────────────────────────────────────
 * Elements that cascade in start hidden so nothing flashes before the
 * script takes over. The script itself sets `.lk-js` on <html>, so
 * with JS off the rule never matches and the page renders fully — no
 * blank composition.
 *
 * `will-change` deliberately does NOT live here: it would create a
 * permanent stacking context on every cascading element, trapping the
 * `z-index` of anything inside. The script sets it inline for the
 * flight and clears it on settle. */
html.lk-js [data-rise] {
  opacity: 0;
}

/* ══ Spotlight — the composition ═════════════════════════════════════ */

/* ── Nav bar · Figma "Frame 68" ─────────────────────────────────────
 * 1860 × 62 at (30, 16). Left/right insets rather than a fixed width,
 * so the bar keeps its 30px gutters at every viewport. */
.sp-nav {
  /* Figma pins the bar at (30, 16) of a one-screen canvas. On a page that
   * scrolls, staying at (30, 16) means `fixed` — at rest it is pixel-for
   * -pixel where the frame draws it, and it stays reachable after that. */
  position: fixed;
  z-index: 20;
  left: var(--nav-inset);
  right: var(--nav-inset);
  top: var(--nav-top);
  height: var(--nav-h);
  border-radius: var(--nav-r);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
}

/* Figma pins the brand and the link row at y19 in a 62-tall bar — dead
 * centre, so they ride the middle rather than a hard offset. */
.sp-brand,
.sp-links {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
}

.sp-brand {
  left: var(--brand-x);
  transform: translateY(-50%);
  gap: var(--brand-gap);
  font-family: var(--font-general), system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1;
  color: #fff;
}

.sp-mark {
  width: var(--brand-mark);
  height: var(--brand-mark);
  flex: none;
}

.sp-brand-logo {
  width: clamp(38px, 3vw, 52px);
  height: auto;
  max-height: calc(var(--nav-h) - 6px);
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(102, 255, 31, 0.2));
}

.sp-links {
  left: 50%;
  transform: translate(-50%, -50%);
  gap: var(--links-gap);
  font-family: var(--font-general), system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* Nav CTA · Figma "Frame 63" — 227 × 54, 4px of air on the right and
 * top. The label is flush to the 48px left pad and the disc flush to
 * the 3px right pad, so the pair is spread rather than centred. */
.sp-navcta {
  position: absolute;
  top: var(--navcta-inset);
  right: var(--navcta-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: var(--navcta-w);
  height: var(--navcta-h);
  column-gap: clamp(8px, .7vw, 14px);
  padding-inline: var(--navcta-pr);
  border-radius: var(--nav-r);
  background: #000;
  font-family: var(--font-onest), system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--fs-nav);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.sp-navcta .sp-disc {
  width: var(--navcta-icon);
  height: var(--navcta-icon);
}

.sp-disc {
  flex: none;
  display: block;
}

/* ── Hero · Figma "Frame 67" ────────────────────────────────────────
 * A 1020-wide column centred on the 1920 × 1080 canvas (its box centre
 * sits at 540.5, hence the half-pixel). */
.sp-hero {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% + 0.5px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--hero-w);
  max-width: calc(100% - 2 * var(--nav-inset));
  gap: var(--hero-gap);
}

.sp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vh, 18px);
  width: 100%;
  text-align: center;
}

.sp-hero-logo {
  width: clamp(92px, 9vw, 176px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 44px rgba(86, 255, 17, 0.24));
}

.sp-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--head-gap);
  width: 100%;
}

/* Both lines are the same cut-out: a white ramp running right-to-left
 * across the full 1020px text box, clipped to the glyphs.
 *
 * THE BOX HAS TO BE BIGGER THAN THE LINE. `background-clip: text` paints
 * only inside the element's own box, so any ink the glyphs put OUTSIDE
 * it gets no paint and simply disappears — at `line-height: 1` that is
 * the descender of every "g", and on the script face a good deal more:
 * measured at 128px its ink runs 8px above the box and 62px below it.
 *
 * So the box is grown in `em` — it scales with the type, one rule for
 * every breakpoint — and pulled back by an equal negative margin, which
 * leaves the flow geometry exactly as Figma draws it (216px for the
 * pair, 88px between the two baseline boxes). Sideways the growth is a
 * flat `--head-bleed`, the same on both lines, so the two ramps stay
 * the same length and keep fading in step. */
.sp-h1,
.sp-h2 {
  width: calc(100% + 2 * var(--head-bleed));
  margin: -0.22em calc(-1 * var(--head-bleed)) -0.62em;
  padding: 0.22em var(--head-bleed) 0.62em;
  line-height: 1;
  background-image: var(--head-ramp);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sp-h1 {
  font-family: var(--font-general), system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-h1a);
}

/* At the design size the script line measures just under the 1020px
 * box. `nowrap` keeps it the single line Figma draws instead of letting
 * a rounding difference break the last word onto a second one. The
 * phone breakpoint hands wrapping back, where the measure is genuinely
 * tight. */
.sp-h2 {
  font-family: var(--font-script), cursive;
  font-weight: 200;
  font-style: normal;
  font-size: var(--fs-h1b);
  white-space: nowrap;
}

/* ── CTA row · Figma "Frame 66" ─────────────────────────────────── */
.sp-cta {
  display: flex;
  align-items: center;
  gap: var(--cta-gap);
}

.sp-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 16px);
}

.sp-community-row {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-community {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-onest), system-ui, sans-serif;
  font-size: clamp(12px, 0.8vw, 14px);
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.sp-community span { color: #c7ff2e; }

.sp-community:hover {
  border-color: rgba(199, 255, 46, 0.6);
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
}

.sp-btn {
  display: flex;
  align-items: center;
  width: var(--btn-w);
  height: var(--btn-h);
  border-radius: var(--btn-r);
  font-family: var(--font-onest), system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* Solid — label at the 64px pad, disc flush right at 3px. */
.sp-btn-solid {
  width: max-content;
  min-width: var(--btn-w);
  justify-content: center;
  column-gap: clamp(8px, .7vw, 14px);
  padding-inline: var(--btn-pr);
  background: #000;
}

.sp-btn-solid .sp-disc {
  width: var(--btn-icon);
  height: var(--btn-icon);
}

/* Ghost — a 1px white hairline, label centred in the pill. */
.sp-btn-ghost {
  justify-content: center;
  padding: 3px var(--btn-px);
  border: 1px solid #fff;
}

/* The Admin-selected address replaces the old marketing label. It keeps
 * the full CA on normal screens and only truncates when the two hero
 * actions genuinely run out of horizontal room. */
.sp-btn-ghost.has-site-pin {
  width: min(540px, calc(var(--hero-w) - var(--btn-w) - var(--cta-gap)));
  min-width: 0;
  padding-inline: 24px;
  font-family: var(--font-mono);
  font-size: clamp(11px, .8vw, 15px);
  letter-spacing: -.035em;
}

.sp-btn-ghost.has-site-pin [data-site-pin-label] {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Interactive chrome — the controls accept the pointer and answer with
 * instant hover/press feedback (state swaps only; motion stays
 * spring-only). Everywhere else the media keeps the pointer. */
.sp-links a,
.sp-brand,
.sp-navcta,
.sp-btn,
.sp-community {
  cursor: pointer;
  user-select: none;
}

.sp-links a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.sp-navcta:hover,
.sp-btn-solid:hover { background: #1a1a1a; }
.sp-navcta:active,
.sp-btn-solid:active { background: #000; }

.sp-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.sp-btn-ghost:active { background: rgba(255, 255, 255, 0.04); }

.sp-btn-ghost:disabled {
  cursor: default;
  opacity: .72;
}

.sp-btn-ghost.has-site-pin.is-copied {
  border-color: #c7ff2e;
  color: #c7ff2e;
  background: rgba(199, 255, 46, .12);
}

/* Real links need a real focus ring — the reference's spans never took
 * the keyboard. Nothing else about the chrome changes. */
.sp-brand:focus-visible,
.sp-links a:focus-visible,
.sp-navcta:focus-visible,
.sp-btn:focus-visible,
.sp-community:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════
 * The composition is written once, above, against the 1920 design
 * width. Every breakpoint below only RESTATES the tokens — no rule is
 * redeclared except where the phone genuinely needs a different layout
 * (the link row comes out, because five items at a legible size cannot
 * share a bar with the brand and the CTA).
 *
 * The one ratio worth protecting is `--hero-w ÷ --fs-h1b`: at the
 * design size that is 1020 ÷ 128 ≈ 8, which is what keeps the script
 * line on one line. Every step below stays at or above it. */

@media (max-width: 1600px) {
  :root {
    --nav-h: 56px;
    --brand-x: 32px;
    --brand-mark: 16px;
    --links-gap: 44px;
    --fs-nav: 20px;
    --navcta-w: 190px;
    --navcta-h: 48px;
    --navcta-pl: 40px;
    --navcta-icon: 42px;

    --hero-w: 860px;
    --hero-gap: 58px;
    --head-gap: 14px;
    --fs-h1a: 58px;
    --fs-h1b: 104px;

    --btn-w: 220px;
    --btn-h: 62px;
    --btn-px: 52px;
    --btn-icon: 56px;
    --fs-btn: 20px;
  }
}

@media (max-width: 1280px) {
  :root {
    --nav-inset: 24px;
    --nav-top: 14px;
    --nav-h: 52px;
    --brand-x: 26px;
    --links-gap: 30px;
    --fs-nav: 18px;
    --navcta-w: 166px;
    --navcta-h: 44px;
    --navcta-pl: 30px;
    --navcta-icon: 38px;

    --hero-w: 720px;
    --hero-gap: 48px;
    --head-gap: 12px;
    --fs-h1a: 48px;
    --fs-h1b: 86px;

    --btn-w: 196px;
    --btn-h: 56px;
    --btn-px: 44px;
    --btn-icon: 50px;
    --fs-btn: 18px;
  }
}

@media (max-width: 1024px) {
  :root {
    --links-gap: 22px;
    --fs-nav: 16px;
    --navcta-w: 148px;
    --navcta-h: 42px;
    --navcta-pl: 24px;
    --navcta-icon: 36px;

    --hero-w: 620px;
    --hero-gap: 40px;
    --fs-h1a: 40px;
    --fs-h1b: 70px;

    --btn-w: 176px;
    --btn-h: 52px;
    --btn-px: 38px;
    --btn-icon: 46px;
    --fs-btn: 16px;
  }
}

/* ── The phone bands ────────────────────────────────────────────────
 * Below 760 the hero stops being a fixed 1020-wide column and becomes
 * the screen minus its 16px gutters, so the headline no longer has a
 * measure of its own — it has whatever the phone is. One or two coarse
 * steps therefore leave the display type stranded at the wide end of
 * each band, which is what made it read small.
 *
 * The bands below are cut close instead, and each one is sized from its
 * OWN NARROWEST width, so the script line lands between 82% and 98% of
 * the measure everywhere rather than 63% at one end and 94% at the
 * other. The face runs 7.97 × its font-size wide, which is the number
 * every step here is solved against.
 *
 * `--fs-h1a` keeps Figma's 72:128 relationship to it (0.5625) at every
 * step, so the two lines never drift apart. */

@media (max-width: 760px) {
  :root {
    --nav-inset: 16px;
    --nav-top: 12px;
    --nav-h: 48px;
    --nav-r: 48px;
    --brand-x: 20px;
    --brand-mark: 15px;
    --fs-nav: 16px;
    --navcta-w: 132px;
    --navcta-h: 40px;
    --navcta-pl: 20px;
    --navcta-icon: 34px;

    --head-bleed: 12px;
    --hero-w: 100%;
    --hero-gap: 36px;
    --head-gap: 10px;
    --fs-h1a: 45px;
    --fs-h1b: 80px;

    --cta-gap: 14px;
    --btn-w: 220px;
    --btn-h: 60px;
    --btn-r: 48px;
    --btn-px: 48px;
    --btn-icon: 54px;
    --fs-btn: 19px;
  }

  /* Five links cannot share the bar with the brand and the CTA at a
   * size anyone can read — the bar keeps the two that matter. */
  .sp-links { display: none; }

  .sp-hero-logo { width: clamp(78px, 24vw, 112px); }

  /* The measure is real now, so the line is allowed to break rather
   * than run off the screen. */
  .sp-h2 { white-space: normal; }
}

@media (max-width: 680px) {
  :root {
    --hero-gap: 32px;
    --head-gap: 9px;
    --fs-h1a: 39px;
    --fs-h1b: 70px;

    --btn-w: 210px;
    --btn-h: 58px;
    --btn-px: 46px;
    --btn-icon: 52px;
    --fs-btn: 18px;
  }
}

@media (max-width: 600px) {
  :root {
    --hero-gap: 27px;
    --head-gap: 8px;
    --fs-h1a: 34px;
    --fs-h1b: 60px;

    --cta-gap: 12px;
    --btn-w: 195px;
    --btn-h: 56px;
    --btn-px: 42px;
    --btn-icon: 50px;
    --fs-btn: 17px;
  }
}

@media (max-width: 520px) {
  :root {
    --nav-h: 44px;
    --brand-x: 16px;
    --fs-nav: 15px;
    --navcta-w: 118px;
    --navcta-h: 38px;
    --navcta-pl: 16px;
    --navcta-icon: 32px;

    --hero-gap: 22px;
    --head-gap: 6px;
    --fs-h1a: 28px;
    --fs-h1b: 50px;

    --btn-w: 180px;
    --btn-h: 52px;
    --btn-px: 38px;
    --btn-icon: 46px;
    --fs-btn: 16px;
  }

}

@media (max-width: 440px) {
  :root {
    --hero-gap: 20px;
    --head-gap: 5px;
    --fs-h1a: 24px;
    --fs-h1b: 43px;

    --btn-w: 162px;
    --btn-h: 50px;
    --btn-px: 34px;
    --btn-icon: 44px;
    --fs-btn: 15px;
  }
}

@media (max-width: 380px) {
  :root {
    --navcta-w: 108px;
    --navcta-pl: 14px;
    --navcta-icon: 30px;

    --hero-gap: 18px;
    --fs-h1a: 21px;
    --fs-h1b: 38px;

    --cta-gap: 10px;
    --btn-w: 144px;
    --btn-h: 48px;
    --btn-px: 30px;
    --btn-icon: 42px;
    --fs-btn: 14px;
  }
}

/* The floor — 320px and the odd narrower window. Both pills still fit
 * side by side at 300px, which is where the CTA row runs out. */
@media (max-width: 340px) {
  :root {
    --hero-gap: 16px;
    --head-gap: 4px;
    --fs-h1a: 19px;
    --fs-h1b: 33px;

    --btn-w: 126px;
    --btn-h: 44px;
    --btn-px: 24px;
    --btn-icon: 38px;
    --fs-btn: 13px;
  }
}

/* ── Short windows ──────────────────────────────────────────────────
 * Width is the usual binding axis, but a shallow viewport — a laptop
 * with a short window, a phone on its side — can run the centred hero
 * up into the nav bar. Each guard restates a token set the width scale
 * already defines, and every one is gated on the width band it belongs
 * to, so a short window can only ever step the composition DOWN, never
 * back up over a narrower rule. */

@media (max-height: 700px) and (min-width: 1281px) {
  :root {
    --nav-h: 56px;
    --brand-x: 32px;
    --brand-mark: 16px;
    --links-gap: 44px;
    --fs-nav: 20px;
    --navcta-w: 190px;
    --navcta-h: 48px;
    --navcta-pl: 40px;
    --navcta-icon: 42px;

    --hero-w: 860px;
    --hero-gap: 58px;
    --head-gap: 14px;
    --fs-h1a: 58px;
    --fs-h1b: 104px;

    --btn-w: 220px;
    --btn-h: 62px;
    --btn-px: 52px;
    --btn-icon: 56px;
    --fs-btn: 20px;
  }
}

@media (max-height: 560px) and (min-width: 1025px) {
  :root {
    --nav-h: 52px;
    --brand-x: 26px;
    --links-gap: 30px;
    --fs-nav: 18px;
    --navcta-w: 166px;
    --navcta-h: 44px;
    --navcta-pl: 30px;
    --navcta-icon: 38px;

    --hero-w: 720px;
    --hero-gap: 48px;
    --head-gap: 12px;
    --fs-h1a: 48px;
    --fs-h1b: 86px;

    --btn-w: 196px;
    --btn-h: 56px;
    --btn-px: 44px;
    --btn-icon: 50px;
    --fs-btn: 18px;
  }
}

@media (max-height: 460px) and (min-width: 761px) {
  :root {
    --links-gap: 22px;
    --fs-nav: 16px;
    --navcta-w: 148px;
    --navcta-h: 42px;
    --navcta-pl: 24px;
    --navcta-icon: 36px;

    --hero-w: 620px;
    --hero-gap: 40px;
    --fs-h1a: 40px;
    --fs-h1b: 70px;

    --btn-w: 176px;
    --btn-h: 52px;
    --btn-px: 38px;
    --btn-icon: 46px;
    --fs-btn: 16px;
  }
}

@media (max-height: 360px) and (min-width: 521px) {
  :root {
    --nav-h: 44px;
    --fs-nav: 15px;
    --navcta-w: 118px;
    --navcta-h: 38px;
    --navcta-pl: 16px;
    --navcta-icon: 32px;

    --hero-w: 620px;
    --hero-gap: 26px;
    --head-gap: 8px;
    --fs-h1a: 26px;
    --fs-h1b: 40px;

    --btn-w: 148px;
    --btn-h: 44px;
    --btn-px: 24px;
    --btn-icon: 38px;
    --fs-btn: 14px;
  }
}

@media (max-height: 700px) {
  .sp-hero-logo { width: clamp(72px, 12vh, 96px); }
  .sp-head { gap: 6px; }
}

@media (max-height: 460px) {
  .sp-hero-logo,
  .sp-community { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.lk-js [data-rise] { opacity: 1; }

  /* The plate stops moving too — the still carries the ground. */
  html.lk-js .lk-bg-video { transition: none; }
}