/* Stowe Holdings website: homepage landing screen. index.html only, after styles.css and nav.css.
   Every class starts with "lp-" so nothing here touches the rest of the site.

   What it does:
   - Fills the first screen at any size. Type and spacing use clamp() with the zoom-safe
     --vw / --vh units from nav.css (never raw vw/vh, see the note there), and big monitors
     get the site-wide zoom on top, so nothing ends up as a small block in the middle.
   - Stats sit on a frosted glass panel; client logos on a white strip along the bottom.
   - The rotating carousel is the only thing that moves. */

/* ---------- Landing screen ---------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0a1d26;
  color: #fff;
  font-family: Inter, sans-serif;
}
/* Head office photo under a navy fade, with a teal glow behind the carousel and warm light low left */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 74% 44%, rgba(117, 185, 176, 0.24), transparent 70%),
    radial-gradient(38% 44% at 6% 96%, rgba(216, 185, 121, 0.14), transparent 70%),
    linear-gradient(100deg, rgba(10, 29, 38, 0.97) 0%, rgba(10, 29, 38, 0.9) 38%, rgba(13, 36, 48, 0.78) 66%, rgba(16, 41, 54, 0.66) 100%),
    url("../images/head-office-building-2.webp") center 38% / cover no-repeat;
}
/* Fine dot grid that fades in towards the right: a little texture, no movement */
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.2px) 0 0 / 30px 30px;
  opacity: 0.09;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
}

.lp-screen {
  --gut: 32px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--wrap); /* same width as the header */
  margin: 0 auto;
  /* the shared site nav floats over the hero (nav.css), so start below it */
  padding: calc(clamp(16px, calc(3 * var(--vh)), 56px) + var(--sn-height, 0px)) var(--gut) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, calc(2.6 * var(--vh)), 44px);
  min-height: max(640px, calc(100 * var(--svh)));
}
.lp-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ---------- 1 · Story + carousel ---------- */
.lp-top {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, calc(4 * var(--vw)), 120px);
  align-items: center;
  align-content: center;
}
.lp-copy { min-width: 0; }
.lp-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  font-size: clamp(12px, calc(0.7 * var(--vw)), 15px);
  letter-spacing: 0.06em;
  color: #9fb0d1;
}
.lp-name b {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, calc(0.85 * var(--vw)), 18px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d8b979;
}
.lp-name-rule { width: 28px; height: 1px; background: rgba(216, 185, 121, 0.6); }
.lp-h1 {
  font-family: Archivo, sans-serif;
  font-weight: 300;
  letter-spacing: -0.04em;
  /* min() of width and height: wide-but-short screens get a shorter headline, so the
     stats and the logo strip still fit on the first screen */
  font-size: clamp(34px, min(calc(3.9 * var(--vw)), calc(6.6 * var(--vh))), 96px);
  line-height: 1;
  margin: clamp(14px, calc(1.6 * var(--vh)), 24px) 0 0;
  color: #fff;
}
.lp-grad {
  font-weight: 600;
  background: linear-gradient(90deg, #d8b979, #75b9b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d8b979;
}
.lp-intro {
  font-size: clamp(15px, min(calc(0.95 * var(--vw)), calc(1.8 * var(--vh))), 21px);
  line-height: 1.6;
  color: #c7d0e6;
  margin: clamp(16px, calc(2.2 * var(--vh)), 30px) 0 0;
  max-width: 33em;
}
.lp-intro b { font-weight: 600; color: #fff; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, calc(3 * var(--vh)), 40px); }
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: clamp(46px, calc(2.7 * var(--vw)), 58px);
  padding: 0 clamp(22px, calc(1.4 * var(--vw)), 30px);
  border-radius: 100px;
  font-size: clamp(14px, calc(0.85 * var(--vw)), 17px);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-btn-gold { background: #d8b979; color: #102936; font-weight: 700; box-shadow: 0 10px 30px -12px rgba(216, 185, 121, 0.7); }
.lp-btn-gold:hover { background: #e2c68e; color: #102936; transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(216, 185, 121, 0.85); }
.lp-btn-line {
  border: 1px solid rgba(117, 185, 176, 0.55);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-weight: 600;
}
.lp-btn-line:hover { border-color: #75b9b0; background: rgba(117, 185, 176, 0.12); color: #fff; }
.lp-btn:focus-visible { outline: 2px solid #d8b979; outline-offset: 3px; }

/* Integrated with: a still row of partner names under the buttons */
.lp-int {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(1.2 * var(--vh)), 16px);
  margin-top: clamp(16px, calc(3 * var(--vh)), 56px);
  padding-top: clamp(12px, calc(2 * var(--vh)), 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 40em;
}
.lp-int-label {
  font-size: clamp(10px, calc(0.6 * var(--vw)), 12.5px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #75b9b0;
}
.lp-int-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-int-list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: clamp(30px, calc(1.8 * var(--vw)), 38px);
  padding: 0 clamp(12px, calc(0.8 * var(--vw)), 16px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, calc(0.75 * var(--vw)), 15.5px);
  color: #e6edf5;
  white-space: nowrap;
}
.lp-int-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #75b9b0; }
.lp-int-list .lp-int-more { padding: 0; border-style: dashed; border-color: rgba(216, 185, 121, 0.45); background: none; }
.lp-int-list .lp-int-more::before { display: none; }
.lp-int-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: inherit;
  padding: 0 clamp(12px, calc(0.8 * var(--vw)), 16px);
  border-radius: inherit;
  color: #d8b979;
  text-decoration: none;
}
.lp-int-more a:hover { background: rgba(216, 185, 121, 0.12); }
.lp-int-more a:focus-visible { outline: 2px solid #d8b979; outline-offset: 2px; }

/* Live dot in the service-desk line under the carousel */
.lp-led {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #75b9b0;
  flex: none;
  animation: lp-breathe 2.4s ease-in-out infinite;
}
.lp-led::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(117, 185, 176, 0.55);
  animation: lp-ping 2.4s ease-out infinite;
}
@keyframes lp-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes lp-ping { 0% { transform: scale(0.5); opacity: 0.8; } 70%, 100% { transform: scale(1.8); opacity: 0; } }

/* Gentle staggered entrance, once */
.lp-rise { animation: lp-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--d, 0s); }
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- 2 · Stats on frosted glass ---------- */
.lp-base { position: relative; display: flex; flex-direction: column; gap: clamp(14px, calc(2.6 * var(--vh)), 44px); }
.lp-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: clamp(18px, calc(1.3 * var(--vw)), 28px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* gold-to-teal hairline along the top edge */
.lp-stats::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d8b979 25%, #75b9b0 75%, transparent);
  opacity: 0.85;
}
.lp-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, calc(0.6 * var(--vh)), 8px);
  padding: clamp(12px, calc(1.6 * var(--vh)), 24px) clamp(16px, calc(1.5 * var(--vw)), 36px);
  min-width: 0;
  transition: background 0.3s ease;
}
.lp-stat + .lp-stat { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.lp-stat:hover { background: rgba(255, 255, 255, 0.035); }
.lp-stat-kick {
  font-size: clamp(10px, calc(0.6 * var(--vw)), 12.5px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d8b979;
}
.lp-stat-num {
  font-family: Archivo, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, min(calc(2.3 * var(--vw)), calc(4.2 * var(--vh))), 56px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lp-stat-num i { font-style: normal; font-weight: 400; color: #d8b979; }
.lp-stat-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, calc(0.7 * var(--vw)), 15px);
  font-weight: 500;
  line-height: 1.3;
  color: #b9c6d8;
}
.lp-stat-lbl svg { flex: none; width: 1.1em; height: 1.1em; color: #75b9b0; }

/* ---------- 3 · Client logos on a white strip ---------- */
.lp-logos {
  --ls: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, calc(2 * var(--vw)), 48px);
  padding: clamp(16px, calc(2.2 * var(--vh)), 30px) 0;
}
/* the white runs the full width of the screen, behind the row */
.lp-logos::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(100 * var(--vw));
  transform: translateX(-50%);
  background: #fff;
}
.lp-logos-label {
  flex: none;
  font-size: clamp(10.5px, calc(0.62 * var(--vw)), 13px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2f6d63;
}
.lp-logos-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-logos-row li { display: flex; align-items: center; justify-content: center; }
.lp-logos-row img {
  display: block;
  width: auto;
  height: calc(var(--h, 36px) * var(--ls));
  max-width: calc(140px * var(--ls));
  object-fit: contain;
  transition: transform 0.2s ease;
}
.lp-logos-row li:hover img { transform: scale(1.06); }
/* leave room for the round help button in the bottom-right corner */
@media (min-width: 601px) { .lp-logos-row { padding-right: 64px; } }

/* ---------- Responsive ---------- */
/* Short laptop screens: keep the whole first screen in view */
@media (min-width: 901px) and (max-height: 820px) {
  .lp-h1 { font-size: clamp(36px, calc(3.5 * var(--vw)), 50px); }
  .lp-intro { font-size: 15px; margin-top: 14px; }
  .lp-ctas { margin-top: 18px; }
  .lp-stat { padding-top: 10px; padding-bottom: 10px; }
  .lp-stat-num { font-size: clamp(26px, calc(2.2 * var(--vw)), 36px); }
  .lp-logos { --ls: 0.85; }
  .lp-int { margin-top: 20px; padding-top: 14px; gap: 8px; }
  .lp-int-list li { min-height: 28px; font-size: 12.5px; }
}
@media (max-width: 1180px) {
  .lp-logos-row { flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
  .lp-stat { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 900px) {
  .lp-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-screen { min-height: 0; }
  .lp-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-stat { grid-column: span 2; }
  .lp-stat:nth-child(4), .lp-stat:nth-child(5) { grid-column: span 3; border-top: 1px solid rgba(255, 255, 255, 0.09); }
  .lp-stat:nth-child(4) { border-left: 0; }
}
@media (max-width: 600px) {
  .lp-screen { --gut: 16px; }
  .lp-ctas a { flex: 1 1 220px; justify-content: center; }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stat, .lp-stat:nth-child(4), .lp-stat:nth-child(5) { grid-column: auto; border-left: 0; }
  .lp-stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.09); }
  .lp-stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.09); }
  .lp-stat:last-child { grid-column: 1 / -1; }
  .lp-stat-num { font-size: 30px; }
  .lp-logos { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lp-logos-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; width: 100%; }
  .lp-logos-row img { height: calc(var(--h, 36px) * 0.78); max-width: 100%; }
}
@media (max-width: 440px) {
  .lp-upd { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-rise, .lp-led, .lp-led::after { animation: none !important; }
  .lp-btn, .lp-logos-row img, .lp-stat { transition: none; }
}

/* ---------- Splash screen (index.html, once per browser session) ----------
   The black logo lands on warm ivory while gold and teal orbits (echoing the rings in
   the mark) draw around it, a glint sweeps across it, the tagline pops in word by word
   over a gold rule, then the panel lifts away into the page. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(50% 45% at 50% 45%, rgba(216, 185, 121, 0.18), transparent 70%),
    radial-gradient(70% 55% at 50% 115%, rgba(117, 185, 176, 0.14), transparent 70%),
    #f8f5ef;
  color: #102936;
  cursor: pointer;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1), visibility 0.9s;
}
.splash-stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.5s ease;
}

/* Logo with a glint clipped to its own shape */
.splash-mark {
  position: relative;
  isolation: isolate;
  animation: splash-focus 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.splash-orbits {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 128%;
  height: auto;
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.splash-orbit {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: splash-trace 1s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.splash-orbit-a { stroke: rgba(184, 148, 79, 0.75); animation-delay: 0.15s; }
.splash-orbit-b { stroke: rgba(117, 185, 176, 0.65); animation-delay: 0.3s; }
.splash-comet {
  fill: #b8944f;
  filter: drop-shadow(0 0 6px rgba(216, 185, 121, 0.9));
  animation: splash-in 0.4s 0.55s ease-out both;
}
.splash-logo {
  display: block;
  width: clamp(220px, calc(30 * var(--vw)), 480px);
  max-width: calc(72 * var(--vw));
  height: auto;
}
.splash-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(216, 185, 121, 0.95) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  -webkit-mask: url("../logos/stowe-logo-clear.png") center / 100% 100% no-repeat;
  mask: url("../logos/stowe-logo-clear.png") center / 100% 100% no-repeat;
  animation: splash-glint 0.8s 0.55s ease-in-out both;
}

.splash-rule {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8944f, transparent);
  animation: splash-draw 0.6s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.splash-line {
  margin: 0;
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #4a5d6b;
}
.splash-line span {
  display: inline-block;
  animation: splash-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(0.7s + var(--i) * 0.09s);
}
.splash-line i { font-style: normal; color: #b8944f; padding: 0 0.5em; animation: splash-in 0.4s 0.7s ease-out both; }
.splash-stamp {
  margin: -6px 0 0;
  padding: 6px 12px;
  border: 1px solid rgba(184, 148, 79, 0.55);
  border-radius: 100px;
  font: italic 500 15px/1 Newsreader, Georgia, serif;
  color: #8a6a32;
  animation: splash-stamp 0.5s 1.1s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

/* Exit: the panel lifts away, the logo drifting up a little faster */
.splash.is-done { transform: translateY(-100%); visibility: hidden; pointer-events: none; }
.splash.is-done .splash-stage { transform: translateY(calc(-14 * var(--vh))); opacity: 0; }

html.splash-lock, html.splash-lock body { overflow: hidden; }
/* Hold the hero's entrance until the splash has gone */
html.splash-lock .lp-rise { animation-play-state: paused; }

@keyframes splash-focus { from { opacity: 0; transform: scale(0.86); filter: blur(10px); } }
@keyframes splash-trace { to { stroke-dashoffset: 0; } }
@keyframes splash-pop { from { opacity: 0; transform: translateY(0.9em) scale(0.8); } }
@keyframes splash-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.4); } }
@keyframes splash-glint { to { background-position: 150% 0; } }
@keyframes splash-draw { from { transform: scaleX(0); opacity: 0; } }
@keyframes splash-in { from { opacity: 0; } }

@media (max-width: 640px) {
  .splash-line { font-size: 10px; letter-spacing: 0.18em; }
}
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash *::before { animation: none !important; }
  .splash-shine, .splash-comet { display: none; }
  .splash-orbit { stroke-dashoffset: 0; }
  .splash, .splash-stage { transition: opacity 0.4s ease, visibility 0.4s; }
  .splash.is-done { transform: none; opacity: 0; }
}

/* The Stowe News title starts at 1.8x before it "stamps" into place. Without this,
   that oversized title made phones scroll sideways. Clip it to its own section.
   (Yes, it's odd that this lives in landing.css. It was a quick fix and it stuck.) */
.blog { overflow-x: clip; }
.lp-upd[hidden] { display: none !important; }

/* =========================================================
   1.4.2 touch-ups: the client logo strip closes the first screen at every size
   ========================================================= */
/* the rail holds the row; the aria-hidden copies exist only for the phone/tablet marquee */
.lp-logos-rail { flex: 1; min-width: 0; }
.lp-logos-row li[aria-hidden="true"] { display: none; }
@keyframes lp-roll { to { transform: translateX(-50%); } }

/* small laptops and landscape tablets: one row, scaled down, instead of two */
@media (min-width: 901px) and (max-width: 1180px) {
  .lp-logos { --ls: 0.72; gap: 20px; }
  .lp-logos-row { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
}
/* short desktop windows (768px laptops once the browser bars are counted): the partner names step
   aside (the Integrations section further down has them all) and the picture ring gets smaller */
@media (min-width: 901px) and (max-height: 780px) {
  .lp-int { display: none; }
  .lp-hero .cz { --cz-size: clamp(100px, min(calc(12 * var(--vw)), calc(16.5 * var(--vh))), 220px); } /* beats carousel.css, which loads later */
}

/* phones and tablets: headline, buttons, then the logos, so they are on the first screen;
   the partner names, the picture carousel and the figures follow underneath */
@media (max-width: 900px) {
  .lp-screen { gap: 0; padding-bottom: 32px; }
  .lp-top, .lp-base, .lp-copy { display: contents; }
  .lp-name { order: 1; }
  .lp-h1 { order: 2; }
  .lp-intro { order: 3; }
  .lp-ctas { order: 4; }
  .lp-logos { order: 5; margin-top: 28px; padding: 14px 0; flex-direction: row; align-items: center; gap: 14px; }
  .lp-int { order: 6; margin-top: 32px; }
  .cz { order: 7; margin-top: 36px; }
  .lp-stats { order: 8; margin-top: 28px; }
  .lp-logos-rail {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .lp-logos-row {
    display: flex; flex-wrap: nowrap; width: max-content; justify-content: flex-start;
    gap: 28px; padding-right: 28px; /* = gap, so the loop has no jump */
    animation: lp-roll 40s linear infinite;
  }
  .lp-logos-row li[aria-hidden="true"] { display: flex; }
  .lp-logos-row img { height: calc(var(--h, 36px) * 0.7); max-width: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .lp-logos-row { animation: none; }
  .lp-logos-rail { overflow-x: auto; }
  .lp-logos-row li[aria-hidden="true"] { display: none; }
}
/* the smallest phones (iPhone SE size): a touch smaller, so the logos still make the first screen */
@media (max-width: 900px) and (max-height: 600px) {
  .lp-h1 { font-size: 30px; }
  .lp-intro { font-size: 14px; line-height: 1.5; margin-top: 12px; }
  .lp-ctas { margin-top: 18px; gap: 10px; }
  .lp-btn { min-height: 44px; }
  .lp-logos { margin-top: 20px; }
}