/* Lionna Studios brand layer.
   Loaded after lionna-base.css (the original stylesheet with the palette swapped). */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/jost-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/jost-latin-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --burgundy: #6b2938;
  --burgundy-deep: #57202d;
  --ivory: #f4efe7;
  --espresso: #261e1c;
  --blush: #dfc9c7;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The original stylesheet sets smooth scrolling on the whole document. That stops the scroll
   animations from measuring section positions correctly when images load late, which left the
   hero stuck in its scrolled-away state. Menu clicks still scroll smoothly on their own. */
html { scroll-behavior: auto !important; }

/* The original hides horizontal overflow on html and body, which quietly turns body into its
   own scroll box and stops anything from sticking to the screen. Clipping does the same job
   without that side effect. */
html, body { overflow-x: clip !important; }

body { background: var(--ivory); color: var(--espresso); -webkit-font-smoothing: antialiased; }
#root > div { overflow-x: clip; }

/* Jost runs lighter than the original system font, so the thin weight moves up one step. */
.font-light { font-weight: 400; }
.font-bold { font-weight: 600; }
h1, h2, h3 { letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }

/* Small print in the original sat at 50 to 60 percent opacity, which is hard to read on ivory. */
.text-\[\#261e1c\]\/50 { color: rgb(38 30 28 / 0.68); }
.text-\[\#261e1c\]\/60 { color: rgb(38 30 28 / 0.72); }

:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

/* Until the entrance choreography has taken over, keep the page from flashing in its final state. */
html.lio-js:not(.lio-ready) #root { opacity: 0; }

/* ---------- brand ---------- */
.lio-brand { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; border-radius: 0.5rem; }
.lio-brand-mark { height: 30px; width: auto; }
.lio-brand-word { height: 32px; width: auto; }

nav { transition: translate 0.5s var(--ease); }
nav.lio-nav-hidden { translate: 0 -100%; }

.lio-c { color: var(--burgundy); }
.lio-dot { background: var(--burgundy); }

/* ---------- actions ---------- */
.lio-btn {
  background: var(--burgundy);
  color: var(--ivory);
  box-shadow: 0 16px 34px -16px rgb(107 41 56 / 0.6);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.lio-btn:hover { background: var(--burgundy-deep); box-shadow: 0 22px 40px -16px rgb(107 41 56 / 0.7); }
.lio-btn-light {
  background: var(--ivory);
  color: var(--burgundy);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.lio-btn-light:hover { background: #fbf8f3; transform: translateY(-2px); }
.lio-btn-light:active { transform: scale(0.98); }
.lio-pill { background: var(--burgundy); color: var(--ivory); }
.lio-urgent { background: var(--blush); color: var(--burgundy); }

/* ---------- headline lines ---------- */
.lio-line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.06em; }
.lio-line-in { display: inline-block; }
.lio-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 3px;
  border-radius: 99px;
  background: var(--burgundy);
  opacity: 0.35;
  transform-origin: left center;
}
.lio-w { display: inline-block; }

/* ---------- panels ---------- */
.lio-panel { background: var(--burgundy); box-shadow: 0 30px 60px -30px rgb(107 41 56 / 0.55); }
.lio-panel h3 { color: var(--ivory); }
.lio-panel p { color: rgb(244 239 231 / 0.84); }

.lio-panel-light { background: var(--blush); }
.lio-panel-light .text-6xl { font-variant-numeric: tabular-nums; }
.lio-panel-light p { text-transform: none; }

.lio-tile { background: var(--blush); }
.lio-tile-num { color: var(--burgundy); }
.lio-tile-label { color: rgb(38 30 28 / 0.76); }
.lio-tile--solid { background: var(--burgundy); }
.lio-tile--solid .lio-tile-num { color: var(--ivory); }
.lio-tile--solid .lio-tile-label { color: rgb(244 239 231 / 0.86); }

.lio-icon { background: var(--blush) !important; }
.lio-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--blush);
  color: var(--burgundy);
  font-size: 1.1rem;
  font-weight: 500;
}

#earnings .text-3xl, #stories .text-2xl { font-variant-numeric: tabular-nums; }

/* ---------- closing section: the page turns burgundy ----------
   --t runs from 0 (ivory) to 1 (burgundy). It is 1 by default and is scrubbed on scroll.
   A soft glow swells behind the headline. */
.lio-final {
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  --t: 1;
  --fg: color-mix(in srgb, var(--ivory) calc(var(--t) * 100%), var(--espresso));
}
.lio-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--burgundy);
  opacity: var(--t);
}
.lio-final-body { position: relative; }
.lio-final-sun {
  position: absolute;
  left: 50%;
  top: 2rem;
  width: min(120vw, 1150px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(244 239 231 / 0.17) 0%, rgb(244 239 231 / 0.06) 46%, transparent 70%);
  opacity: var(--t);
  pointer-events: none;
}
.lio-on-dark { color: var(--fg); }
.lio-soft { opacity: 0.82; }
.lio-softer { opacity: 0.66; }

/* Headline at poster scale, second line in italic blush. */
.lio-final h2 { font-size: clamp(3.1rem, 9.2vw, 8.75rem); line-height: 1; letter-spacing: -0.03em; }
.lio-final h2 .lio-line { padding-bottom: 0.2em; margin-bottom: -0.12em; }
.lio-final h2 .lio-line:last-child .lio-line-in {
  font-style: italic;
  font-weight: 400;
  padding-right: 0.08em;
  color: color-mix(in srgb, var(--blush) calc(var(--t) * 100%), var(--burgundy));
}

/* The promise stands on its own: no box, one enormous number. */
.lio-final .lio-panel-light { background: transparent; box-shadow: none; padding-inline: 0; max-width: none; }
.lio-final .lio-panel-light h3 { color: var(--fg); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.9rem); margin-bottom: 0; }
.lio-final .lio-panel-light .text-6xl {
  color: var(--fg);
  font-size: clamp(5.5rem, 24vw, 21rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-bottom: 0.1em;
  transform-origin: center bottom;
}
.lio-final .lio-panel-light p { color: var(--fg); opacity: 0.9; margin: 0 auto 3.5rem; max-width: 30em; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.45; }
.lio-final .lio-panel-light .font-medium { color: var(--fg); }
.lio-final .lio-panel-light .rounded-full { background: rgb(244 239 231 / 0.14); }
.lio-final .lio-panel-light svg { color: var(--fg); }



/* ---------- functional colours ----------
   Green means growth and money, gold means rating. Slightly deeper than the
   stock tones so they read clearly on ivory. */
.text-green-500, .text-green-600 { color: #1f8a5b; }
.text-green-700 { color: #17694a; }
.bg-green-400 { background-color: #2fa873; }
.text-yellow-400 { color: #e0a526; }

/* ---------- hero: draped satin in three depths ----------
   Back and middle bands sit behind the copy, the front band in front of it.
   On scroll each depth travels at its own speed, so the copy sinks behind the front band. */
.lio-px {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 30%, #3a161d 0%, #24100f 60%, #1a0c0c 100%);
}
.lio-px-glow {
  position: absolute;
  left: 50%;
  top: 36%;
  width: min(95vw, 980px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(181 95 121 / 0.34) 0%, transparent 64%);
}
.lio-silk {
  position: absolute;
  left: -4%;
  top: -17.5%;
  width: 108%;
  max-width: none;
  height: 117.5%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}
.lio-silk-back { opacity: 0.55; filter: blur(3px); }
.lio-silk-mid { opacity: 0.9; filter: blur(1px); }
.lio-silk-front { z-index: 12; }
/* A band of light drifts slowly across the fabric. */
.lio-px-shimmer {
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg, transparent 38%, rgb(244 239 231 / 0.13) 50%, transparent 62%);
  mix-blend-mode: soft-light;
  animation: lio-shimmer 9s ease-in-out infinite;
}
@keyframes lio-shimmer { 0% { transform: translateX(-45%); } 100% { transform: translateX(45%); } }

/* light copy on the dark stage */
#top [class*="text-[#261e1c]"] { color: var(--ivory); }
#top [class*="text-[#261e1c]/"] { color: rgb(244 239 231 / 0.86); }
#top .lio-c { color: var(--blush); }
#top .lio-underline { background: var(--blush); opacity: 0.55; }
#top .lio-btn { background: var(--ivory); color: var(--burgundy); box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.6); }
#top .lio-btn:hover { background: #fffdf9; }
#top h1 + p { max-width: 36rem; }
/* the two floating figures stay light cards with dark text */
#top > .z-20 [class*="text-[#261e1c]"] { color: var(--espresso); }
#top > .z-20 [class*="text-[#261e1c]/"] { color: rgb(38 30 28 / 0.72); }
/* The front band covers the bottom of the hero: up to about 15% of its height or 9% of its width,
   whichever is larger. Reserve more than that below the copy so it never reaches the button. */
#top > .z-10 { padding-top: 6rem; padding-bottom: max(19vh, 11vw); }

/* =====================================================================
   Bold pass: fewer boxes, bigger statements, light and dark in rhythm.
   ===================================================================== */

/* Poster-size section headlines. The accent phrase is the same typeface in italic. */
#root section:not(#top):not(.lio-final) h2 {
  font-size: clamp(2.5rem, 6.2vw, 5.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  padding-bottom: 0.12em;
}
.lio-em { font-style: italic; color: var(--burgundy); padding-right: 0.06em; }
#root section:not(#top) h2 + p { font-size: clamp(1.1rem, 1.5vw, 1.4rem); }

/* ---------- marquee: what the agency does, right under the hero ---------- */
.lio-marquee { background: var(--burgundy-deep); color: var(--ivory); overflow: hidden; white-space: nowrap; padding: 1.3rem 0 1.5rem; }
.lio-marquee-track { display: inline-flex; animation: lio-marquee 40s linear infinite; }
.lio-marquee span { font-size: clamp(1.5rem, 3vw, 2.6rem); font-style: italic; line-height: 1.2; }
@keyframes lio-marquee { to { transform: translateX(-50%); } }

/* ---------- life: what the income is for ----------
   A gallery of tall photographs. With motion on, the section holds the screen and the
   row travels sideways as you scroll. Without motion it is a row you can swipe. */
.lio-life { background: linear-gradient(180deg, var(--burgundy-deep) 0%, #1d1513 22rem); color: var(--ivory); overflow: hidden; }
.lio-life-stage { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: calc(64px + 1.5rem) 0 2rem; }
.lio-life-head { padding-inline: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem)); margin-bottom: clamp(1.5rem, 4vh, 3rem); }
#root #life h2 { color: var(--ivory); font-size: clamp(2.3rem, 5.2vw, 4.75rem); }
.lio-life .lio-em { color: var(--blush); }
.lio-life-lead { margin-top: 0.75rem; font-size: clamp(1.1rem, 1.6vw, 1.45rem); color: rgb(244 239 231 / 0.78); }
.lio-life-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding-inline: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lio-life-track::-webkit-scrollbar { display: none; }
html.lio-js .lio-life-track { width: max-content; overflow: visible; padding-left: 58vw; padding-right: 12vw; }
.lio-life-fig { flex: 0 0 auto; width: min(40vh, 74vw); margin: 0; scroll-snap-align: center; }
.lio-life-fig:nth-child(even) { margin-top: 6vh; }
.lio-life-img { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 1.75rem; background: #2a1d1c; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7); }
.lio-life-img img { width: 118%; max-width: none; height: 100%; margin-left: -9%; object-fit: cover; }
.lio-life-fig figcaption { margin-top: 0.9rem; font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-style: italic; line-height: 1.25; color: var(--ivory); }

/* ---------- dark sections ---------- */
.lio-dark {
  background:
    radial-gradient(75% 55% at 50% 0%, rgb(107 41 56 / 0.6), transparent 72%),
    #1d1513;
  color: var(--ivory);
}
.lio-dark [class*="text-[#261e1c]"] { color: var(--ivory); }
.lio-dark [class*="text-[#261e1c]/"] { color: rgb(244 239 231 / 0.76); }
.lio-dark .lio-em { color: var(--blush); }
.lio-dark .lio-btn { background: var(--ivory); color: var(--burgundy); box-shadow: none; }
.lio-dark .lio-btn:hover { background: #fffdf9; }
.lio-dark .bg-white\/50 { background: rgb(244 239 231 / 0.1); }
/* light cards inside a dark section keep their dark text */
.lio-dark .bg-white\/90 [class*="text-[#261e1c]"] { color: rgb(38 30 28 / 0.78); }

/* ---------- New to OnlyFans: numbered steps instead of six equal cards ---------- */
/* The section after the gallery arrives as a rounded sheet that slides over the dark stage. */
#getting-started { position: relative; z-index: 2; margin-top: -3rem; border-radius: 3rem 3rem 0 0; background: var(--ivory); }
#getting-started .grid { counter-reset: step; gap: 0 2.5rem; margin-top: 4rem; text-align: left; }
#getting-started .grid > div {
  counter-increment: step;
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid rgb(38 30 28 / 0.16);
  padding: 1.6rem 0 2.6rem;
}
#getting-started .grid > div:hover { box-shadow: none; transform: none; }
#getting-started .grid > div > svg { display: none; }
#getting-started .grid > div::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 0.9rem;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  font-style: italic;
  line-height: 1;
  color: var(--burgundy);
}
#getting-started h4 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.5rem; }
#getting-started .grid p { font-size: 1.05rem; line-height: 1.5; }

/* ---------- Results: a night-time showcase for the payout screens ---------- */
#earnings .md\:grid-cols-3 > div > div { box-shadow: 0 40px 90px -30px rgb(107 41 56 / 0.9); border: 0; }
#earnings .p-12 { background: none; border-top: 1px solid rgb(244 239 231 / 0.16); border-radius: 0; padding: 4rem 0 0; }
#earnings .p-12 .text-3xl { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 0.6rem; }
#earnings .p-12 .w-12 { display: none; }
/* three figures side by side on every screen size */
#earnings .p-12 .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#earnings .p-12 .text-sm { font-size: 1.05rem; }

/* ---------- Testimonials: flat panels, larger quotes ---------- */
#stories { background: var(--ivory); }
#stories .md\:grid-cols-3 > div { background: var(--blush); box-shadow: none; border: 0; border-radius: 1.75rem; }
#stories .md\:grid-cols-3 > div:nth-child(2) { background: #fbf8f3; }
#stories .md\:grid-cols-3 .italic { font-size: 1.22rem; line-height: 1.45; }

/* ---------- About: cinema section, the photograph leads ---------- */
#about .lg\:grid-cols-2 > div:last-child > div:first-child { box-shadow: 0 50px 120px -30px rgb(107 41 56 / 0.95); border: 0; }
@media (min-width: 1024px) {
  #about .lg\:grid-cols-2 { grid-template-columns: 0.95fr 1.05fr; }
}

/* ---------- Plateau: four large panels, two of them in burgundy ---------- */
#plateau { background: #efe5df; }
#plateau .md\:grid-cols-2 > div { background: #fbf8f3; box-shadow: none; border: 0; border-radius: 2rem; padding: 2.5rem; }
#plateau .md\:grid-cols-2 > div:nth-child(1),
#plateau .md\:grid-cols-2 > div:nth-child(4) { background: var(--burgundy); }
#plateau .md\:grid-cols-2 > div:nth-child(1) [class*="text-[#261e1c]"],
#plateau .md\:grid-cols-2 > div:nth-child(4) [class*="text-[#261e1c]"] { color: var(--ivory); }
#plateau .md\:grid-cols-2 > div:nth-child(1) [class*="text-[#261e1c]/"],
#plateau .md\:grid-cols-2 > div:nth-child(4) [class*="text-[#261e1c]/"] { color: rgb(244 239 231 / 0.78); }
#plateau .md\:grid-cols-2 > div:nth-child(1) .text-green-500,
#plateau .md\:grid-cols-2 > div:nth-child(4) .text-green-500 { color: #8fe0b7; }
#plateau .md\:grid-cols-2 h3 { font-size: 1.65rem; line-height: 1.15; margin-bottom: 0.4rem; }

/* 3D tilt: each panel leans toward the pointer and a soft light follows it.
   Uses the separate rotate / translate / scale properties so it never fights the
   transform that the original hover animation sets on the same element. */
#plateau .md\:grid-cols-2 { perspective: 1400px; }
#plateau .md\:grid-cols-2 > div {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: rotate 0.7s var(--ease), scale 0.7s var(--ease), box-shadow 0.7s var(--ease);
  will-change: rotate;
}
#plateau .md\:grid-cols-2 > div.is-tilting { transition: rotate 0.12s linear, scale 0.4s var(--ease), box-shadow 0.4s var(--ease); scale: 1.025; box-shadow: 0 50px 90px -40px rgb(38 30 28 / 0.55); }
#plateau .md\:grid-cols-2 > div::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(34rem circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.28), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
#plateau .md\:grid-cols-2 > div.is-tilting::after { opacity: 1; }
#plateau .md\:grid-cols-2 .items-center.space-x-3 { align-items: flex-start; }

/* ---------- questions ---------- */
.lio-faq { background: var(--ivory); }
.lio-faq-list { display: grid; gap: 0.75rem; max-width: 46rem; margin: 3.5rem auto 0; }
.lio-faq details { border-radius: 1.25rem; background: rgb(223 201 199 / 0.4); transition: background-color 0.4s var(--ease); }
.lio-faq details[open] { background: var(--blush); }
.lio-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 1.5rem;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  border-radius: 1.25rem;
}
.lio-faq summary::-webkit-details-marker { display: none; }
.lio-faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--burgundy), var(--burgundy)) center / 100% 2px no-repeat,
    linear-gradient(var(--burgundy), var(--burgundy)) center / 2px 100% no-repeat;
  transition: transform 0.45s var(--ease);
}
.lio-faq details[open] summary::after { transform: rotate(135deg); }
.lio-faq details p { padding: 0 1.5rem 1.5rem; max-width: 38em; color: rgb(38 30 28 / 0.8); line-height: 1.6; }

/* Placeholder text that still needs real information from the owner. Remove once filled in. */
.lio-todo { background: #fff3b0; color: #5c4400 !important; border-radius: 0.5rem; padding: 0.6rem 0.8rem !important; margin: 0 1.5rem 1.5rem; }

/* ---------- footer ---------- */
.lio-footer { background: var(--ivory); padding: 3rem 0 2.5rem; }
.lio-footer > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; }
.lio-footer-word { height: 44px; width: auto; }
.lio-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.lio-footer-links a { color: var(--espresso); opacity: 0.8; text-decoration: none; padding: 0.4rem 0; }
.lio-footer-links a:hover { opacity: 1; text-decoration: underline; }
.lio-footer-note { width: 100%; font-size: 0.95rem; color: rgb(38 30 28 / 0.72); }

/* ---------- legal pages ---------- */
.lio-legal { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; font-size: 1.08rem; line-height: 1.65; }
.lio-legal header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3.5rem; }
.lio-legal header img { height: 44px; width: auto; }
.lio-legal header a { color: var(--burgundy); }
.lio-legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 400; line-height: 1.1; margin: 0 0 1.5rem; }
.lio-legal h2 { font-size: 1.4rem; font-weight: 500; margin: 2.5rem 0 0.6rem; }
.lio-legal p, .lio-legal ul { margin: 0 0 1rem; }
.lio-legal ul { padding-left: 1.2rem; list-style: disc; }
.lio-legal a[href^="mailto"] { color: var(--burgundy); }
.lio-legal mark { background: #fff3b0; color: #5c4400; border-radius: 0.3rem; padding: 0.1rem 0.35rem; }
.lio-draft { background: #fff3b0; color: #5c4400; border-radius: 0.75rem; padding: 1rem 1.2rem; margin-bottom: 2.5rem; }

/* Short laptop screens: a slightly smaller headline and tighter gaps keep the button and its small print on the first screen. */
@media (min-width: 768px) and (max-height: 820px) {
  #top > .z-10 { padding-top: 5.25rem; }
  #top h1 { font-size: 3.6rem; margin-bottom: 1.25rem; }
  #top .mb-12 { margin-bottom: 1.75rem; }
  #top .mb-8 { margin-bottom: 1.25rem; }
}

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  /* Phones: the two floating figures step aside so the copy and button fit the screen. */
  #top { align-items: flex-start; }
  #top > .z-20 { display: none; }
  #top > .z-10 { padding-top: 6.5rem; padding-bottom: 24vh; }
  #getting-started { margin-top: -2rem; border-radius: 2rem 2rem 0 0; }
  #top .mb-12 { margin-bottom: 1.5rem; }
  #top .mb-8 { margin-bottom: 1.1rem; }
  #earnings .p-12 .grid { gap: 1rem; }
  #earnings .p-12 .text-3xl { font-size: 2.1rem; }
  #earnings .p-12 .text-sm { font-size: 0.9rem; }
  /* Long card stacks become swipeable rows, the same pattern the payout screenshots already use. */
  #plateau .md\:grid-cols-2,
  #stories .md\:grid-cols-3 {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -1.5rem;
    padding: 0.5rem 1.5rem 1.5rem;
    scrollbar-width: none;
  }
  #plateau .md\:grid-cols-2::-webkit-scrollbar,
  #stories .md\:grid-cols-3::-webkit-scrollbar { display: none; }
  #plateau .md\:grid-cols-2 > div,
  #stories .md\:grid-cols-3 > div { flex: 0 0 86%; scroll-snap-align: center; }
  #plateau .md\:grid-cols-2 { margin-bottom: 0; }
  #stories .md\:grid-cols-3 { margin-bottom: 0; }
  /* The six starter cards sit two to a row. */
  #getting-started .grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  #getting-started .grid { gap: 0 1.25rem; margin-top: 2.5rem; }
  #getting-started .grid > div { padding: 1.1rem 0 1.8rem; }
  #plateau .md\:grid-cols-2 > div { padding: 1.75rem; }
  .lio-life-fig { width: min(36vh, 68vw); }
  .lio-life-img { border-radius: 1.25rem; }
  /* Keep the closing button on one line. */
  #application .lio-btn { padding: 1.1rem 1.6rem; font-size: 1.05rem; white-space: nowrap; }
  #application .p-12 { padding: 2rem 1.25rem; }
  .lio-final .lio-panel-light p { margin-bottom: 2.5rem; }
}