/* Landing page (index.html) only.

   Loaded after site.css and scoped to `.lp`, so no other public page changes.
   The look follows the app icon and the 2026-10 layout comp (新lp参考): flat
   colour shapes, one big blue arch holding the sections that explain Feed,
   speech bubbles cut from one shape (assets/lp-bubble.png, used as a mask so
   the same drawing is white, yellow or blue and can point its tail anywhere),
   and one black outline, 3px, on every card, bubble and control (the two big
   background arches have none).

   Text never sits on the bright hero blue. On the arch's blue (#4c96f2) only
   large type is white (3.0:1 passes for large text); small type inside the
   bubbles is the dark ink, which is 6.2:1 on that blue and 15:1+ on the white
   and yellow bubbles.

   The yellows are the icon's artwork colour, never a UI accent, so they are
   written here rather than in site.css, which tool/design-token-audit.mjs
   holds to the token canon.

   Motion: only CSS. Time-based motion (hero, the bubbles' drift) works
   everywhere; the reveals on scroll use scroll-driven animations where the
   browser has them and are simply absent where it does not. Everything sits
   under prefers-reduced-motion: no-preference. */

.lp {
  --lp-line: #000;
  --lp-paper: #fff;
  --lp-wash: #e9f1f9;
  --lp-yellow: #eee954;
  --lp-bubble-yellow: #e6eb27;
  --lp-bubble-white: #fcfbfa;
  --lp-sky: #4c96f2;
  --lp-sky-deep: #3a7fd9;
  --lp-blue: #4c96f2;
  --lp-ink: #0f1415;
  --lp-sticker: #0f1415;
  --lp-on-sticker: #fff;
  --lp-dots: #a6cbf8;
  --lp-radius: 1.75rem;
  --lp-stroke: 3px;
}
@media (prefers-color-scheme: dark) {
  .lp {
    --lp-paper: #131a22;
    --lp-wash: #0f1822;
    --lp-sticker: #dee3e5;
    --lp-on-sticker: #0b0f15;
    --lp-dots: #1f3b57;
  }
}

/* ---- tracking: wider than the app's, on every piece of text ---- */
body.lp { letter-spacing: 0.06em; }
.lp .lp-hero__title { letter-spacing: 0.03em; }
.lp .lp-hero__sub { letter-spacing: 0.04em; }
.lp .lp-hero__kicker { letter-spacing: 0.1em; }
.lp .lp-note,
.lp .lp-note-links,
.lp .lp-unofficial { letter-spacing: 0.08em; }
.lp .lp-have { letter-spacing: 0.06em; }
.lp .pill { letter-spacing: 0.08em; }
.lp .lp-section h2 { letter-spacing: 0.04em; }
.lp .lp-section h3,
.lp .rows .rows__title,
.lp .rows strong { letter-spacing: 0.05em; }
.lp .specimen__row { letter-spacing: 0.04em; }
.lp .specimen__label { letter-spacing: 0.08em; }
.lp .tel { letter-spacing: 0.02em; }
.lp .site-footer__links { letter-spacing: 0.08em; }

/* ---- buttons: a sticker with a hard edge, pressed flat when tapped ---- */
.lp .pill {
  border: var(--lp-stroke) solid #000;
  box-shadow: 0 4px 0 #000;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lp .pill:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }
.lp .pill--outline {
  background: #fff;
  color: #055eaa;
}
.lp .pill--outline:hover { background: #f2f4f5; }
.lp .pill--outline:active { background: #ebeeef; }
@media (hover: hover) {
  .lp .pill:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #000; }
  .lp .pill:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }
}

/* ---- hero ---- */
.lp-hero {
  grid-template-areas: "mark" "art" "panel";
  gap: 0.5rem 0;
  overflow: clip;
}
.lp-hero__mark { grid-area: mark; padding-block: 0.5rem 0; }
.lp-hero__mark .wordmark { height: 3rem; }
.lp-hero__panel { grid-area: panel; }
.lp-hero__art {
  grid-area: art;
  position: relative;
  width: min(72%, 17rem);
  aspect-ratio: 1;
  margin: 0.5rem auto 0;
}
.lp-hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lp-blue);
}
/* The dotted patch from the share image, behind the circle's upper right. */
.lp-hero__art::after {
  content: "";
  position: absolute;
  top: -6%;
  right: -14%;
  width: 34%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--lp-dots) 22%, transparent 24%) 0 0 / 16.66% 16.66%;
  z-index: -1;
}
/* The app icon's own drawing (assets/branding/feed_mascot_bubbles.svg). */
.lp-hero__mascot {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
}

/* The label is the share image's black tab. */
.lp-hero__kicker {
  display: block;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.3em 1em;
  border-radius: 9999px;
  background: var(--lp-sticker);
  color: var(--lp-on-sticker);
  font-size: 1rem;
  font-weight: 800;
}
/* Wider tracking needs a wider allowance per character than site.css's 9.4. */
.lp-hero__title { --chars: 10.2; font-weight: 900; margin-top: 1rem; }
.lp-hero__sub { font-weight: 800; }
/* The comp sets the title in three lines, one per phrase, at every width. */
.lp-hero__title .phrase { display: block; }
.lp-hero__title wbr { display: none; }
/* The comp has no "Feedについて" link under the hero: the arch is the cue. */
.lp-more { display: none; }

@media (min-width: 62.5em) {
  .lp-hero {
    grid-template-columns: minmax(0, 1fr) 42.2vw;
    grid-template-areas: "mark art" "panel art";
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: 0;
    padding: 1.5rem 4vw 2rem;
  }
  .lp-hero__mark {
    display: block;
    align-self: start;
    padding: 0;
  }
  .lp-hero__mark .wordmark { width: auto; height: 3.5rem; }
  .lp-hero__panel { padding: 0; margin-left: 7.8vw; max-width: 42rem; align-self: center; }
  .lp-hero__title {
    margin-top: 0;
    font-size: clamp(1.5rem, 3.4vw, 5rem);
  }
  .lp-hero__sub { font-size: clamp(1.125rem, 1.35vw, 2rem); }
  .lp-hero__art {
    width: 100%;
    margin: 0;
    align-self: center;
  }
}

/* ---- the blue arch ---- */
/* Sized in vw because the comp is: a half-ellipse as wide as the page and
   0.354 of its width tall. The sections inside follow its spacing. */
.lp-blue {
  position: relative;
  margin-top: 4.9vw;
  padding: 23.4vw 0 40vw;
  background: var(--lp-sky);
  border-radius: 50% 50% 0 0 / 35.4vw 35.4vw 0 0;
  overflow: clip;
}
.lp .lp-section { border-top: 0; }
.lp .lp-inner { padding-block: 0; }

.lp .lp-section h2 {
  max-width: none;
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 2vw, 3rem);
  font-weight: 800;
  line-height: 1.35;
}
.lp .lp-section p,
.lp .lp-section .lede { max-width: 40em; }

/* A dotted rule under every section heading: round dots, spaced so a whole
   number of them fills the heading's width. It takes the heading's colour. */
.lp .lp-section h2 {
  width: fit-content;
  max-width: 100%;
}
.lp .lp-section h2::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: 0.6em;
  background: radial-gradient(circle at center, currentColor 0 2.4px, transparent 3px) 0 50% / 12px 6px;
  background-repeat: round no-repeat;
}

/* #about: a white pill on the arch. */
.lp #about .lp-inner {
  width: 78.9vw;
  margin: 0 auto;
  padding: 5.8vw 13vw;
  border: var(--lp-stroke) solid #000;
  border-radius: 9999px;
  background: var(--lp-paper);
}
.lp #about .lp-inner > p:not(.muted) { font-size: 1rem; }
.lp #about .lp-inner > p:nth-of-type(2) {
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem 0 1.75rem;
  padding: 0.9rem 1.6rem;
  border: var(--lp-stroke) solid #000;
  border-radius: 2rem;
  background: var(--lp-yellow);
  color: var(--lp-ink);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.7;
}

/* #features: the heading is plain white, then the field of bubbles.
   Twice the space the comp gives it, before and after. */
.lp #features { padding-top: 2vw; }
.lp #features h2 {
  margin: 0 auto;
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ---- bubbles ----
   Each is placed from the comp's centre and diameter (--x, --y, --d in vw of
   the page width). The element is a hair larger than the body (1.033) so the
   tail fits inside the box, and the shape turns inside it (--r) while the
   words stay upright. */
.lp-bubbles {
  position: relative;
  height: 46.9vw;
  margin-top: 1vw;
}
.lp-bubbles__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-bubble {
  --c: var(--lp-bubble-white);
  --cap: var(--lp-yellow);
  position: absolute;
  left: calc((var(--x) - var(--d) * 0.5165) * 1vw);
  top: calc((var(--y) - var(--d) * 0.5165) * 1vw);
  width: calc(var(--d) * 1.033vw);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  list-style: none;
  color: var(--lp-ink);
}
.lp-bubble--yellow { --c: var(--lp-bubble-yellow); --cap: #fff; }
.lp-bubble--blue { --c: var(--lp-sky); }
/* The outline: four hard shadows 3px out, taken from the shape's own edge, so
   it follows the tail too. It lives on this box, which does not turn, so the
   offsets stay square to the page; the drawing turns inside it. */
.lp-bubble__shape {
  position: absolute;
  inset: 0;
  filter: drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000);
}
.lp-bubble__shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  -webkit-mask: url("/assets/lp-bubble.png") center / 100% 100% no-repeat;
  mask: url("/assets/lp-bubble.png") center / 100% 100% no-repeat;
  transform: rotate(var(--r, 0deg));
}
.lp-bubble__text {
  position: relative;
  z-index: 1;
  width: 80%;
}
/* The heading of a feature: a capsule in the other colour, led by the blue
   round pictogram. */
.lp .lp-bubble h3.lp-bubble__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  max-width: 100%;
  margin: 0 0 0.7em;
  padding: 0.28em 1em 0.28em 0.28em;
  border: var(--lp-stroke) solid #000;
  border-radius: 9999px;
  background: var(--cap);
  color: var(--lp-ink);
  font-size: clamp(0.72rem, 1.1vw, 1.3rem);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.lp-bubble__mark {
  flex: none;
  box-sizing: border-box;
  width: 2.2em;
  height: 2.2em;
  padding: 0.45em;
  border: var(--lp-stroke) solid #000;
  border-radius: 50%;
  background: var(--lp-sky);
  color: #fff;
}
.lp .lp-bubble h3 {
  margin: 0 0 0.35em;
  color: var(--lp-ink);
  font-size: clamp(0.875rem, 1.25vw, 1.5rem);
  font-weight: 800;
  line-height: 1.4;
}
.lp .lp-bubble p {
  max-width: none;
  margin: 0;
  color: #2b3033;
  font-size: clamp(0.72rem, 0.92vw, 1.0625rem);
  line-height: 1.7;
}

/* Below 1440px the field becomes a column: the bubbles would be too small for
   their words, and the specimen would run into them. */
@media (max-width: 89.99em) {
  .lp-blue { padding-bottom: 46vw; }
  .lp-bubbles {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .lp-bubbles > span { display: none; }
  .lp-bubble,
  .lp-bubble--blue {
    position: relative;
    left: auto;
    top: auto;
    width: min(80vw, 24rem);
  }
  .lp-bubbles__list > .lp-bubble:nth-child(odd) { align-self: flex-start; margin-left: 4vw; }
  .lp-bubbles__list > .lp-bubble:nth-child(even) { align-self: flex-end; margin-right: 4vw; }
  .lp-bubble__text { width: 76%; }
  .lp .lp-bubble h3.lp-bubble__title { font-size: 1rem; }
  .lp .lp-bubble h3 { font-size: 1.0625rem; }
  .lp .lp-bubble p { font-size: 0.875rem; }
}
@media (max-width: 47.99em) {
  .lp #features { padding-top: 20vw; }
  .lp #about .lp-inner {
    width: calc(100% - 32px);
    padding: 2rem 1.5rem;
    border-radius: 2.5rem;
  }
}


/* ---- the stage: heading and the specimen on the left, the field of bubbles
   filling the rest (positions from the 2026-10 comp, 898 units wide) ---- */
.lp-stage {
  display: flex;
  flex-direction: column;
  padding-top: 14vw;
}
.lp-stage__head { order: 1; margin: 0 auto; }
.lp-bubbles { order: 2; }
.lp-stage__specimen { order: 3; }
@media (min-width: 90em) {
  .lp-stage {
    position: relative;
    display: block;
    height: 61vw;
    padding-top: 0;
  }
  .lp-stage__head {
    position: absolute;
    left: 12vw;
    top: 15.6vw;
    width: auto;
    margin: 0;
  }
  .lp #features h2 { margin: 0; text-align: left; }
  .lp-stage__specimen {
    position: absolute;
    left: 7.3vw;
    top: 19.7vw;
    width: 39.8vw;
  }
  .lp-stage .specimen { max-width: none; margin: 0; }
  .lp-stage .lp-bubbles {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
  }
}
@media (max-width: 89.99em) {
  .lp-stage__specimen { padding-inline: 16px; }
}

/* ---- specimen: a real timeline row, in the same outlined card ---- */
.lp .specimen {
  max-width: min(47.6vw, 40rem);
  margin: 4vw auto 0;
  border: var(--lp-stroke) solid #000;
  border-radius: var(--lp-radius) var(--lp-radius) var(--lp-radius) 0.5rem;
  background: var(--lp-paper);
}
.lp .specimen__label {
  border-bottom: var(--lp-stroke) solid #000;
  background: var(--lp-yellow);
  color: var(--lp-ink);
  font-weight: 800;
}
@media (max-width: 89.99em) {
  .lp .specimen { max-width: none; margin-top: 2rem; }
}

/* ---- #trust: the cards sit straight on the arch ---- */
.lp #trust .lp-inner {
  width: 78.9vw;
  margin: 14.7vw auto 0;
  padding: 0;
}
.lp #trust h2 { color: #fff; }
@media (max-width: 47.99em) {
  .lp #trust .lp-inner { width: calc(100% - 32px); margin-top: 3rem; }
}
.lp .rows {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.lp .rows > li,
.lp .rows > li:last-child {
  position: relative;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: start;
  column-gap: 1rem;
  padding: 1.25rem;
  border: var(--lp-stroke) solid #000;
  border-radius: var(--lp-radius) var(--lp-radius) var(--lp-radius) 0.5rem;
  background: var(--lp-paper);
}
.lp .rows > li:nth-child(even) {
  border-radius: var(--lp-radius) var(--lp-radius) 0.5rem var(--lp-radius);
}
.lp .rows__mark {
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0.5rem;
  border: var(--lp-stroke) solid #000;
  border-radius: 50%;
  background: var(--lp-sky);
  color: #fff;
}
.lp .rows strong,
.lp .rows .rows__title { color: var(--s-ink); font-weight: 800; }
@media (min-width: 48em) {
  .lp .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .lp .rows > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* On the arch's blue, small text is the ink, not the grey. */
.lp .lp-help {
  max-width: 40em;
  margin: 1.5rem 0 0;
  color: var(--lp-ink);
  font-size: 0.9375rem;
}
.lp .lp-help a { color: var(--lp-ink); }

/* ---- #steps: a white arch laid over the bottom of the blue, three blue bubbles ---- */
.lp #steps {
  position: relative;
  margin-top: -30.6vw;
  padding-top: 19.6vw;
  background: var(--s-canvas);
  border-radius: 50% 50% 0 0 / 30.6vw 30.6vw 0 0;
}
.lp #steps .lp-inner { width: 100%; }
.lp #steps h2 {
  margin: 0 auto;
  font-weight: 900;
  text-align: center;
}
.lp .steps {
  display: flex;
  justify-content: center;
  gap: 2.1vw;
  margin: 6vw 0 0;
  padding: 0;
  counter-reset: step;
}
.lp .steps > li,
.lp .steps > li:last-child {
  --r: 31deg;
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  grid-template-columns: none;
  padding-top: 7.5vw;
  width: calc(20.2vw * 1.033);
  aspect-ratio: 1;
  margin: 0;
  border: 0;
  text-align: center;
  counter-increment: step;
}
.lp .steps > li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 0.4em;
}
.lp .steps > li h3 { color: #fff; font-size: clamp(1.2rem, 1.25vw, 1.5rem); }
@media (max-width: 62.49em) {
  .lp #steps { margin-top: -30.6vw; padding-top: 20vw; }
  .lp .steps {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .lp .steps > li,
  .lp .steps > li:last-child { width: min(80vw, 20rem); padding-top: min(24vw, 6rem); }
  .lp .steps > li h3 { font-size: 1.125rem; }
}

/* ---- FAQ: each question a pill that opens into a bubble ---- */
.lp #faq .lp-inner {
  width: min(100% - 32px, max(51vw, 36rem));
  padding-block: 12vw 0;
}
.lp .faq,
.lp .faq:last-of-type {
  margin-bottom: 0.75rem;
  padding: 0 1.25rem;
  border: var(--lp-stroke) solid #000;
  border-radius: 1.25rem;
  background: var(--lp-paper);
}
.lp .faq[open] { background: var(--lp-wash); }
.lp .faq summary { color: var(--s-ink); font-weight: 800; }
.lp .faq__body { padding-bottom: 1.25rem; }
.lp .lp-faq-more { margin-top: 1.5rem; }

/* ---- closing panel: the yellow bubble, with its blue edge ---- */
.lp .lp-cta .lp-inner {
  position: relative;
  width: min(100% - 32px, max(44vw, 34rem));
  margin-block: 12vw 6rem;
  padding: 2.5rem 1.5rem;
  border: var(--lp-stroke) solid #000;
  border-radius: 2.5rem 2.5rem 2.5rem 0.75rem;
  background: var(--lp-yellow);
  box-shadow: 8px 8px 0 var(--lp-sky-deep);
}
.lp .lp-cta .lp-inner,
.lp .lp-cta h2,
.lp .lp-cta p,
.lp .lp-cta .lp-prelaunch { color: var(--lp-ink); }
@media (min-width: 48em) {
  .lp .lp-cta .lp-inner { padding: 3rem 3rem; }
}

/* =====================================================================
   Motion
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes lp-pop { from { transform: scale(0.4); opacity: 0; } }
  @keyframes lp-circle { from { transform: scale(0.6); opacity: 0; } }
  @keyframes lp-rise-in { from { opacity: 0; translate: 0 1.2rem; } }
  @keyframes lp-hero-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.2%; } }
  @keyframes lp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.7vw; } }
  @keyframes lp-open { from { opacity: 0; translate: 0 -0.4rem; } }

  /* hero: the circle opens, the drawing pops and then drifts, the words rise
     in order. */
  .lp-hero__art::before { animation: lp-circle 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards; }
  .lp-hero__mascot {
    animation: lp-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s backwards,
               lp-hero-bob 5.5s ease-in-out 1s infinite;
  }
  .lp-hero__mark,
  .lp-hero__kicker,
  .lp-hero__title .phrase,
  .lp-hero__sub,
  .lp-actions > * { animation: lp-rise-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .lp-hero__kicker { animation-delay: 0.1s; }
  .lp-hero__title .phrase:nth-of-type(2) { animation-delay: 0.18s; }
  .lp-hero__title .phrase:nth-of-type(3) { animation-delay: 0.28s; }
  .lp-hero__title .phrase:nth-of-type(4) { animation-delay: 0.38s; }
  .lp-hero__sub { animation-delay: 0.5s; }
  .lp-actions > * { animation-delay: 0.62s; }

  /* The bubbles drift on their own clocks. */
  .lp-bubbles .lp-bubble { animation: lp-bob 7s ease-in-out infinite; }
  .lp-bubbles > :nth-child(3n+1) { animation-duration: 6.2s; animation-delay: -1.5s; }
  .lp-bubbles > :nth-child(3n+2) { animation-duration: 8.1s; animation-delay: -4s; }
  .lp-bubbles__list > :nth-child(2n) { animation-duration: 7.4s; animation-delay: -2.6s; }
  .lp .steps > li { animation: lp-bob 7.5s ease-in-out infinite; }
  .lp .steps > li:nth-child(2) { animation-duration: 8.4s; animation-delay: -3s; }
  .lp .steps > li:nth-child(3) { animation-duration: 6.8s; animation-delay: -5s; }

  /* Hover: a bubble swells, a card lifts. */
  @media (hover: hover) {
    .lp-bubble__shape { transition: scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
    .lp-bubble:hover .lp-bubble__shape { scale: 1.05; }
    .lp .rows > li,
    .lp .faq { transition: transform 0.2s ease; }
    .lp .rows > li:hover,
    .lp .faq:hover { transform: translateY(-3px); }
  }
  .lp .faq[open] .faq__body { animation: lp-open 0.3s ease-out; }

  /* Reveals as the page scrolls, where the browser can. */
  @supports (animation-timeline: view()) {
    @keyframes lp-reveal { from { opacity: 0; translate: 0 3vw; } to { opacity: 1; translate: 0 0; } }
    @keyframes lp-grow { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
    @keyframes lp-pop-in {
      0% { opacity: 0; scale: 0.45; }
      70% { opacity: 1; scale: 1.06; }
      100% { opacity: 1; scale: 1; }
    }
    .lp #about .lp-inner,
    .lp .specimen,
    .lp .lp-cta .lp-inner {
      animation: lp-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
    .lp #features h2,
    .lp #trust h2,
    .lp #steps h2,
    .lp #faq h2,
    .lp .rows > li,
    .lp .faq {
      animation: lp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .lp-bubbles .lp-bubble,
    .lp .steps > li {
      animation: lp-pop-in linear both, lp-bob 7s ease-in-out infinite;
      animation-timeline: view(), auto;
      animation-range: entry 0% entry 90%, normal;
    }
    .lp-bubbles > :nth-child(3n+1) { animation-duration: auto, 6.2s; animation-delay: 0s, -1.5s; }
    .lp-bubbles > :nth-child(3n+2) { animation-duration: auto, 8.1s; animation-delay: 0s, -4s; }
    .lp-bubbles__list > :nth-child(2n) { animation-duration: auto, 7.4s; animation-delay: 0s, -2.6s; }
    .lp .steps > li:nth-child(2) { animation-duration: auto, 8.4s; animation-delay: 0s, -3s; }
    .lp .steps > li:nth-child(3) { animation-duration: auto, 6.8s; animation-delay: 0s, -5s; }
  }
}