/* ============================================================
   Winjit US - Landing page components
   Brief: Landingpage.md · Inspiration: design-language.md section 6
   Tokens from css/styles.css. No new colours introduced.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   PAGE RHYTHM
   A little tighter than the 72px site default: the landing page
   runs long, and the sections read better closer together.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   SECTION TITLES
   Landing-page section h2s run larger than the sitewide h2 scale.
   ------------------------------------------------------------ */
main h2 { font-size: 56px; }
@media (max-width: 640px) { main h2 { font-size: 34px; } }

/* ------------------------------------------------------------
   SECTION 1 - HERO  (ref: Aeline hero, revolving card ring)
   ------------------------------------------------------------ */
.lp-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F3F8FF 0%, #F5FAFF 45%, var(--mint) 100%);
}
.lp-hero__bg { position: absolute; inset: -8% 0 0; z-index: 0; will-change: transform; pointer-events: none; }

/* aurora - three blurred brand-colour lights drifting slowly */
.lp-aurora {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
  will-change: transform;
}
.lp-aurora--blue {
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; left: -10vw; top: -14vw;
  background: radial-gradient(circle, rgba(31, 122, 224, .55), rgba(31, 122, 224, 0) 68%);
  animation: lp-aurora-a 22s ease-in-out infinite alternate;
}
.lp-aurora--green {
  width: 44vw; height: 44vw; max-width: 700px; max-height: 700px; right: -12vw; top: -6vw;
  background: radial-gradient(circle, rgba(0, 237, 135, .45), rgba(0, 237, 135, 0) 68%);
  animation: lp-aurora-c 24s ease-in-out infinite alternate;
}
@keyframes lp-aurora-a { to { transform: translate3d(9vw, 6vw, 0) scale(1.12); } }
@keyframes lp-aurora-c { to { transform: translate3d(-7vw, 8vw, 0) scale(1.1); } }

/* faint engineering grid, faded out toward the edges */
.lp-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(3, 78, 162, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 78, 162, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 75%);
}

/* soft horizon glow the card ring floats on */
.lp-hero__horizon {
  position: absolute; left: 50%; bottom: -8%; width: 120vw; height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(3, 78, 162, .16), rgba(0, 199, 160, .08) 45%, transparent 72%);
}
.lp-hero__inner {
  position: relative; z-index: 2; text-align: center;
  /* Wider than the 1120px site container: the hero headline is the
     largest type on the site and needs the extra room to hold its
     authored two-line break. */
  max-width: 1240px;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(40px, 5vw, 64px);
}
.lp-hero h1 {
  font-size: clamp(38px, 7.5vw, 74px); font-weight: 500; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--grey-900); margin: 0 auto;
  /* Line breaks are authored as .lp-line, so no ch cap here -
     a cap would re-wrap "software," onto a line of its own. */
  max-width: none;
}
/* per-line rise - each line is .lp-line > span */
.lp-line { display: block; overflow: hidden; }
/* Above the cluster breakpoint the authored break is guaranteed.
   Below it the line is allowed to wrap naturally. */
@media (min-width: 901px) { .lp-line > span { white-space: nowrap; } }
.lp-line > span { display: block; transform: translateY(105%); transition: transform 900ms var(--ease-out); }
.lp-hero.is-ready .lp-line > span { transform: none; }
.lp-hero.is-ready .lp-line:nth-child(2) > span { transition-delay: 150ms; }

.lp-hero__sub {
  margin: 24px auto 0; max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--grey-600);
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--ease-out) 450ms, transform 600ms var(--ease-out) 450ms;
}
.lp-hero__ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--ease-out) 560ms, transform 600ms var(--ease-out) 560ms;
}
.lp-hero.is-ready .lp-hero__sub,
.lp-hero.is-ready .lp-hero__ctas { opacity: 1; transform: none; }

/* revolving card ring - cards on the inside of a cylinder.
   js/landing.js sets the radius, perspective and each card's angle. */
.lp-ring-stage {
  --ring-card-w: clamp(158px, 15vw, 212px);
  position: relative; z-index: 2;
  height: clamp(230px, 20vw, 290px);
  margin: 0 0 clamp(36px, 4.5vw, 64px);
  perspective: 1400px; perspective-origin: 50% 40%;
  cursor: grab; touch-action: pan-y; user-select: none;
  opacity: 0; transform: translateY(40px);
  transition: opacity 900ms var(--ease-out) 650ms, transform 900ms var(--ease-out) 650ms;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.lp-ring-stage.is-dragging { cursor: grabbing; }
.lp-hero.is-ready .lp-ring-stage { opacity: 1; transform: none; }
.lp-ring {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d; will-change: transform;
}
.lp-ring__card {
  position: absolute; left: 0; top: 0;
  width: var(--ring-card-w);
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(3, 78, 162, .10);
  box-shadow: 0 18px 44px rgba(3, 40, 90, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* the default before JS positions it */
  transform: translate(-50%, -50%);
}
.lp-ring__icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-control);
  background: linear-gradient(135deg, var(--grad-soft-stops)); color: var(--primary);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.lp-ring__icon svg { width: 18px; height: 18px; }
.lp-ring__fig {
  font-family: var(--ff-display); font-size: clamp(28px, 2.7vw, 38px); font-weight: 700;
  line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.lp-ring__label { margin: 8px 0 0; font-size: 14px; line-height: 1.38; color: var(--grey-600); }

.lp-ring__card--grad {
  background: linear-gradient(150deg, var(--primary) 0%, #0A72C7 55%, #0A9C8E 100%);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 20px 48px rgba(3, 78, 162, .30), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lp-ring__card--grad .lp-ring__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.lp-ring__card--grad .lp-ring__fig { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.lp-ring__card--grad .lp-ring__label { color: #fff; }

@media (max-width: 560px) {
  .lp-hero__ctas .btn { width: 100%; justify-content: center; }
  .lp-ring-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
}

/* ------------------------------------------------------------
   SECTION 2 - CLIENT WALL  (ref: Aeline logo strip)
   Default: marquee. Grid variant ships when outcome lines exist.
   ------------------------------------------------------------ */
.lp-clients {
  padding: clamp(30px, 4vw, 46px) 0; background: #fff;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
    transparent 0%, transparent 30%,
    rgba(228, 228, 231, .9) 50%,
    transparent 70%, transparent 100%) 1;
}
.lp-marquee { position: relative; overflow: hidden; }
.lp-marquee::before, .lp-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
}
.lp-marquee::before { left: 0;  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.lp-marquee::after  { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.lp-marquee__track { display: flex; width: max-content; animation: lp-scroll 46s linear infinite; }
.lp-marquee:hover .lp-marquee__track { animation-play-state: paused; }
.lp-marquee__track > * {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(150px, 15vw, 200px); height: 56px; padding: 0 clamp(14px, 2vw, 28px);
}
.lp-marquee img {
  max-height: 34px; width: auto; object-fit: contain;
  filter: brightness(0); opacity: .82;
  transition: opacity 220ms ease;
}
.lp-marquee__track > *:hover img { opacity: 1; }
@keyframes lp-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes lp-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 191, 120, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(0, 191, 120, 0); } }

/* grid variant - swap markup when register item H2 is supplied */
.lp-logo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--strokes); border-left: 1px solid var(--strokes);
}
.lp-logo-grid > * {
  border-right: 1px solid var(--strokes); border-bottom: 1px solid var(--strokes);
  padding: 26px 22px; min-height: 168px; display: flex; flex-direction: column; gap: 16px;
}
.lp-logo-grid img { max-height: 30px; width: auto; filter: grayscale(1); opacity: .6; transition: filter 220ms ease, opacity 220ms ease; }
.lp-logo-grid > *:hover img { filter: none; opacity: 1; }
.lp-logo-grid p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--grey-600); }
@media (max-width: 900px) { .lp-logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------
   SECTION 3 - IMPACT  (ref: Aeline mixed-card grid)
   ------------------------------------------------------------ */
.lp-impact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px); margin-top: 48px;
}
.lp-cell {
  position: relative; overflow: hidden; border-radius: var(--radius-card);
  padding: clamp(22px, 2.4vw, 30px); min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.lp-cell:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); }
.lp-cell__fig {
  font-family: var(--ff-display); font-size: clamp(34px, 3.8vw, 52px); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px;
}
.lp-cell__label { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0; }
.lp-cell__ctx { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }

/* treatments */
.lp-cell--plain { background: #fff; border: 1px solid var(--strokes); }
.lp-cell--plain .lp-cell__fig { color: var(--primary); }
.lp-cell--plain .lp-cell__label { color: var(--grey-900); }
.lp-cell--plain .lp-cell__ctx { color: var(--grey-600); }

.lp-cell--accent { background: var(--soft-blue); border: 1px solid var(--blue-wash-border); }
.lp-cell--accent .lp-cell__fig { color: var(--primary); }
.lp-cell--accent .lp-cell__label { color: var(--grey-900); }
.lp-cell--accent .lp-cell__ctx { color: var(--grey-700); }

.lp-cell--invert { background: #000; }
.lp-cell--invert .lp-cell__fig { color: var(--green-display); }
.lp-cell--invert .lp-cell__label { color: #fff; }
.lp-cell--invert .lp-cell__ctx { color: var(--grey-400); }

.lp-cell--photo { border: 0; }
.lp-cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.lp-cell--photo::after {
  /* same overlay as the testimonial carousel's photo cards (.lp-quote::after) */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(2,30,66,.05) 0%, rgba(2,30,66,.55) 45%, rgba(2,24,54,.94) 80%);
}
.lp-cell--photo > *:not(img) { position: relative; z-index: 3; }
.lp-cell--photo .lp-cell__fig { color: #fff; }
.lp-cell--photo .lp-cell__label { color: #fff; }
.lp-cell--photo .lp-cell__ctx { color: rgba(255,255,255,.72); }

/* quote cell */
.lp-cell--quote { background: #fff; border: 1px solid var(--strokes); justify-content: space-between; }
.lp-cell--quote blockquote {
  margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--grey-800);
}
.lp-cite { display: flex; align-items: center; gap: 12px; }
.lp-cite img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.lp-cite span { font-size: 13px; line-height: 1.35; color: var(--grey-500); }

@media (max-width: 1000px) {
  .lp-impact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lp-impact-grid { grid-template-columns: 1fr; }
  .lp-cell { min-height: 200px; }
}

.lp-center-cta { text-align: center; margin-top: 44px; }

/* ------------------------------------------------------------
   SECTION 4 - THE FRAMEWORK  (original component, signature)
   ------------------------------------------------------------ */
.lp-fw {
  margin-top: 54px; border: 1px solid var(--strokes); border-radius: var(--radius-block);
  background: linear-gradient(180deg, #fff 0%, var(--grey-50) 100%);
  padding: clamp(22px, 3vw, 40px); overflow: hidden;
}
/* context inputs */
.lp-fw__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.lp-fw__input {
  border: 1px dashed var(--blue-hover-border); background: var(--soft-blue); border-radius: var(--radius-tile);
  padding: 16px 20px; text-align: center;
}
.lp-fw__input b { display: block; font-size: 15px; color: var(--primary); margin-bottom: 4px; }
.lp-fw__input span { font-size: 13px; color: var(--grey-600); }
.lp-fw__feed { display: block; height: 30px; width: 100%; }
.lp-fw__feed path {
  stroke: #7FB0E6; stroke-width: 1.5; fill: none; stroke-dasharray: 5 4;
  animation: lp-feed-flow 1.2s linear infinite;
}
@keyframes lp-feed-flow { to { stroke-dashoffset: -18; } }

/* rail + phases */
.lp-fw__body { display: grid; grid-template-columns: 62px 1fr; gap: clamp(12px, 1.6vw, 18px); }
.lp-fw__rail {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--primary) 0%, #0A72C7 60%, #0A9C8E 100%);
  border-radius: var(--radius-icon); color: #fff;
  display: grid; place-items: center; padding: 14px 0;
}
.lp-fw__rail span { position: relative; z-index: 1; }

/* phases and gates build in once the diagram enters view. Keyframes with
   backwards fill, so hover transitions are not delayed afterwards. */
.lp-fw:not(.in) .lp-phase, .lp-fw:not(.in) .lp-fw__gates li { opacity: 0; }
.lp-fw.in .lp-phase { animation: lp-phase-in 700ms var(--ease-out) backwards; }
.lp-fw.in .lp-phase:nth-child(1) { animation-delay: 150ms; }
.lp-fw.in .lp-phase:nth-child(2) { animation-delay: 300ms; }
.lp-fw.in .lp-phase:nth-child(3) { animation-delay: 450ms; }
.lp-fw.in .lp-fw__gates li { animation: lp-chip-in 450ms var(--ease-out) backwards; }
.lp-fw.in .lp-fw__gates li:nth-child(1) { animation-delay: 650ms; }
.lp-fw.in .lp-fw__gates li:nth-child(2) { animation-delay: 710ms; }
.lp-fw.in .lp-fw__gates li:nth-child(3) { animation-delay: 770ms; }
.lp-fw.in .lp-fw__gates li:nth-child(4) { animation-delay: 830ms; }
.lp-fw.in .lp-fw__gates li:nth-child(5) { animation-delay: 890ms; }
.lp-fw.in .lp-fw__gates li:nth-child(6) { animation-delay: 950ms; }
.lp-fw.in .lp-fw__gates li:nth-child(7) { animation-delay: 1010ms; }
.lp-fw.in .lp-fw__gates li:nth-child(8) { animation-delay: 1070ms; }
@keyframes lp-phase-in { from { opacity: 0; transform: translateX(-18px); } }
@keyframes lp-chip-in  { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.lp-fw__rail span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.lp-fw__phases { display: grid; gap: clamp(10px, 1.4vw, 14px); }
.lp-phase {
  border: 1px solid var(--strokes); background: #fff; border-radius: var(--radius-tile);
  padding: 18px 20px; display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
.lp-phase__name { margin: 0; font-size: 19px; font-weight: 700; color: var(--grey-900); }
.lp-phase__name small { display: block; font-weight: 400; font-size: 13px; color: var(--grey-500); margin-top: 3px; }
.lp-phase__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-tool {
  display: inline-flex; align-items: center; border: 1px solid var(--strokes); background: var(--grey-50);
  border-radius: var(--radius-pill); padding: 8px 15px; font-size: 14px; font-weight: 600; color: var(--grey-800);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.lp-tool:hover, .lp-tool:focus-visible { background: var(--primary); border-color: var(--primary); color: #fff; }
.lp-tool__desc {
  display: block; font-size: 13px; font-weight: 400; color: var(--grey-600);
  margin-top: 10px; min-height: 19px;
}
/* desktop hover: raise the band, dim the others */
@media (hover: hover) and (min-width: 861px) {
  .lp-fw__phases:hover .lp-phase { opacity: .45; }
  .lp-fw__phases .lp-phase:hover {
    opacity: 1; transform: translateY(-3px); border-color: var(--primary);
    box-shadow: 0 14px 34px rgba(3, 78, 162, .14);
  }
}
/* govern floor - never dims, because it is the argument.
   Deep brand gradient (navy → blue → teal) with a slow light sheen. */
.lp-fw__floor {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(12px, 1.6vw, 18px); border-radius: var(--radius-tile);
  background: linear-gradient(100deg, #022F63 0%, var(--primary) 42%, #0A6FB0 72%, #08786C 100%);
  box-shadow: 0 18px 40px rgba(3, 78, 162, .22);
  padding: 20px clamp(18px, 2.4vw, 28px);
  display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: center;
}
.lp-fw__floor h3 { margin: 0; color: var(--aurora-mint); font-size: 19px; font-weight: 700; }
.lp-fw__floor h3 small { display: block; font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, .78); margin-top: 3px; }
.lp-fw__gates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-fw__gates li {
  border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  padding: 7px 14px; font-size: 14px; color: #fff;
}
.lp-fw__gates li:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 860px) {
  .lp-fw__body { grid-template-columns: 1fr; }
  .lp-fw__rail { padding: 10px; }
  .lp-fw__rail span { writing-mode: horizontal-tb; transform: none; }
  .lp-phase { grid-template-columns: 1fr; gap: 12px; }
  .lp-fw__floor { grid-template-columns: 1fr; }
  .lp-fw__inputs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   SECTION 5 - HUMAN CONTROL AND GOVERNANCE
   Gate rail (original) opens the dark governance band.
   ------------------------------------------------------------ */
.lp-gates { position: relative; margin-top: 56px; }
.lp-gates__line {
  position: absolute; left: 0; right: 0; top: 13px; height: 2px;
  background: var(--grey-200); overflow: hidden;
}
.lp-gates__line::after {
  content: ""; position: absolute; inset: 0; background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--ease-out);
}
.lp-gates.in .lp-gates__line::after { transform: scaleX(1); }
.lp-gates__row { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.lp-gate { text-align: left; padding-right: 10px; }
.lp-gate__dot {
  width: 28px; height: 28px; border-radius: 50%; background: #fff;
  border: 2px solid var(--primary); display: grid; place-items: center;
  margin-bottom: 18px; opacity: 0; transform: scale(.6);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.lp-gate__dot svg { width: 14px; height: 14px; color: var(--primary); }
.lp-gates.in .lp-gate:nth-child(1) .lp-gate__dot { opacity: 1; transform: none; transition-delay: 120ms; }
.lp-gates.in .lp-gate:nth-child(2) .lp-gate__dot { opacity: 1; transform: none; transition-delay: 400ms; }
.lp-gates.in .lp-gate:nth-child(3) .lp-gate__dot { opacity: 1; transform: none; transition-delay: 680ms; }
.lp-gates.in .lp-gate:nth-child(4) .lp-gate__dot { opacity: 1; transform: none; transition-delay: 960ms; }
.lp-gates.in .lp-gate:nth-child(5) .lp-gate__dot { opacity: 1; transform: none; transition-delay: 1240ms; }
.lp-gate h3 { font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.lp-gate p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--grey-600); }
@media (max-width: 860px) {
  .lp-gates__row { grid-template-columns: 1fr; gap: 26px; padding-left: 46px; }
  .lp-gates__line { left: 13px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .lp-gates__line::after { transform: scaleY(0); transform-origin: top; }
  .lp-gates.in .lp-gates__line::after { transform: scaleY(1); }
  .lp-gate { position: relative; }
  .lp-gate__dot { position: absolute; left: -46px; top: 0; margin-bottom: 0; }
}

/* Governance band (ref: Fantom security band). Fade only.
   Also used by industry and story pages. */
.lp-gov {
  position: relative; isolation: isolate; overflow: hidden; color: var(--grey-400);
  background: var(--grad-midnight-black);
}
/* static light - a faint green glow behind the heading and a grid.
   No motion here, to keep the trust section calm. */
.lp-gov::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -260px;
  width: 1100px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 237, 135, .14) 0%, rgba(21, 119, 214, .10) 40%, transparent 70%);
  filter: blur(20px);
}
.lp-gov::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%);
}
.lp-gov h2 { color: #fff; }
.lp-gov .lp-deck { color: var(--grey-400); }
.lp-gov__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 26px); margin-top: 48px; }
.lp-gov__block {
  background: var(--midnight-card);
  border: 1px solid var(--midnight-card-border); border-radius: var(--radius-card); padding: 26px 24px;
  transition: opacity 500ms var(--ease-out), transform 300ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}
.lp-gov__block:hover { border-color: rgba(0, 237, 135, .55); box-shadow: var(--shadow-proof-glow); transform: translateY(-4px); }
.lp-gov__block svg {
  width: 46px; height: 46px; padding: 11px; border-radius: var(--radius-icon); margin-bottom: 18px;
  color: var(--secondary); background: rgba(0, 237, 135, .10); border: 1px solid rgba(0, 237, 135, .22);
}
.lp-gov__block h3, .lp-gov__block h4 { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 9px; }
.lp-gov__block p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--grey-400); }
@media (max-width: 1000px) { .lp-gov__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-gov__grid { grid-template-columns: 1fr; } }

/* landing: gates rail on the dark band, then three controls */
.lp-gov .lp-gates { margin-top: 48px; }
.lp-gov .lp-gates__line { background: var(--midnight-card-border); }
.lp-gov .lp-gate__dot { background: var(--midnight-card); border-color: var(--secondary); }
.lp-gov .lp-gate__dot svg { color: var(--secondary); }
.lp-gov .lp-gate h3 { color: #fff; }
.lp-gov .lp-gate p { color: var(--grey-400); }
.lp-controls {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 5vw, 64px);
  background: var(--midnight-card); border: 1px solid var(--midnight-card-border); border-radius: var(--radius-card);
}
.lp-control { padding: clamp(24px, 2.6vw, 32px); }
.lp-control + .lp-control { border-left: 1px solid var(--midnight-card-border); }
.lp-control svg { width: 22px; height: 22px; color: var(--secondary); margin-bottom: 14px; }
.lp-control h3 { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.lp-control p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--grey-400); }
.lp-gov .lp-certs { justify-content: flex-start; }
@media (max-width: 860px) {
  .lp-controls { grid-template-columns: 1fr; }
  .lp-control + .lp-control { border-left: 0; border-top: 1px solid var(--midnight-card-border); }
}

.lp-certs {
  margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--midnight-card-border);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.lp-certs span {
  border: 1px solid #3A3A40; border-radius: var(--radius-pill);
  background: var(--midnight-card);
  padding: 9px 20px; font-size: 14px; font-weight: 600; color: #fff;
}

/* ------------------------------------------------------------
   SECTION 6 - INDUSTRIES  (index rows, light)
   ------------------------------------------------------------ */
/* An index, not a card grid: one row per industry, columns for
   name, the work, and the platforms. The whole row is the link. */
.lp-ind-list { border-top: 1px solid var(--grey-200); }
.lp-ind-row {
  display: grid; align-items: start;
  grid-template-columns: 26px minmax(180px, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr) 24px;
  column-gap: clamp(16px, 2.4vw, 36px);
  padding: 28px 0; border-bottom: 1px solid var(--grey-200); color: inherit;
}
.lp-ind-row__icon { width: 26px; height: 26px; color: var(--primary); }
.lp-ind-row h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--grey-900); transition: color 200ms ease; }
.lp-ind-row__desc { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--grey-600); }
.lp-ind-row__plat { margin: 0; font-size: 14px; line-height: 1.55; color: var(--grey-500); }
.lp-ind-row__go { color: var(--primary); padding-top: 2px; }
.lp-ind-row__go svg { width: 20px; height: 20px; transition: transform 200ms var(--ease-out); }
.lp-ind-row:hover h3 { color: var(--primary); }
.lp-ind-row:hover .lp-ind-row__go svg { transform: translateX(4px); }
@media (max-width: 860px) {
  .lp-ind-row { grid-template-columns: 26px 1fr 20px; row-gap: 8px; padding: 24px 0; }
  .lp-ind-row__desc, .lp-ind-row__plat { grid-column: 2 / 3; }
  .lp-ind-row__go { grid-column: 3; grid-row: 1; }
}

/* ------------------------------------------------------------
   SECTION 7 - CLIENT VOICE
   ------------------------------------------------------------ */
.lp-voice {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: clamp(72px, 9vw, 116px) 0 clamp(60px, 7vw, 92px);
  background: var(--grad-midnight-black);
}
.lp-voice__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lp-voice__orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.lp-voice__orb--a {
  width: 520px; height: 520px; right: -120px; top: -160px;
  background: radial-gradient(circle, rgba(0, 237, 135, .38), transparent 68%);
  animation: lp-aurora-c 20s ease-in-out infinite alternate;
}
.lp-voice__orb--b {
  width: 600px; height: 600px; left: -200px; bottom: -280px;
  background: radial-gradient(circle, rgba(56, 170, 255, .40), transparent 68%);
  animation: lp-aurora-a 24s ease-in-out infinite alternate;
}
.lp-voice__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 10%, transparent 70%);
}
/* Landing page only: the client-voice band's world-map texture, replacing
   the plain grid on this one page. Other pages keep .lp-voice__grid. */
.lp-voice__map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; transform: scale(1.28);
  mix-blend-mode: screen; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 95% 85% at 50% 30%, #000 30%, transparent 78%);
}
.lp-voice__head { text-align: center; }
.lp-voice h2 { color: #fff; max-width: 20ch; margin: 0 auto; }
.lp-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 1.6vw, 22px); margin-top: clamp(40px, 5vw, 56px);
}
.lp-quote {
  position: relative; margin: 0; flex: 1 1 300px; max-width: 350px;
  border-radius: var(--radius-card);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 26px 24px;
  background: var(--dark-card); border: 1px solid var(--dark-card-border);
  transition: transform 300ms var(--ease-out), border-color 300ms ease;
}
.lp-quote:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .3); }
.lp-quote__logo {
  width: 60px; height: 60px; flex: 0 0 auto; border-radius: 50%;
  background: #fff; display: grid; place-items: center; overflow: hidden;
}
.lp-quote__logo img { width: 78%; height: 62%; object-fit: contain; }
.lp-quote__logo--crop img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.lp-quote blockquote {
  margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-quote { cursor: pointer; }
.lp-quote:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  .lp-quote { flex: 1 1 100%; max-width: 420px; }
}

/* Full-quote popup, opened by clicking a testimonial card */
.lp-modal {
  position: fixed; inset: 0; z-index: 1000; padding: 20px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .6);
}
.lp-modal[hidden] { display: none; }
.lp-modal__card {
  position: relative; width: min(100%, 520px); max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px; padding: 32px 30px;
  border-radius: var(--radius-card);
  background: var(--dark-card); border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .92);
}
.lp-modal__text { margin: 0; font-size: 17px; line-height: 1.6; }
.lp-modal__close {
  position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; padding: 4px;
  background: none; border: 0; color: #fff; cursor: pointer;
}
.lp-modal__close svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------
   SECTION 8 - STARTUP STUDIO  (split, original)
   ------------------------------------------------------------ */
.lp-studio { background: var(--grad-intro); }
.lp-studio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.lp-studio__text h2 { max-width: 16ch; margin-bottom: 18px; }
.lp-studio__text > p { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: var(--grey-800); max-width: 52ch; }
.lp-points { list-style: none; margin: 26px 0 30px; padding: 0; }
.lp-points li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid rgba(9,9,11,.10);
  font-size: 15.5px; color: var(--grey-800);
}
.lp-points li:last-child { border-bottom: 1px solid rgba(9,9,11,.10); }
.lp-points svg { width: 18px; height: 18px; color: var(--primary); flex: 0 0 auto; margin-top: 3px; }
.lp-studio__media img { width: 100%; border-radius: var(--radius-block); aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) {
  .lp-studio__grid { grid-template-columns: 1fr; }
  .lp-studio__media { order: -1; }
}

/* ------------------------------------------------------------
   SECTION 9 - SUCCESS STORIES
   ------------------------------------------------------------ */
.lp-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); margin-top: 48px; }
.lp-story {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--strokes); border-radius: var(--radius-card); overflow: hidden;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.lp-story:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); }
.lp-story__media { overflow: hidden; aspect-ratio: 16 / 10; }
.lp-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.lp-story:hover .lp-story__media img { transform: scale(1.04); }
.lp-story__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.lp-story__tag {
  font-family: var(--ff-base); font-size: 32px; font-weight: 700; letter-spacing: normal; text-transform: none;
  color: var(--grey-900); margin-bottom: 10px;
}
@media (max-width: 640px) {
  .lp-story__tag { font-size: 20px; }
}
.lp-story__client { font-size: 14px; color: var(--grey-500); margin-bottom: 10px; }
.lp-story h3 { font-size: 19px; font-weight: 600; line-height: 1.35; margin-bottom: 20px; }
.lp-story .textlink { margin-top: auto; }
@media (max-width: 900px) { .lp-stories { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   SECTION 10 - FAQ  (ref: Fantom accordion)
   ------------------------------------------------------------ */
.lp-faq { max-width: 820px; margin: 48px auto 0; }
/* landing: heading beside the questions */
.lp-faq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp-faq-split__head h2 { margin: 0; max-width: 16ch; font-size: clamp(30px, 3.6vw, 46px); }
.lp-faq-split .lp-faq { margin: 0; max-width: none; }
@media (min-width: 861px) { .lp-faq-split__head { position: sticky; top: calc(var(--header-h, 83px) + 32px); } }
@media (max-width: 860px) { .lp-faq-split { grid-template-columns: 1fr; gap: 28px; } }
.lp-faq__item { border-top: 1px solid var(--grey-200); }
.lp-faq__item:last-child { border-bottom: 1px solid var(--grey-200); }
.lp-faq__q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24px 0; font-family: var(--ff-base); font-size: clamp(16.5px, 1.5vw, 19px);
  font-weight: 600; color: var(--grey-900); line-height: 1.4;
}
.lp-faq__q:hover { color: var(--primary); }
.lp-faq__sign { position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; }
.lp-faq__sign::before, .lp-faq__sign::after {
  content: ""; position: absolute; background: var(--primary); border-radius: 1px;
  transition: transform 250ms var(--ease-out), opacity 250ms ease;
}
.lp-faq__sign::before { left: 0; top: 9px; width: 20px; height: 2px; }
.lp-faq__sign::after  { top: 0; left: 9px; width: 2px; height: 20px; }
.lp-faq__item.is-open .lp-faq__sign::after { transform: scaleY(0); opacity: 0; }
.lp-faq__a {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows 250ms var(--ease-out);
}
.lp-faq__a > * { min-height: 0; visibility: hidden; transition: visibility 0s linear 250ms; }
.lp-faq__item.is-open .lp-faq__a { grid-template-rows: 1fr; }
.lp-faq__item.is-open .lp-faq__a > * { visibility: visible; transition-delay: 0s; }
.lp-faq__a p {
  margin: 0; padding: 0 60px 26px 0;
  font-size: 16px; line-height: 1.65; color: var(--grey-600);
}

/* ------------------------------------------------------------
   SECTION 11 - CLOSING CTA  (ref: Aeline full-bleed band)
   ------------------------------------------------------------ */
.lp-close { position: relative; overflow: hidden; background: var(--midnight-navy); text-align: center; }
.lp-close__bg { position: absolute; inset: -10% 0 0; z-index: 0; will-change: transform; }
.lp-close__bg img { width: 100%; height: 120%; object-fit: cover; opacity: .38; }
.lp-close__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,30,66,.72) 0%, rgba(2,30,66,.88) 100%);
}
.lp-close__inner { position: relative; z-index: 2; padding: clamp(84px, 11vw, 150px) var(--gutter); }
.lp-close h2 {
  /* Second-largest type on the page, after the hero. */
  color: #fff; font-size: clamp(34px, 4.4vw, 62px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.08; max-width: 16ch; margin: 0 auto 20px;
  transform: scale(.965); transition: transform 900ms var(--ease-out);
}
.lp-close.in h2 { transform: none; }
.lp-close p { color: rgba(255,255,255,.78); font-size: clamp(16px, 1.4vw, 19px); margin-bottom: 34px; }
.lp-close .btn--primary { background: #fff; color: var(--primary); }
.lp-close .btn--primary:hover { background: var(--secondary); color: var(--grey-900); }
@media (max-width: 560px) { .lp-close .btn { width: 100%; justify-content: center; } }

/* this closing band uses a light gradient asset instead of a dark
   photo, so its text and button invert to dark-on-light. */
.lp-close--light { background: linear-gradient(180deg, var(--grad-soft-stops)); }
.lp-close--light .lp-close__bg img { opacity: 1; }
.lp-close--light .lp-close__bg::after { content: none; }
.lp-close--light h2 { color: var(--grey-900); }
.lp-close--light p { color: var(--grey-600); }
.lp-close--light .btn--primary { background: transparent; color: var(--grey-900); border-color: var(--grey-900); }
.lp-close--light .btn--primary:hover { background: var(--grey-900); color: #fff; }

/* Home landing page (us/index.html) only: the closing CTA and the
   footer below it share a single background gradient instead of two
   separate ones, so the band reads as one continuous surface. */
.page-landing .lp-close--light { background: transparent; }
.page-landing .lp-close--light .lp-close__bg { display: none; }
.page-landing .lp-close--light p { color: rgba(24, 24, 27, .82); }
.page-landing .footer-wrap--lp {
  background: linear-gradient(180deg,
    rgba(0, 237, 135, 0) 0%,
    rgba(0, 237, 135, .2) 18%,
    #034EA2 72%,
    #000C1A 100%);
}
/* Tighten the gap between the CTA button and the footer logo below it
   (was reading as a big empty band vs. the reference), closer to the
   winjit.com proportions. */
.page-landing .lp-close__inner { padding-bottom: clamp(58px, 7.5vw, 105px); }
.page-landing .site-footer { padding-top: 28px; }

/* ------------------------------------------------------------
   Shared landing bits
   ------------------------------------------------------------ */
.lp-deck { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--grey-600); max-width: 58ch; margin: 0; }
.section-head .lp-deck { margin-top: 14px; }

/* Left-aligned section head: heading left, deck (and any link)
   bottom-aligned on the right. Stacks below 860px. */
.lp-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 4vw, 52px);
}
.lp-head h2 { margin: 0; max-width: 18ch; }
.lp-head .lp-deck { max-width: 44ch; }
.lp-head__link { margin-top: 14px; }
@media (max-width: 860px) { .lp-head { grid-template-columns: 1fr; } }
.lp-head + .lp-impact-grid, .lp-head + .lp-stories, .lp-gov .lp-head + .lp-gates { margin-top: 0; }
.lp-gov .lp-head + .lp-gates { padding-top: 8px; }
.text-center .lp-deck { margin-left: auto; margin-right: auto; }

/* Highlighted words. Static gradient (tokens in styles.css). It was animated;
   a highlight that keeps moving while the reader is on the sentence is noise, not emphasis. */
.grad-text {
  background-image: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* keep descenders inside the painted area */
  padding-bottom: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.grad-text--light {
  background-image: var(--grad-light);
}

/* Other highlight styles, so headings don't all read the same way.
   Band and underline draw in when their .reveal parent enters view. */
.hl-marker, .hl-underline {
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 900ms var(--ease-out) 350ms;
}
/* highlighter band behind the lower half of the words */
.hl-marker {
  background-image: linear-gradient(90deg, rgba(0, 237, 135, .34), rgba(21, 119, 214, .20));
  background-size: 0% 36%; background-position: 0 86%;
  padding: 0 .06em; margin: 0 -.06em;
}
.hl-marker--dark { background-image: linear-gradient(90deg, rgba(0, 237, 135, .38), rgba(0, 237, 135, .14)); }
/* brand-gradient line drawn under the words */
.hl-underline {
  background-image: var(--grad-brand);
  background-size: 0% .09em; background-position: 0 96%;
  padding-bottom: .04em;
}
.reveal.in .hl-marker   { background-size: 100% 36%; }
.reveal.in .hl-underline { background-size: 100% .09em; }
/* plain accent colour */
.hl-solid { color: var(--primary); }
.hl-solid--mint { color: var(--aurora-mint); }

/* primary CTA - gradient fill with a light sweep on hover */
.btn--grad, .btn--grad:hover {
  background-color: var(--primary);
  background-image: linear-gradient(100deg, var(--grad-cta-stops));
  background-size: 160% 100%;
}
.btn--grad {
  position: relative; overflow: hidden; isolation: isolate;
  background-position: 0% 50%;
  box-shadow: 0 10px 26px rgba(3, 78, 162, .28);
  transition: background-position 400ms var(--ease-out), box-shadow 200ms ease, transform 200ms var(--ease-out);
}
.btn--grad:hover { background-position: 100% 50%; box-shadow: 0 14px 32px rgba(3, 110, 160, .34); transform: translateY(-2px); }
main .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
main .btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
}
main .btn--primary:hover::after { transform: translateX(120%); transition: transform 700ms var(--ease-out); }
.btn svg { transition: transform 200ms var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }


/* ------------------------------------------------------------
   Reduced motion - everything above resolves to its final state
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .lp-line > span,
  .lp-hero__sub, .lp-hero__ctas, .lp-ring-stage { transform: none !important; opacity: 1 !important; transition: none !important; }
  .hl-marker, .hl-underline { transition: none !important; }
  .lp-aurora, .lp-voice__orb, .lp-fw__feed path,
  .lp-fw.in .lp-phase, .lp-fw.in .lp-fw__gates li { animation: none !important; }
  .lp-fw .lp-phase, .lp-fw .lp-fw__gates li { opacity: 1 !important; }
  .lp-marquee__track { animation: none !important; }
  .lp-faq__a, .lp-faq__a > * { transition: none !important; }
  .lp-gates__line::after { transform: scaleX(1) !important; transition: none !important; }
  .lp-gate__dot { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-close h2 { transform: none !important; transition: none !important; }
  .lp-hero__bg, .lp-close__bg { transform: none !important; }
}

.footer-wrap--lp { background: linear-gradient(180deg, #034EA2 0%, #000C1A 100%); }

/* Highlights in a hero are painted immediately: the hero is not a
   scroll reveal, so there is no .reveal.in ancestor to draw them. */
.in-hero .hl-marker { background-size: 100% 36%; }
.in-hero .hl-underline { background-size: 100% .09em; }