/* Play pages (2026-10-18): the Duolingo-style audience landings
   (for/students.html, for/growth.html; generated from
   scripts/audiences/students.mjs and growth.mjs). Orbit's marketing look:
   Nunito, chunky 3D buttons, bright colour blocks, round shapes, the bird
   flock, a lesson path, bouncy hovers. A deliberate departure from the main
   landing's flat Figma style, at the user's request.

   Everything is scoped to body.lp-page and loads after landing-rd.css and
   landing-rd-site.css, so it never touches other pages. Light only.
   Product visuals are .mk-slot live demos (css/mocks-host.css); the CSS
   mocks here are their fallbacks and fill the slot exactly, so the bird
   perched on top lines up before and after the demo goes live.
   Text contrast: bright colours are fills, rings and icons; text on white
   uses the "-ink" shades (4.5:1) and big headings the "-head" shades (3:1,
   large text). White text sits only on the deep "-btn" fills, or on the big
   green CTA at 19px/800 (large text). */

body.landing-page.rd-site.lp-page {
  --lp-font: "Nunito", "Jomoq Cyrillic", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Color Emoji", sans-serif;
  --lp-ink: #3C3C3C;
  --lp-ink-2: #5E5E5E;
  --lp-line: #E5E5E5;
  --lp-line-2: #D2D2D2;
  --lp-maxw: 1200px;
  --lp-gutter: 40px;
  --lp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lp-focus: #0D99FF;
  /* the big CTA (19px/800 white text = large text, 3.2:1) and the small one (5:1) */
  /* Buttons wear Jomoq cobalt (2026-10-19; they were Duolingo green). */
  --lp-go: #2E5BFF;
  --lp-go-shadow: #1E40D0;
  --lp-go-deep: #2E5BFF;
  --lp-go-deep-shadow: #1E40D0;
  font-family: var(--lp-font);
  color: var(--lp-ink);
  background: #FFFFFF;
  overflow-x: hidden;
}

/* Colour slots (Orbit's palette): --c bright fill, --c-deep its 3D edge,
   --c-ink text on white, --c-head big headings, --c-soft backgrounds,
   --c-mid shapes and shadows, --c-btn / --c-shadow small buttons with
   white text. */
.lp-page .c-green { --c: #58CC02; --c-deep: #58A700; --c-ink: #2B7F00; --c-head: #3F9C00; --c-soft: #E9F9DA; --c-mid: #C3EEA0; --c-btn: #2B7F00; --c-shadow: #1E5C00; }
.lp-page .c-blue { --c: #1CB0F6; --c-deep: #1899D6; --c-ink: #0A6FAA; --c-head: #1590CC; --c-soft: #DDF4FF; --c-mid: #AEE1FB; --c-btn: #0A6FAA; --c-shadow: #07507A; }
.lp-page .c-purple { --c: #CE82FF; --c-deep: #A568CC; --c-ink: #8A3FC7; --c-head: #A560E8; --c-soft: #F4E6FF; --c-mid: #E2C4FF; --c-btn: #8A3FC7; --c-shadow: #612C8D; }
.lp-page .c-orange { --c: #FF9600; --c-deep: #CD7900; --c-ink: #A85600; --c-head: #D46F00; --c-soft: #FFF1DC; --c-mid: #FFD59C; --c-btn: #B35C00; --c-shadow: #803F00; }
.lp-page .c-pink { --c: #FF86D0; --c-deep: #D96AB0; --c-ink: #B1287D; --c-head: #E0489F; --c-soft: #FFE7F5; --c-mid: #FFC4E7; --c-btn: #B1287D; --c-shadow: #7E1C59; }
.lp-page .c-teal { --c: #1FD1B4; --c-deep: #17A88F; --c-ink: #00776A; --c-head: #00967E; --c-soft: #DBF8F2; --c-mid: #A5EDDF; --c-btn: #00776A; --c-shadow: #00544A; }
.lp-page .c-yellow { --c: #FFC800; --c-deep: #D9A800; --c-ink: #8A6400; --c-head: #B88A00; --c-soft: #FFF6CC; --c-mid: #FFE68C; --c-btn: #8A6400; --c-shadow: #5F4500; }
.lp-page .c-red { --c: #FF4B4B; --c-deep: #D33131; --c-ink: #C92A2A; --c-head: #E03E3E; --c-soft: #FFE4E4; --c-mid: #FFBDBD; --c-btn: #C92A2A; --c-shadow: #8F1C1C; }

.lp-page :where(*, *::before, *::after) { box-sizing: border-box; }
.lp-page :focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 3px; border-radius: 12px; }
.lp-page .lp-skip { position: absolute; left: -999px; top: 8px; z-index: 400; padding: 10px 16px; border-radius: 12px; background: var(--lp-ink); color: #FFFFFF; font: 800 15px/1 var(--lp-font); text-decoration: none; }
.lp-page .lp-skip:focus { left: 12px; }
.lp-page .lp-main { display: block; width: 100%; overflow: clip; }

/* ── Type ──────────────────────────────────────────────────────────────── */
.lp-page .lp-h1 {
  margin: 0 0 20px;
  font: 900 clamp(2.5rem, 4.9vw, 4.25rem)/1.04 var(--lp-font);
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}
.lp-page .lp-h2 {
  margin: 0 0 18px;
  font: 900 clamp(2rem, 3.4vw, 3rem)/1.08 var(--lp-font);
  letter-spacing: -0.015em;
  color: var(--lp-ink);
}
.lp-page .lp-hl {
  color: var(--c-head, #3F9C00);
  text-decoration: underline wavy var(--c, #58CC02);
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}
.lp-page .lp-lede {
  max-width: 33em;
  margin: 0 0 32px;
  font: 600 clamp(1.125rem, 1.45vw, 1.3rem)/1.55 var(--lp-font);
  color: var(--lp-ink-2);
  text-wrap: pretty;
}
.lp-page .lp-p {
  max-width: 32em;
  margin: 0 0 22px;
  font: 600 19px/1.55 var(--lp-font);
  color: var(--lp-ink-2);
  text-wrap: pretty;
}
.lp-page .lp-fine { margin: 16px 0 0; font: 700 15px/1.4 var(--lp-font); color: var(--lp-ink-2); }

/* ── Icons ─────────────────────────────────────────────────────────────── */
.lp-page .lp-ico { display: inline-grid; place-items: center; flex: none; width: 1.3em; height: 1.3em; line-height: 0; }
.lp-page .lp-ico svg, .lp-page .lp-floaty svg { display: block; width: 100%; height: 100%; }
.lp-page .lp-ico.lp-tick { padding: 0.18em; border-radius: 50%; background: var(--c, #58CC02); color: #FFFFFF; box-shadow: 0 2px 0 var(--c-deep, #58A700); }

/* ── Buttons: chunky, 3D, press down on tap ────────────────────────────── */
.lp-page .lp-btn {
  --b: var(--lp-go-deep);
  --bs: var(--lp-go-deep-shadow);
  --bt: #FFFFFF;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  background: var(--b);
  color: var(--bt);
  font: 800 16px/1 var(--lp-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--bs);
  transition: transform 80ms ease, box-shadow 80ms ease, filter 150ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lp-page .lp-btn:hover { filter: brightness(1.07); color: var(--bt); text-decoration: none; }
.lp-page a.lp-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--bs); }
.lp-page .lp-btn.is-xl { --b: var(--lp-go); --bs: var(--lp-go-shadow); min-height: 60px; padding: 0 34px; border-radius: 18px; font-size: 19px; box-shadow: 0 5px 0 var(--bs); }
.lp-page a.lp-btn.is-xl:active { transform: translateY(5px); }
.lp-page .lp-btn.is-white { --b: #FFFFFF; --bs: var(--lp-line); --bt: #2E5BFF; border: 2px solid var(--lp-line); }
.lp-page .lp-btn.is-white:hover { filter: none; background: #F7F7F7; }
.lp-page .lp-btn.is-sm { min-height: 46px; padding: 0 20px; border-radius: 14px; font-size: 14px; }
.lp-page .lp-btn.is-c { --b: var(--c-btn); --bs: var(--c-shadow); }
.lp-page .lp-btn.is-ghost { --b: #FFFFFF; --bs: var(--lp-line); --bt: var(--c-ink, var(--lp-ink-2)); border: 2px solid var(--lp-line); }
.lp-page .lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Shared chrome: banner, nav, Use cases menu, footer ────────────────── */
body.landing-page.rd-site.lp-page .rd-topbar { background: #E9F9DA; font: 700 15px/1.4 var(--lp-font); color: var(--lp-ink); }
body.landing-page.rd-site.lp-page .rd-topbar-chip { padding: 4px 9px; border: 2px solid #A6E37A; border-radius: 10px; background: #FFFFFF; color: #2B7F00; font: 900 12px/1 var(--lp-font); letter-spacing: 0.06em; box-shadow: 0 2px 0 #A6E37A; }
body.landing-page.rd-site.lp-page .rd-topbar-go { font-weight: 800; color: #2B7F00; text-decoration-thickness: 2px; }
body.landing-page.rd-site.lp-page .landing-nav { background: rgba(255, 255, 255, 0.94); border-bottom: 2px solid var(--lp-line); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); z-index: 100; }
body.landing-page.rd-site.lp-page .landing-nav-inner { height: 72px; }
body.landing-page.rd-site.lp-page .landing-brand { color: #2E5BFF; }
body.landing-page.rd-site.lp-page .landing-brand .brand-logo { height: 28px; }
body.landing-page.rd-site.lp-page .rd-nav-login,
body.landing-page.rd-site.lp-page .rd-uc-btn { font: 800 16px/1 var(--lp-font); color: var(--lp-ink-2); border-radius: 12px; }
body.landing-page.rd-site.lp-page .rd-nav-login:hover { color: var(--lp-ink); text-decoration: none; background: #F2F2F2; }
body.landing-page.rd-site.lp-page .rd-uc-btn:hover,
body.landing-page.rd-site.lp-page .rd-uc.is-open .rd-uc-btn { background: #F2F2F2; color: var(--lp-ink); }
body.landing-page.rd-site.lp-page .rd-nav-btn {
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background: var(--lp-go-deep);
  color: #FFFFFF;
  font: 800 16px/1 var(--lp-font);
  box-shadow: 0 4px 0 var(--lp-go-deep-shadow);
  transition: transform 80ms ease, box-shadow 80ms ease, filter 150ms ease;
}
body.landing-page.rd-site.lp-page .rd-nav-btn:hover { background: var(--lp-go-deep); color: #FFFFFF; filter: brightness(1.1); }
body.landing-page.rd-site.lp-page .rd-nav-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--lp-go-deep-shadow); }
body.landing-page.rd-site.lp-page .rd-uc-menu { padding: 12px; border: 2px solid var(--lp-line); border-radius: 22px; box-shadow: 0 6px 0 var(--lp-line), 0 30px 60px -24px rgba(0, 0, 0, 0.25); }
body.landing-page.rd-site.lp-page .rd-uc-item { border-radius: 14px; font-family: var(--lp-font); }
body.landing-page.rd-site.lp-page .rd-uc-item:hover,
body.landing-page.rd-site.lp-page .rd-uc-item.is-on { background: #F4F4F4; }
body.landing-page.rd-site.lp-page .rd-uc-ico { border-radius: 14px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.07); }
body.landing-page.rd-site.lp-page .rd-uc-text b { font-weight: 800; color: var(--lp-ink); }
body.landing-page.rd-site.lp-page .rd-uc-text small { font-weight: 600; color: var(--lp-ink-2); }

/* Footer: deep green, a wavy top, the same columns. */
body.landing-page.rd-site.lp-page .rd-foot { position: relative; margin-top: 56px; padding-top: 88px; background: #1E5C00; font-family: var(--lp-font); }
body.landing-page.rd-site.lp-page .rd-foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C 180 4 360 4 540 20 C 720 36 900 42 1080 28 C 1260 14 1350 10 1440 16 V44 H0 Z' fill='%231E5C00'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
body.landing-page.rd-site.lp-page .rd-foot nav h2 { font: 900 13px/1 var(--lp-font); letter-spacing: 0.08em; color: #B8EE8E; }
body.landing-page.rd-site.lp-page .rd-foot nav a { font-weight: 700; }
body.landing-page.rd-site.lp-page .rd-foot-brand p { color: #D4F5BC; font-weight: 600; }
body.landing-page.rd-site.lp-page .auth-foot-inner { border-top-color: rgba(255, 255, 255, 0.18); }
body.landing-page.rd-site.lp-page .auth-foot-copy { color: #D4F5BC; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.lp-page .lp-hero { position: relative; isolation: isolate; overflow: hidden; }
.lp-page .lp-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lp-page .lp-scene > * { position: absolute; }
.lp-page .lp-sky { inset: 0; }
.lp-students .lp-sky { background: linear-gradient(180deg, #B8E6FF 0%, #D6F1FF 38%, #ECF8FF 70%, #F6FCFF 100%); }
.lp-growth .lp-sky { background: linear-gradient(180deg, #FFD6C4 0%, #FFE0E4 36%, #FCEBF2 64%, #FFF7F1 100%); }

/* The sun (a halo behind Orbi in the hero, a corner sun in the close) */
.lp-page .lp-sun { position: absolute; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; }
.lp-page .lp-sun::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 223, 128, 0.5) 0deg 7deg, rgba(255, 223, 128, 0) 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.55) 42%, transparent 70%);
  mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.55) 42%, transparent 70%);
  animation: lp-spin 80s linear infinite;
}
.lp-page .lp-sun i { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #FFF6CC 0%, #FFDA55 62%, #FFC800 100%); box-shadow: 0 0 0 14px rgba(255, 214, 80, 0.22), 0 0 70px rgba(255, 200, 60, 0.6); }
.lp-growth .lp-sun::before { background: repeating-conic-gradient(from 0deg, rgba(255, 186, 130, 0.5) 0deg 7deg, rgba(255, 186, 130, 0) 7deg 18deg); }
.lp-growth .lp-sun i { background: radial-gradient(circle at 38% 36%, #FFF1D6 0%, #FFC27A 62%, #FFA65A 100%); box-shadow: 0 0 0 16px rgba(255, 170, 110, 0.22), 0 0 80px rgba(255, 150, 90, 0.55); }
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-page .lp-sparks { inset: 0; }
.lp-page .lp-spark { position: absolute; width: 16px; height: 16px; color: #FFFFFF; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)); animation: lp-twinkle 3.2s ease-in-out infinite; }
.lp-page .lp-spark svg { display: block; width: 100%; height: 100%; }
.lp-page .lp-spark.is-0 { top: 10%; left: 16%; }
.lp-page .lp-spark.is-1 { top: 24%; left: 48%; width: 11px; height: 11px; animation-delay: -1.1s; }
.lp-page .lp-spark.is-2 { top: 12%; right: 30%; animation-delay: -2s; }
.lp-page .lp-spark.is-3 { top: 40%; left: 6%; width: 10px; height: 10px; animation-delay: -0.5s; }
.lp-page .lp-spark.is-4 { top: 32%; right: 5%; width: 12px; height: 12px; animation-delay: -1.6s; }
.lp-page .lp-spark.is-5 { top: 6%; left: 62%; width: 9px; height: 9px; animation-delay: -2.5s; }
.lp-page .lp-spark.is-6 { top: 52%; left: 40%; width: 10px; height: 10px; animation-delay: -0.9s; }
@keyframes lp-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.lp-page .lp-range, .lp-page .lp-hills { left: -2%; width: 104%; bottom: 0; }
.lp-page .lp-range.is-far { height: 320px; bottom: 112px; }
.lp-page .lp-range.is-mid { height: 260px; bottom: 74px; }
.lp-page .lp-hills.is-back { height: 220px; bottom: 44px; }
.lp-page .lp-hills.is-front { height: 240px; bottom: 0; }
.lp-page .lp-birds-far { top: 30px; left: 58%; width: 140px; height: 42px; animation: lp-flyby 26s ease-in-out infinite alternate; }
@keyframes lp-flyby { from { transform: translate(-40px, 8px); } to { transform: translate(70px, -12px); } }
.lp-page .lp-cloud { width: 220px; filter: drop-shadow(0 12px 18px rgba(30, 110, 170, 0.12)); }
.lp-growth .lp-cloud { filter: drop-shadow(0 12px 18px rgba(200, 90, 130, 0.12)); }
.lp-page .lp-cloud > svg { display: block; width: 100%; height: auto; }
.lp-page .lp-cloud.is-far { top: 168px; left: 46%; width: 130px; opacity: 0.85; animation: lp-drift 52s ease-in-out infinite alternate; }
.lp-page .lp-cloud.is-a { top: 26px; left: 2%; width: 220px; animation: lp-drift 38s ease-in-out infinite alternate; }
.lp-page .lp-cloud.is-b { top: 50px; left: 52%; width: 160px; animation: lp-drift 44s ease-in-out infinite alternate-reverse; }
.lp-page .lp-cloud.is-c { top: 300px; right: 1%; width: 150px; animation: lp-drift 34s ease-in-out infinite alternate; }
@keyframes lp-drift { from { transform: translateX(-26px); } to { transform: translateX(30px); } }
.lp-page .lp-plane { top: 18px; left: 45%; width: 72px; height: 45px; animation: lp-fly 9s ease-in-out infinite; }
.lp-page .lp-plane svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(20, 90, 150, 0.18)); }
.lp-page .lp-plane i { position: absolute; right: 86%; top: 40%; width: 150px; height: 46px; border-top: 3px dashed rgba(255, 255, 255, 0.95); border-radius: 50%; }
@keyframes lp-fly { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(40px, -16px) rotate(3deg); } }
.lp-page .lp-rainbow { left: 50%; bottom: 150px; width: 760px; height: 380px; margin-left: -380px; opacity: 0.75; }
.lp-page .lp-petals { inset: 0; }
.lp-page .lp-petals i { position: absolute; top: -20px; width: 12px; height: 9px; border-radius: 60% 0 60% 0; background: #FFB3CF; opacity: 0.85; animation: lp-petal 14s linear infinite; }
.lp-page .lp-petals i.is-0 { left: 8%; }
.lp-page .lp-petals i.is-1 { left: 22%; background: #FFFFFF; animation-delay: -4s; animation-duration: 17s; }
.lp-page .lp-petals i.is-2 { left: 38%; background: #FFC9A8; animation-delay: -9s; }
.lp-page .lp-petals i.is-3 { left: 58%; animation-delay: -2s; animation-duration: 19s; }
.lp-page .lp-petals i.is-4 { left: 74%; background: #E6CCFF; animation-delay: -7s; }
.lp-page .lp-petals i.is-5 { left: 90%; background: #FFFFFF; animation-delay: -12s; animation-duration: 16s; }
@keyframes lp-petal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: translate(-90px, 640px) rotate(540deg); opacity: 0; } }

.lp-page .lp-hero-inner {
  position: relative;
  width: min(var(--lp-maxw), calc(100% - 2 * var(--lp-gutter)));
  min-height: 680px;
  margin: 0 auto;
  padding: 56px 0 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.lp-page .lp-hero-copy { position: relative; z-index: 2; padding-bottom: 48px; }
.lp-page .lp-hero .lp-cta-row { flex-direction: column; align-items: stretch; width: min(100%, 380px); }
.lp-page .lp-hero-stage { position: relative; align-self: stretch; min-height: 560px; }
.lp-page .lp-sun.is-halo { left: 50%; top: -14px; width: 440px; height: 440px; margin-left: -220px; }
.lp-page .lp-mound { position: absolute; left: -8%; width: 116%; bottom: -150px; height: 310px; }
.lp-page .lp-perch-cloud { display: none; }
.lp-page .lp-hero-flock { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.lp-page .lp-hero-flock .rd-bird.is-side { margin: 0 -26px 10px; }
.lp-page .lp-hero-flock .rd-bird.is-orbi { position: relative; z-index: 1; }
.lp-page .lp-ground { position: absolute; left: 0; bottom: -1px; z-index: 3; width: 100%; height: 72px; pointer-events: none; }

/* Sticker chips floating around the hero flock */
.lp-page .lp-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--lp-line);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 4px 0 var(--lp-line);
  font: 800 16px/1 var(--lp-font);
  color: var(--lp-ink);
  white-space: nowrap;
  animation: lp-bob 5s ease-in-out infinite;
}
.lp-page .lp-chip b { color: var(--c-ink); font-weight: 900; }
.lp-page .lp-chip .lp-ico { width: 24px; height: 24px; }
.lp-page .lp-chip.is-a { top: 88px; left: 0; rotate: -6deg; }
.lp-page .lp-chip.is-b { top: 150px; right: -1%; rotate: 5deg; animation-delay: -1.7s; }
.lp-page .lp-chip.is-c { top: 262px; left: 2%; rotate: 3deg; animation-delay: -3.1s; }
.lp-page .lp-chip.is-d { top: 30px; right: 14%; rotate: -3deg; animation-delay: -2.4s; }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ── The lesson path ───────────────────────────────────────────────────── */
.lp-page .lp-path-sec { width: min(var(--lp-maxw), calc(100% - 2 * var(--lp-gutter))); margin: 0 auto; padding: 72px 0 56px; scroll-margin-top: 80px; }
.lp-page .lp-path-wrap { position: relative; }
.lp-page .lp-path { position: relative; display: grid; gap: 28px; width: min(100%, 470px); margin: 0 auto; padding: 24px 0 0; list-style: none; }
.lp-page .lp-path-step { translate: var(--x) 0; }
.lp-page .lp-node { display: inline-flex; align-items: center; gap: 20px; max-width: 100%; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.lp-page .lp-node:hover { text-decoration: none; }
.lp-page .lp-node-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 86px;
  height: 78px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 8px 0 var(--c-deep);
  transition: translate 140ms var(--lp-spring), box-shadow 140ms ease;
}
.lp-page .lp-node-btn::before { content: ""; position: absolute; left: 20%; top: 13%; width: 28%; height: 17%; border-radius: 50%; background: rgba(255, 255, 255, 0.38); rotate: -18deg; }
.lp-page .lp-node-emoji { position: relative; font-size: 36px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.14)); }
.lp-page .lp-node:hover .lp-node-btn { translate: 0 -3px; box-shadow: 0 11px 0 var(--c-deep); }
.lp-page .lp-node:active .lp-node-btn { translate: 0 6px; box-shadow: 0 2px 0 var(--c-deep); }
.lp-page .lp-node.is-start .lp-node-btn::after { content: ""; position: absolute; inset: -13px -13px -20px; border: 6px solid var(--c-mid); border-radius: 50%; }
.lp-page .lp-node-start {
  position: absolute;
  bottom: calc(100% + 24px);
  left: 50%;
  translate: -50% 0;
  padding: 9px 14px;
  border: 2px solid var(--lp-line);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--c-ink);
  font: 900 15px/1 var(--lp-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: lp-bob 1.8s ease-in-out infinite;
}
.lp-page .lp-node-start::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; margin: -5px 0 0 -6px; border-right: 2px solid var(--lp-line); border-bottom: 2px solid var(--lp-line); background: #FFFFFF; rotate: 45deg; }
.lp-page .lp-node-label { position: relative; display: grid; gap: 3px; min-width: 0; padding: 12px 16px; border: 2px solid var(--lp-line); border-radius: 18px; background: #FFFFFF; box-shadow: 0 4px 0 var(--lp-line); transition: border-color 160ms ease, box-shadow 160ms ease; }
.lp-page .lp-node-label::before { content: ""; position: absolute; left: -8px; top: 50%; width: 13px; height: 13px; margin-top: -7px; border-left: 2px solid var(--lp-line); border-bottom: 2px solid var(--lp-line); background: #FFFFFF; rotate: 45deg; transition: border-color 160ms ease; }
.lp-page .lp-node-label b { font: 900 18px/1.2 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-node-label small { font: 700 14.5px/1.35 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-node:hover .lp-node-label { border-color: var(--c); box-shadow: 0 4px 0 var(--c); }
.lp-page .lp-node:hover .lp-node-label::before { border-color: var(--c); }
.lp-page .lp-path-bird { position: absolute; z-index: 1; line-height: 0; }
.lp-page .lp-path-bird.is-a { top: 130px; left: calc(50% - 430px); }
.lp-page .lp-path-bird.is-b { top: 420px; right: calc(50% - 440px); }
.lp-page .lp-path-bird.is-c { top: 40px; right: calc(50% - 400px); }

/* ── Feature sections ──────────────────────────────────────────────────── */
.lp-page .lp-feat {
  width: min(var(--lp-maxw), calc(100% - 2 * var(--lp-gutter)));
  margin: 0 auto;
  padding: 88px 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 72px;
  scroll-margin-top: 80px;
}
.lp-page .lp-feat.is-flip .lp-feat-copy { order: 2; }
.lp-page .lp-points { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; }
.lp-page .lp-points li { display: flex; align-items: flex-start; gap: 12px; font: 700 17px/1.45 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-points .lp-tick { width: 26px; height: 26px; margin-top: -1px; }

.lp-page .lp-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 84px 32px 40px;
  border-radius: 44px;
  background: var(--c-soft);
}
.lp-page .lp-stage-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.lp-page .lp-stage-bg i { position: absolute; border-radius: 50%; background: var(--c-mid); }
.lp-page .lp-stage-bg i:nth-child(1) { top: -120px; right: -90px; width: 340px; height: 340px; opacity: 0.5; }
.lp-page .lp-stage-bg i:nth-child(2) { bottom: -70px; left: -60px; width: 200px; height: 200px; opacity: 0.45; }
.lp-page .lp-stage-bg i:nth-child(3) { top: 7%; left: 12%; width: 46px; height: 46px; opacity: 0.8; }
.lp-page .lp-device { position: relative; z-index: 1; width: 100%; max-width: 620px; }
.lp-page .lp-perch { position: absolute; bottom: calc(100% - 15px); z-index: 4; line-height: 0; }
.lp-page .lp-perch.is-right { right: 32px; }
.lp-page .lp-perch.is-left { left: 32px; }
.lp-page .lp-floaty { position: absolute; z-index: 0; width: 30px; height: 30px; color: var(--c); line-height: 0; animation: lp-bob 4.4s ease-in-out infinite; }
.lp-page .lp-floaty.is-a { top: 6%; left: 30%; }
.lp-page .lp-floaty.is-b { bottom: 3%; right: 9%; width: 24px; height: 24px; animation-delay: -1.5s; }
.lp-page .lp-floaty.is-c { top: 6%; right: 44%; width: 26px; height: 26px; animation-delay: -2.8s; }

/* ── Demo slots and their fallback mocks ───────────────────────────────── */
.lp-page .mk-slot { --mk-r: 20px; }
.lp-page .lp-mock {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 26px;
  border: 2px solid var(--lp-line);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: inset 0 -6px 0 var(--c-mid, var(--lp-line));
  font-family: var(--lp-font);
  color: var(--lp-ink);
}
.lp-page .mk-fallback > .lp-mock { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.lp-page .mk-fallback > .lp-chat { justify-content: flex-start; }
.lp-page .lp-chat > .lp-kit { margin-top: auto; }
.lp-page .lp-mock small { display: block; font: 800 12.5px/1.2 var(--lp-font); color: var(--lp-ink-2); }

/* Focus card */
.lp-page .lp-seg { display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: #F2F2F2; }
.lp-page .lp-seg span { flex: 1; padding: 10px 4px; border-radius: 11px; font: 800 14px/1 var(--lp-font); color: var(--lp-ink-2); text-align: center; white-space: nowrap; }
.lp-page .lp-seg .is-on { background: #FFFFFF; color: var(--c-ink); box-shadow: 0 2px 0 var(--lp-line); }
.lp-page .lp-focus-main { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 20px; }
.lp-page .lp-focus-acts { display: flex; gap: 10px; }
.lp-page .lp-focus-acts > span { flex: 1; display: grid; place-items: center; min-height: 46px; border: 2px solid var(--lp-line); border-radius: 14px; box-shadow: 0 4px 0 var(--lp-line); font: 800 14px/1 var(--lp-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--lp-ink-2); }
.lp-page .lp-focus-tree svg { display: block; width: 170px; height: auto; overflow: visible; }
.lp-page .lp-canopy { transform-box: view-box; transform-origin: 80px 140px; animation: lp-sway 5s ease-in-out infinite; }
@keyframes lp-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.lp-page .lp-focus-info b { display: block; margin-top: 2px; font: 800 18px/1.25 var(--lp-font); }
.lp-page .lp-focus-time { margin: 8px 0 12px; font: 900 64px/1 var(--lp-font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--lp-ink); }
.lp-page .lp-fuse { position: relative; height: 14px; border-radius: 99px; background: #F0F0F0; overflow: hidden; }
.lp-page .lp-fuse i { position: absolute; inset: 0 auto 0 0; width: 64%; border-radius: inherit; background: linear-gradient(90deg, #FF9600, #FFC800); animation: lp-burn 24s linear infinite; }
.lp-page .lp-fuse i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px 3px rgba(255, 220, 120, 0.95); }
@keyframes lp-burn { from { width: 70%; } to { width: 12%; } }
.lp-page .lp-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lp-page .lp-flags > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 10px; background: #FFF1DC; color: #A85600; font: 800 12.5px/1 var(--lp-font); white-space: nowrap; }
.lp-page .lp-flags > span + span { background: #E9F9DA; color: #2B7F00; }
.lp-page .lp-flags .lp-ico { width: 15px; height: 15px; }

/* Quiz card (mirrors js/quiz-popup.js) */
.lp-page .lp-quiz-top { display: flex; align-items: center; gap: 12px; }
.lp-page .lp-quiz-top small { color: var(--lp-ink-2); }
.lp-page .lp-quiz-bar { position: relative; flex: 1; height: 16px; border-radius: 99px; background: #E5E5E5; overflow: hidden; }
.lp-page .lp-quiz-bar i { position: absolute; inset: 0 auto 0 0; width: 66%; border-radius: inherit; background: #CE82FF; }
.lp-page .lp-quiz-bar i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.4); }
.lp-page .lp-quiz-n { color: var(--c-ink) !important; }
.lp-page .lp-quiz-q { margin: 6px 0 16px; font: 800 23px/1.3 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-quiz-opts { display: grid; gap: 10px; }
.lp-page .lp-quiz-opts > span { display: flex; align-items: center; min-height: 54px; padding: 0 18px; border: 2px solid var(--lp-line); border-radius: 16px; background: #FFFFFF; box-shadow: 0 4px 0 var(--lp-line); font: 700 17px/1.2 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-quiz-opts > span.is-right { border-color: #58CC02; background: #D7FFB8; color: #2B7F00; box-shadow: 0 4px 0 #58CC02; }
.lp-page .lp-quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #D7FFB8; color: #2B7F00; }
.lp-page .lp-quiz-foot .lp-btn { --b: #2B7F00; --bs: #1E5C00; flex: none; min-height: 40px; padding: 0 16px; }
.lp-page .lp-quiz-msg { margin: 0; font: 700 15px/1.4 var(--lp-font); }
.lp-page .lp-quiz-msg b { font-weight: 900; }

/* Chat with worked steps */
.lp-page .lp-chat { gap: 14px; }
.lp-page .lp-msg p { margin: 0; font: 600 15.5px/1.45 var(--lp-font); }
.lp-page .lp-msg.is-you { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 88%; }
.lp-page .lp-msg.is-you p { padding: 11px 15px; border: 2px solid #AEE1FB; border-radius: 18px 18px 6px 18px; background: #DDF4FF; color: #0A4F7A; }
.lp-page .lp-file { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 8px; border: 2px solid var(--lp-line); border-radius: 12px; background: #FFFFFF; font: 800 13px/1 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-file .lp-ico { width: 18px; height: 18px; color: #FF4B4B; }
.lp-page .lp-msg.is-ai { padding: 14px; border-radius: 18px 18px 18px 6px; background: #F5F5F5; }
.lp-page .lp-steps { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.lp-page .lp-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--lp-line); border-radius: 14px; background: #FFFFFF; font: 700 15px/1.35 var(--lp-font); }
.lp-page .lp-step b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #DDF4FF; color: #0A6FAA; font: 900 14px/1 var(--lp-font); }
.lp-page .lp-step.is-answer b { padding: 6px; background: #58CC02; color: #FFFFFF; }
.lp-page .lp-step.is-answer b svg { width: 100%; height: 100%; }
.lp-page .lp-step.is-hidden { border-style: dashed; background: #FAFAFA; }
.lp-page .lp-step.is-hidden span { color: transparent; text-shadow: 0 0 9px rgba(60, 60, 60, 0.55); user-select: none; }
.lp-page .lp-step.is-hidden b { background: #EFEFEF; color: #8A8A8A; }
.lp-page .lp-kit { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-page .lp-kit span { padding: 8px 12px; border: 2px solid var(--lp-line); border-radius: 999px; background: #FFFFFF; font: 800 12.5px/1 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-kit span:nth-child(4) { border-color: #E2C4FF; background: #F4E6FF; color: #8A3FC7; }

/* Reel card: fills its slot like the black Reels feed */
.lp-page .lp-reel { padding: 0; overflow: hidden; border-color: #0E1A1F; background: #131F24; color: #FFFFFF; box-shadow: none; }
.lp-page .mk-fallback > .lp-reel { justify-content: flex-start; }
.lp-page .lp-reel-art { position: relative; flex: 1 1 auto; min-height: 200px; background: radial-gradient(circle at 30% 20%, #3B2D7A 0%, #1A1846 55%, #0E0F2B 100%); overflow: hidden; }
.lp-page .lp-reel-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.6px 1.6px at 20% 30%, #FFFFFF 50%, transparent 51%), radial-gradient(1.2px 1.2px at 70% 18%, #FFFFFF 50%, transparent 51%), radial-gradient(1.4px 1.4px at 84% 64%, #FFFFFF 50%, transparent 51%), radial-gradient(1px 1px at 44% 76%, #FFFFFF 50%, transparent 51%), radial-gradient(1.3px 1.3px at 10% 82%, #FFFFFF 50%, transparent 51%), radial-gradient(1px 1px at 58% 44%, #FFFFFF 50%, transparent 51%); opacity: 0.85; }
.lp-page .lp-planet { position: absolute; right: 16%; top: 50%; width: 132px; height: 132px; margin-top: -66px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFB27A 0%, #F06A3C 52%, #A83A22 100%); box-shadow: inset -14px -10px 0 rgba(0, 0, 0, 0.18); animation: lp-bob 7s ease-in-out infinite; }
.lp-page .lp-planet::before { content: ""; position: absolute; left: 30px; top: 40px; width: 26px; height: 20px; border-radius: 50%; background: rgba(120, 35, 20, 0.35); box-shadow: 34px 22px 0 -4px rgba(120, 35, 20, 0.3), 10px 44px 0 -6px rgba(120, 35, 20, 0.28); }
.lp-page .lp-moon { position: absolute; right: 52%; top: 62%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F2F2F2, #A9A9B8); animation: lp-bob 5s ease-in-out -2s infinite; }
.lp-page .lp-tag { position: absolute; left: 18px; top: 18px; z-index: 1; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; font: 800 13px/1 var(--lp-font); }
.lp-page .lp-reel-body { padding: 20px 76px 24px 22px; }
.lp-page .lp-reel-body > b { display: block; font: 900 25px/1.15 var(--lp-font); }
.lp-page .lp-reel-body > p { margin: 8px 0 12px; font: 600 15.5px/1.45 var(--lp-font); color: rgba(255, 255, 255, 0.86); }
.lp-page .lp-reel-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-page .lp-reel-acts span { padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font: 800 12.5px/1 var(--lp-font); }
.lp-page .lp-reel-ask { margin-top: 12px; padding: 10px 12px; border: 2px solid rgba(31, 209, 180, 0.4); border-radius: 14px; background: rgba(31, 209, 180, 0.16); }
.lp-page .lp-reel-ask small { color: #7FF0DC; }
.lp-page .lp-reel-ask p { margin: 3px 0 0; font: 700 14px/1.35 var(--lp-font); }
.lp-page .lp-reel-rail { position: absolute; right: 14px; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lp-page .lp-reel-rail > span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 44px; color: #FFFFFF; font: 800 12px/1 var(--lp-font); }
.lp-page .lp-reel-rail > span:first-child { color: #FF86D0; }
.lp-page .lp-reel-rail svg { width: 30px; height: 30px; }
.lp-page .lp-reel-rail b { color: #FFFFFF; }

/* Habits card */
.lp-page .lp-habits-top { display: flex; align-items: center; gap: 10px; }
.lp-page .lp-habits-top > b { margin-right: auto; font: 900 24px/1 var(--lp-font); }
.lp-page .lp-streak { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px 7px 9px; border-radius: 999px; background: #FFF1DC; color: #A85600; font: 900 17px/1 var(--lp-font); }
.lp-page .lp-streak svg { width: 22px; height: 22px; }
.lp-page .lp-eff { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(#58CC02 calc(var(--v, 0.9) * 360deg), #E5E5E5 0); }
.lp-page .lp-eff::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #FFFFFF; }
.lp-page .lp-eff b { position: relative; font: 900 15px/1 var(--lp-font); color: #2B7F00; }
.lp-page .lp-habit-list { display: grid; gap: 12px; }
.lp-page .lp-habit { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--lp-line); border-radius: 18px; background: #FFFFFF; box-shadow: 0 4px 0 var(--lp-line); }
.lp-page .lp-habit > span:nth-child(2) { min-width: 0; }
.lp-page .lp-habit b { display: block; font: 800 16.5px/1.2 var(--lp-font); }
.lp-page .lp-habit small { margin-top: 3px; }
.lp-page .lp-habit-dot { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--c-soft); font-size: 23px; line-height: 1; }
.lp-page .lp-tickbox { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: auto; padding: 6px; border: 3px solid var(--lp-line-2); border-radius: 50%; color: transparent; }
.lp-page .lp-tickbox svg { width: 100%; height: 100%; }
.lp-page .lp-habit.is-done { border-color: var(--c); background: var(--c-soft); box-shadow: 0 4px 0 var(--c); }
.lp-page .lp-habit-add { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 2px dashed var(--lp-line-2); border-radius: 16px; font: 800 15px/1.2 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-habit-add b { font-size: 22px; font-weight: 900; color: var(--c-ink); }
.lp-page .lp-habit.is-done .lp-tickbox { border-color: var(--c); background: var(--c); color: #FFFFFF; }

/* Journal page (growth) */
.lp-page .lp-moods-row { display: flex; justify-content: space-between; gap: 6px; padding: 6px; border-radius: 16px; background: #F5F5F5; }
.lp-page .lp-moods-row > span { display: grid; place-items: center; flex: 1; height: 42px; border-radius: 12px; font-size: 24px; line-height: 1; filter: grayscale(0.35); opacity: 0.75; }
.lp-page .lp-moods-row > span.is-on { background: #FFFFFF; box-shadow: 0 3px 0 var(--c-mid, var(--lp-line)); filter: none; opacity: 1; scale: 1.08; }
.lp-page .lp-jn-top { display: flex; align-items: center; gap: 12px; }
.lp-page .lp-jn-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #FFF1DC; font-size: 26px; line-height: 1; }
.lp-page .lp-jn-top b { display: block; font: 900 21px/1.15 var(--lp-font); }
.lp-page .lp-jn-body h4 { margin: 0 0 4px; font: 900 15.5px/1.3 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-jn-body p { margin: 0 0 12px; font: 600 15px/1.45 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-jn-body ol { margin: 0; padding-left: 22px; font: 600 15px/1.6 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-reflect { padding: 12px 14px; border: 2px solid var(--c-mid); border-radius: 16px; background: var(--c-soft); }
.lp-page .lp-reflect small { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--c-ink); }
.lp-page .lp-reflect small .lp-ico { width: 15px; height: 15px; color: var(--c); }
.lp-page .lp-reflect p { margin: 2px 0 0; font: 700 14.5px/1.4 var(--lp-font); color: var(--lp-ink); }

/* Friend chat (growth) */
.lp-page .lp-friend { gap: 10px; }
.lp-page .mk-fallback > .lp-friend { justify-content: flex-start; }
.lp-page .lp-friend .lp-bubble { font-size: 15px; }
.lp-page .lp-friend .lp-moods-row { align-self: flex-start; width: min(100%, 270px); padding: 4px; }
.lp-page .lp-friend .lp-moods-row > span { height: 34px; font-size: 20px; }
.lp-page .lp-friend .lp-bubble.is-friend { border-color: #FFE68C; }
.lp-page .lp-fr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-bottom: 12px; border-bottom: 2px solid #F0F0F0; }
.lp-page .lp-fr-av { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; background: #FFF6CC; line-height: 0; }
.lp-page .lp-fr-top b { display: block; font: 900 19px/1.15 var(--lp-font); }
.lp-page .lp-fr-top small { display: flex; align-items: center; gap: 4px; margin-top: 3px; font: 900 14px/1 var(--lp-font); color: #A85600; }
.lp-page .lp-fr-top small svg { width: 18px; height: 18px; }
.lp-page .lp-postcard { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px 14px; border: 2px solid #A5EDDF; border-radius: 16px; background: #DBF8F2; font-size: 26px; line-height: 1; }
.lp-page .lp-postcard small { color: #00776A; }
.lp-page .lp-postcard b { display: block; margin-top: 2px; font: 900 16px/1.2 var(--lp-font); color: var(--lp-ink); }

/* Reel art: a calm mind instead of a planet */
.lp-page .lp-reel-art.is-mind { background: radial-gradient(circle at 70% 40%, #FF9FD6 0%, #B97CFF 38%, #4B3AA8 72%, #23205E 100%); }
.lp-page .lp-reel-art.is-mind::before { opacity: 0.5; }
.lp-page .lp-reel-art.is-mind i { position: absolute; left: 66%; top: 46%; border: 3px solid rgba(255, 255, 255, 0.55); border-radius: 50%; translate: -50% -50%; animation: lp-breathe 6s ease-in-out infinite; }
.lp-page .lp-reel-art.is-mind i:nth-child(2) { width: 70px; height: 70px; background: rgba(255, 255, 255, 0.25); }
.lp-page .lp-reel-art.is-mind i:nth-child(3) { width: 130px; height: 130px; animation-delay: -1s; }
.lp-page .lp-reel-art.is-mind i:nth-child(4) { width: 200px; height: 200px; border-color: rgba(255, 255, 255, 0.3); animation-delay: -2s; }
@keyframes lp-breathe { 0%, 100% { scale: 0.92; } 50% { scale: 1.06; } }

/* Home, Analytics tab (growth) */
.lp-page .lp-home-eff { display: flex; align-items: center; gap: 18px; }
.lp-page .lp-eff.is-big { width: 104px; height: 104px; }
.lp-page .lp-eff.is-big::before { inset: 11px; }
.lp-page .lp-eff.is-big b { font-size: 32px; }
.lp-page .lp-home-eff b { display: block; font: 900 30px/1.1 var(--lp-font); color: #0A6FAA; }
.lp-page .lp-home-eff .lp-eff b { display: inline; color: #2B7F00; }
.lp-page .lp-toast { display: flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 14px; border: 2px solid #A6E37A; border-radius: 14px; background: #E9F9DA; font: 800 15px/1.2 var(--lp-font); color: #2B7F00; box-shadow: 0 3px 0 #A6E37A; }
.lp-page .lp-toast b { font-weight: 900; }
.lp-page .lp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-page .lp-tiles > span { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border: 2px solid var(--lp-line); border-radius: 16px; box-shadow: 0 3px 0 var(--lp-line); font-size: 22px; line-height: 1; text-align: center; }
.lp-page .lp-tiles svg { width: 24px; height: 24px; }
.lp-page .lp-tiles b { font: 900 22px/1.1 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-tiles small { font-size: 12px; }
.lp-page .lp-forest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #E9F9DA; }
.lp-page .lp-forest small { color: #2B7F00; }
.lp-page .lp-forest > span { display: flex; gap: 4px; }
.lp-page .lp-forest svg { width: 40px; height: 46px; }

/* The care note under the journal section */
.lp-page .lp-care { display: flex; align-items: flex-start; gap: 12px; width: min(760px, calc(100% - 2 * var(--lp-gutter))); margin: -24px auto 40px; padding: 16px 20px; border: 2px solid #FFC4E7; border-radius: 20px; background: #FFF5FA; font: 700 15.5px/1.5 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-care .lp-ico { width: 24px; height: 24px; margin-top: 1px; color: #FF86D0; }
.lp-page .lp-band.lp-friends-band { --band: #FFF0F7; }
.lp-page .lp-friends-band .c-pink { --c-soft: #FFDCEF; --c-mid: #FFBDE2; }
.lp-page .lp-friends-band .lp-feat { padding: 72px 0; }

/* ── Colour bands with wavy edges ──────────────────────────────────────── */
.lp-page .lp-band { --band: #DDF4FF; position: relative; margin: 64px 0; background: var(--band); }
.lp-page .lp-wave { position: absolute; left: 0; width: 100%; height: 48px; color: var(--band); pointer-events: none; }
.lp-page .lp-wave.is-top { bottom: calc(100% - 1px); }
.lp-page .lp-wave.is-bottom { top: calc(100% - 1px); transform: scale(-1, -1); }
.lp-page .lp-streak-band { --band: #FFF4E2; }
.lp-page .lp-streak-band .c-orange { --c-soft: #FFE3BC; --c-mid: #FFCB85; }
.lp-page .lp-streak-band .lp-feat { padding: 72px 0; }

/* ── Trio of cards ─────────────────────────────────────────────────────── */
.lp-page .lp-trio { width: min(var(--lp-maxw), calc(100% - 2 * var(--lp-gutter))); margin: 0 auto; padding: 96px 0 88px; scroll-margin-top: 80px; }
.lp-page .lp-section-head { max-width: 760px; margin: 0 auto 72px; text-align: center; }
.lp-page .lp-section-head .lp-p { margin-inline: auto; }
.lp-page .lp-trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.lp-page .lp-card {
  position: relative;
  padding: 16px 16px 28px;
  border: 2px solid var(--lp-line);
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: 0 6px 0 var(--lp-line);
  transition: translate 350ms var(--lp-spring), rotate 350ms var(--lp-spring), border-color 160ms ease, box-shadow 160ms ease;
}
.lp-page .lp-card:hover { translate: 0 -6px; rotate: -0.6deg; border-color: var(--c); box-shadow: 0 6px 0 var(--c); }
.lp-page .lp-card-bird { position: absolute; top: -66px; right: 22px; z-index: 2; line-height: 0; }
.lp-page .lp-card-media { position: relative; height: 252px; margin-bottom: 22px; padding: 16px; border-radius: 22px; background: var(--c-soft); }
.lp-page .lp-card h3 { margin: 0 8px 8px; font: 900 23px/1.2 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-card > p { margin: 0 8px; font: 600 16.5px/1.5 var(--lp-font); color: var(--lp-ink-2); }
/* mini mocks (the fallbacks inside the cards' mini slots) */
.lp-page .lp-mini-page, .lp-page .lp-mini-chat, .lp-page .lp-mini-cal { width: calc(100% - 12px); max-width: 300px; }
.lp-page .lp-mini-page { padding: 16px; border: 2px solid var(--c-mid); border-radius: 18px; background: #FFFFFF; }
.lp-page .lp-mini-page small { display: block; font: 800 12px/1 var(--lp-font); color: var(--c-ink); }
.lp-page .lp-mini-page b { display: block; margin: 8px 0 6px; font: 900 17px/1.2 var(--lp-font); }
.lp-page .lp-mini-page p { margin: 0 0 10px; font: 600 13.5px/1.4 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-mini-ai { padding: 9px 11px; border-radius: 12px; background: var(--c-soft); font: 700 13px/1.35 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-mini-ai span { display: block; margin-bottom: 2px; font: 900 11.5px/1 var(--lp-font); color: var(--c-ink); }
.lp-page .lp-mini-chat { display: flex; flex-direction: column; gap: 8px; }
.lp-page .lp-bubble { max-width: 86%; padding: 9px 13px; border-radius: 16px; font: 700 14px/1.35 var(--lp-font); }
.lp-page .lp-bubble.is-friend { align-self: flex-start; border: 2px solid var(--c-mid); border-bottom-left-radius: 5px; background: #FFFFFF; color: var(--lp-ink); }
.lp-page .lp-bubble.is-you { align-self: flex-end; border-bottom-right-radius: 5px; background: #0A6FAA; color: #FFFFFF; }
.lp-page .lp-mini-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font: 900 14px/1 var(--lp-font); color: #A85600; }
.lp-page .lp-mini-meta > span { display: inline-flex; align-items: center; gap: 2px; }
.lp-page .lp-mini-meta svg { width: 20px; height: 20px; }
.lp-page .lp-hearts { color: #FF4B4B; }
.lp-page .lp-mini-cal { padding: 10px; border: 2px solid var(--c-mid); border-radius: 18px; background: #FFFFFF; }
.lp-page .lp-mini-add { margin-bottom: 8px; padding: 8px 10px; border: 2px dashed var(--c-mid); border-radius: 10px; font: 800 12.5px/1 var(--lp-font); color: var(--c-ink); }
.lp-page .lp-mini-cal-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; text-align: center; font: 800 12px/1 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-mini-cal-head span { padding: 6px 0; border-radius: 999px; }
.lp-page .lp-mini-cal-head .is-today { background: #00776A; color: #FFFFFF; }
.lp-page .lp-mini-cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 28px); gap: 5px; }
.lp-page .lp-mini-cal-grid i { grid-column: var(--c); grid-row: var(--r) / span var(--h); padding: 5px 7px; border-left: 4px solid; border-radius: 8px; font: 800 11.5px/1.15 var(--lp-font); font-style: normal; color: var(--lp-ink); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.lp-page .lp-mini-cal-grid .is-blue { border-color: #1CB0F6; background: #DDF4FF; }
.lp-page .lp-mini-cal-grid .is-green { border-color: #58CC02; background: #E9F9DA; }
.lp-page .lp-mini-cal-grid .is-purple { border-color: #CE82FF; background: #F4E6FF; }
.lp-page .lp-mini-cal-grid .is-orange { border-color: #FF9600; background: #FFF1DC; }
.lp-page .lp-mini-cal-grid .is-pink { border-color: #FF86D0; background: #FFE7F5; }

/* ── Meet the flock ────────────────────────────────────────────────────── */
.lp-page .lp-flock-band { --band: #E6F6FF; margin: 96px 0; }
.lp-growth .lp-flock-band { --band: #FFF0EA; }
.lp-page .lp-flock { width: min(var(--lp-maxw), calc(100% - 2 * var(--lp-gutter))); margin: 0 auto; padding: 72px 0 64px; scroll-margin-top: 80px; }
.lp-page .lp-flock .lp-section-head { margin-bottom: 76px; }
.lp-page .lp-flock-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 68px 18px; margin: 0; padding: 0; list-style: none; }
.lp-page .lp-flock-card {
  position: relative;
  padding: 64px 14px 18px;
  border: 2px solid var(--lp-line);
  border-radius: 26px;
  background: #FFFFFF;
  box-shadow: 0 5px 0 var(--c-mid);
  text-align: center;
  transition: translate 350ms var(--lp-spring), rotate 350ms var(--lp-spring), border-color 160ms ease;
}
.lp-page .lp-flock-card:nth-child(odd):hover { translate: 0 -6px; rotate: -2deg; border-color: var(--c); }
.lp-page .lp-flock-card:nth-child(even):hover { translate: 0 -6px; rotate: 2deg; border-color: var(--c); }
.lp-page .lp-flock-perch { position: absolute; top: -56px; left: 50%; display: grid; place-items: center; width: 116px; height: 116px; margin-left: -58px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, var(--c-soft) 0 56%, transparent 57%); line-height: 0; }
.lp-page .lp-flock-card b { display: block; margin-top: 2px; font: 900 21px/1.1 var(--lp-font); color: var(--lp-ink); }
.lp-page .lp-flock-card small { display: block; margin: 4px 0 8px; font: 800 13px/1.2 var(--lp-font); color: var(--c-ink); }
.lp-page .lp-flock-card p { margin: 0; font: 600 14.5px/1.45 var(--lp-font); color: var(--lp-ink-2); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.lp-page .lp-faq { width: min(880px, calc(100% - 2 * var(--lp-gutter))); margin: 0 auto; padding: 88px 0 64px; scroll-margin-top: 80px; }
.lp-page .lp-faq .lp-section-head { margin-bottom: 72px; }
.lp-page .lp-faq-list { position: relative; display: grid; gap: 14px; }
.lp-page .lp-faq-bird { position: absolute; right: 32px; bottom: calc(100% - 16px); z-index: 1; line-height: 0; }
.lp-page .lp-faq-item { position: relative; z-index: 2; border: 2px solid var(--lp-line); border-radius: 22px; background: #FFFFFF; box-shadow: 0 4px 0 var(--lp-line); transition: border-color 160ms ease, box-shadow 160ms ease; }
.lp-page .lp-faq-item[open] { border-color: #A6E37A; box-shadow: 0 4px 0 #A6E37A; }
.lp-page .lp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px 16px 24px; border-radius: 20px; font: 800 19px/1.3 var(--lp-font); color: var(--lp-ink); list-style: none; cursor: pointer; }
.lp-page .lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-page .lp-faq-plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #F0F0F0; transition: transform 320ms var(--lp-spring), background-color 160ms ease; }
.lp-page .lp-faq-plus::before, .lp-page .lp-faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3.5px; margin: -1.75px 0 0 -7px; border-radius: 2px; background: var(--lp-ink-2); }
.lp-page .lp-faq-plus::after { transform: rotate(90deg); }
.lp-page .lp-faq-item[open] .lp-faq-plus { transform: rotate(135deg); background: #2E5BFF; }
.lp-page .lp-faq-item[open] .lp-faq-plus::before, .lp-page .lp-faq-item[open] .lp-faq-plus::after { background: #FFFFFF; }
.lp-page .lp-faq-a { padding: 0 24px 22px; }
.lp-page .lp-faq-a p { margin: 0; font: 600 17px/1.6 var(--lp-font); color: var(--lp-ink-2); }
.lp-page .lp-faq-a a { color: #0A6FAA; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ── Closing scene ─────────────────────────────────────────────────────── */
.lp-page .lp-close { width: min(var(--lp-maxw), calc(100% - 2 * var(--lp-gutter))); margin: 56px auto 0; padding-bottom: 40px; }
.lp-page .lp-close-card { position: relative; isolation: isolate; overflow: hidden; padding: 84px 32px 290px; border-radius: 44px; text-align: center; }
.lp-students .lp-close-card { background: linear-gradient(180deg, #B8E6FF 0%, #DDF4FF 55%, #F2FAFF 100%); }
.lp-growth .lp-close-card { background: linear-gradient(180deg, #FFD3C2 0%, #FFE3E8 50%, #FFF4EE 100%); }
.lp-page .lp-close-sky { position: absolute; inset: 0; z-index: -1; }
.lp-page .lp-close-sky > * { position: absolute; }
.lp-page .lp-sun.is-close { top: -40px; left: 3%; width: 280px; height: 280px; }
.lp-page .lp-cloud.is-ca { top: 46px; right: 6%; width: 190px; animation: lp-drift 30s ease-in-out infinite alternate; }
.lp-page .lp-cloud.is-cb { top: 196px; left: 6%; width: 130px; animation: lp-drift 36s ease-in-out infinite alternate-reverse; }
.lp-page .lp-close .lp-h2 { position: relative; font-size: clamp(2.4rem, 4.8vw, 4rem); }
.lp-page .lp-close .lp-p { position: relative; margin: 0 auto 32px; font-size: 21px; }
.lp-page .lp-close-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 240px; pointer-events: none; }
.lp-page .lp-close-hill { position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; }
.lp-page .lp-close-flock { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(0px, 1.6vw, 20px); pointer-events: auto; }

/* ── With the shared motion script (html.rd-motion, js/landing-motion.js) ──
   Its cascade rule sets the cards' transition; keep the springy hovers. The
   hero gets a CSS-only entrance: the copy rises, the flock pops up out of
   the hill one by one, the stickers and sun follow. Reduced motion never
   sets html.rd-motion. */
html.rd-motion .lp-page .rv-stagger.is-in > :is(.lp-card, .lp-flock-card) {
  transition: opacity 0.7s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), translate 350ms var(--lp-spring), rotate 350ms var(--lp-spring), border-color 160ms ease, box-shadow 160ms ease;
}
@keyframes lp-rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lp-pop-up {
  0% { opacity: 0; transform: translateY(70px) scale(0.6); }
  55% { opacity: 1; transform: translateY(-12px) scale(1.05); }
  78% { transform: translateY(3px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes lp-sticker-in { 0% { opacity: 0; scale: 0.4; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes lp-mound-in { from { transform: translateY(80px); } to { transform: none; } }
@keyframes lp-sun-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
html.rd-motion .lp-page .lp-hero-copy > * { animation: lp-rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.rd-motion .lp-page .lp-hero-copy > :nth-child(2) { animation-delay: 0.1s; }
html.rd-motion .lp-page .lp-hero-copy > :nth-child(3) { animation-delay: 0.2s; }
html.rd-motion .lp-page .lp-hero-copy > :nth-child(4) { animation-delay: 0.3s; }
html.rd-motion .lp-page .lp-mound { animation: lp-mound-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.rd-motion .lp-page .lp-sun.is-halo { animation: lp-sun-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
html.rd-motion .lp-page .lp-hero-flock > .rd-bird { animation: lp-pop-up 0.85s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
html.rd-motion .lp-page .lp-hero-flock > .rd-bird:nth-child(1) { animation-delay: 0.45s; }
html.rd-motion .lp-page .lp-hero-flock > .rd-bird:nth-child(2) { animation-delay: 0.25s; }
html.rd-motion .lp-page .lp-hero-flock > .rd-bird:nth-child(3) { animation-delay: 0.6s; }
html.rd-motion .lp-page .lp-chip { animation: lp-sticker-in 0.6s var(--lp-spring) both, lp-bob 5s ease-in-out infinite; }
html.rd-motion .lp-page .lp-chip.is-a { animation-delay: 0.8s, 0s; }
html.rd-motion .lp-page .lp-chip.is-b { animation-delay: 0.95s, -1.7s; }
html.rd-motion .lp-page .lp-chip.is-c { animation-delay: 1.1s, -3.1s; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lp-page .lp-feat { gap: 48px; }
  .lp-page .lp-flock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-page .lp-path-bird.is-a { left: 0; }
  .lp-page .lp-path-bird.is-b, .lp-page .lp-path-bird.is-c { right: 0; }
}

@media (max-width: 900px) {
  .lp-page .lp-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 40px 0 0; gap: 8px; text-align: center; }
  .lp-page .lp-hero-copy { padding-bottom: 0; }
  .lp-page .lp-lede { margin-inline: auto; }
  .lp-page .lp-hero .lp-cta-row { margin-inline: auto; }
  .lp-page .lp-hero-stage { min-height: 460px; }
  .lp-page .lp-mound { bottom: -120px; height: 260px; }
  .lp-page .lp-hero-flock { bottom: 64px; }
  .lp-page .lp-feat { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 72px 0; }
  .lp-page .lp-feat.is-flip .lp-feat-copy { order: 0; }
  .lp-page .lp-feat-copy { max-width: 640px; }
  .lp-page .lp-trio-grid { grid-template-columns: minmax(0, 1fr); gap: 88px; max-width: 560px; margin: 0 auto; }
  .lp-page .lp-rainbow { bottom: 120px; }
  .lp-page .lp-path-bird { display: none; }
}

@media (max-width: 640px) {
  body.landing-page.rd-site.lp-page { --lp-gutter: 16px; }
  body.landing-page.rd-site.lp-page .landing-nav-inner { height: 64px; }
  body.landing-page.rd-site.lp-page .rd-nav-btn { min-height: 42px; padding: 0 14px; font-size: 14px; letter-spacing: 0.04em; }
  body.landing-page.rd-site.lp-page .landing-brand .brand-logo { height: 24px; }
  body.landing-page.rd-site.lp-page .rd-topbar { flex-wrap: nowrap; gap: 10px; padding: 8px 14px; font-size: 13.5px; text-align: left; }
  body.landing-page.rd-site.lp-page .rd-topbar-chip { flex: none; }
  .lp-page .lp-h1 { font-size: 2.55rem; }
  .lp-page .lp-h2 { font-size: 2.05rem; }
  .lp-page .lp-lede { font-size: 1.125rem; margin-bottom: 24px; }
  .lp-page .lp-p { font-size: 17.5px; }
  .lp-page .lp-points li { font-size: 16px; }
  .lp-page .lp-hero .lp-cta-row { width: 100%; gap: 14px; }
  .lp-page .lp-btn.is-xl { min-height: 56px; padding: 0 20px; font-size: 18.7px; }

  /* Phones: the flock comes first, standing on a cloud under the sun. */
  .lp-page .lp-hero-inner { display: flex; flex-direction: column; padding: 4px 0 150px; gap: 4px; }
  .lp-page .lp-hero-stage { order: -1; width: 100%; min-height: 258px; }
  .lp-page .lp-mound { display: none; }
  .lp-page .lp-perch-cloud { display: block; position: absolute; left: 50%; bottom: 0; width: 340px; margin-left: -170px; filter: drop-shadow(0 12px 16px rgba(30, 110, 170, 0.14)); }
  .lp-growth .lp-perch-cloud { filter: drop-shadow(0 12px 16px rgba(200, 90, 130, 0.14)); }
  .lp-page .lp-perch-cloud > svg { display: block; width: 100%; height: auto; }
  .lp-page .lp-hero-flock { bottom: 56px; }
  .lp-page .lp-hero-flock .rd-bird.is-orbi > svg { width: 176px; height: 176px; }
  .lp-page .lp-hero-flock .rd-bird.is-side > svg { width: 96px; height: 96px; }
  .lp-page .lp-hero-flock .rd-bird.is-side { margin: 0 -18px 6px; }
  .lp-page .lp-sun.is-halo { top: -6px; width: 280px; height: 280px; margin-left: -140px; }
  .lp-page .lp-chip { padding: 7px 11px; font-size: 13.5px; border-radius: 13px; }
  .lp-page .lp-chip .lp-ico { width: 19px; height: 19px; }
  .lp-page .lp-chip.is-a { top: 18px; left: 0; }
  .lp-page .lp-chip.is-b { top: 58px; right: 0; }
  .lp-page .lp-chip.is-c, .lp-page .lp-chip.is-d { display: none; }
  .lp-page .lp-ground { height: 48px; }
  .lp-page .lp-cloud.is-a { width: 120px; top: 150px; left: -30px; }
  .lp-page .lp-cloud.is-b { width: 100px; left: auto; right: -20px; top: 196px; }
  .lp-page .lp-cloud.is-c, .lp-page .lp-cloud.is-far, .lp-page .lp-birds-far, .lp-page .lp-plane { display: none; }
  .lp-page .lp-range.is-far { height: 230px; bottom: 90px; }
  .lp-page .lp-range.is-mid { height: 180px; bottom: 60px; }
  .lp-page .lp-hills.is-back { height: 160px; bottom: 34px; }
  .lp-page .lp-hills.is-front { height: 180px; }
  .lp-page .lp-rainbow { width: 480px; height: 240px; margin-left: -240px; bottom: 120px; }

  .lp-page .lp-path-sec { padding: 56px 0 32px; }
  .lp-page .lp-path { gap: 24px; padding-inline: 24px; }
  .lp-page .lp-path-step { translate: calc(var(--x) * 0.22) 0; }
  .lp-page .lp-node { gap: 16px; }
  .lp-page .lp-node-btn { width: 72px; height: 66px; box-shadow: 0 7px 0 var(--c-deep); }
  .lp-page .lp-node-emoji { font-size: 30px; }
  .lp-page .lp-node-label { padding: 10px 13px; }
  .lp-page .lp-node-label b { font-size: 16.5px; }
  .lp-page .lp-node-label small { font-size: 13.5px; }
  .lp-page .lp-path-step:first-child { margin-top: 30px; }

  .lp-page .lp-feat { gap: 56px; padding: 56px 0; }
  .lp-page .lp-stage { padding: 72px 14px 22px; border-radius: 32px; }
  .lp-page .lp-perch > .rd-bird > svg { width: 96px; height: 96px; }
  .lp-page .lp-perch.is-right { right: 18px; }
  .lp-page .lp-perch.is-left { left: 18px; }
  .lp-page .lp-mock { padding: 18px; }
  .lp-page .lp-focus-main { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; text-align: center; }
  .lp-page .lp-focus-tree svg { width: 132px; }
  .lp-page .lp-focus-time { font-size: 54px; }
  .lp-page .lp-flags { justify-content: center; }
  .lp-page .lp-seg span { font-size: 12.5px; padding: 9px 2px; }
  .lp-page .lp-quiz-q { font-size: 20px; }
  .lp-page .lp-quiz-foot { flex-direction: column; align-items: stretch; }
  .lp-page .lp-reel-body { padding: 18px 64px 20px 18px; }
  .lp-page .lp-reel-body > b { font-size: 22px; }
  .lp-page .lp-home-eff b { font-size: 24px; }
  .lp-page .lp-eff.is-big { width: 84px; height: 84px; }
  .lp-page .lp-eff.is-big b { font-size: 26px; }
  .lp-page .lp-tiles > span { padding: 10px 4px; }
  .lp-page .lp-tiles small { font-size: 11px; }
  .lp-page .lp-care { margin: -12px auto 32px; font-size: 15px; }
  .lp-page .lp-friends-band .lp-feat { padding: 48px 0; }

  .lp-page .lp-band { margin: 48px 0; }
  .lp-page .lp-wave { height: 30px; }
  .lp-page .lp-streak-band .lp-feat { padding: 48px 0; }
  .lp-page .lp-trio { padding: 64px 0 48px; }
  .lp-page .lp-section-head { margin-bottom: 72px; }
  .lp-page .lp-trio-grid { gap: 80px; }
  .lp-page .lp-card-bird > .rd-bird > svg { width: 88px; height: 88px; }
  .lp-page .lp-card-bird { top: -58px; }

  .lp-page .lp-flock-band { margin: 72px 0; }
  .lp-page .lp-flock { width: 100%; padding: 56px 0 40px; }
  .lp-page .lp-flock .lp-section-head { padding: 0 var(--lp-gutter); margin-bottom: 16px; }
  .lp-page .lp-flock-grid { display: flex; gap: 14px; padding: 66px var(--lp-gutter) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--lp-gutter); scrollbar-width: none; }
  .lp-page .lp-flock-grid::-webkit-scrollbar { display: none; }
  .lp-page .lp-flock-card { flex: none; width: 214px; scroll-snap-align: start; }

  .lp-page .lp-faq { padding: 64px 0 48px; }
  .lp-page .lp-faq .lp-section-head { margin-bottom: 92px; }
  .lp-page .lp-faq-bird > .rd-bird > svg { width: 88px; height: 88px; }
  .lp-page .lp-faq-bird { right: 18px; bottom: calc(100% - 12px); }
  .lp-page .lp-faq-item summary { padding: 14px 16px 14px 18px; font-size: 17px; }
  .lp-page .lp-faq-a { padding: 0 18px 18px; }
  .lp-page .lp-faq-a p { font-size: 16px; }

  .lp-page .lp-close-card { padding: 64px 18px 236px; border-radius: 32px; }
  .lp-page .lp-close .lp-p { font-size: 18px; }
  .lp-page .lp-close-ground { height: 190px; }
  .lp-page .lp-close-hill { height: 120px; }
  .lp-page .lp-close-flock { bottom: 48px; gap: 0; }
  .lp-page .lp-close-flock .rd-bird:nth-child(1), .lp-page .lp-close-flock .rd-bird:nth-child(7) { display: none; }
  .lp-page .lp-close-flock .rd-bird > svg { width: 66px; height: 66px; }
  .lp-page .lp-close-flock .rd-bird:nth-child(4) > svg { width: 108px; height: 108px; }
  .lp-page .lp-sun.is-close { width: 190px; height: 190px; left: -50px; top: -50px; }
  .lp-page .lp-cloud.is-ca { width: 120px; top: 20px; right: -10px; }
  .lp-page .lp-cloud.is-cb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-page .lp-sun::before, .lp-page .lp-spark, .lp-page .lp-cloud, .lp-page .lp-plane, .lp-page .lp-birds-far,
  .lp-page .lp-petals i, .lp-page .lp-chip, .lp-page .lp-floaty, .lp-page .lp-planet, .lp-page .lp-moon,
  .lp-page .lp-fuse i, .lp-page .lp-canopy, .lp-page .lp-node-start, .lp-page .lp-reel-art.is-mind i { animation: none !important; }
  .lp-page .lp-petals { display: none; }
  .lp-page .lp-card, .lp-page .lp-flock-card, .lp-page .lp-node-btn, .lp-page .lp-node-label { transition: none; }
}