/* Homepage. Content is held in a centered column at every width
   (the clone's hero split apart on wide screens and crowded the header on narrow ones). */

.lp-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(var(--k-snow));
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.lp-header.is-scrolled {
  border-bottom-color: rgb(var(--k-line));
}
.lp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 72px;
}
/* The right-hand controls may shrink (the language label truncates) rather than push the row
   past a small phone's edge. */
.lp-lang {
  min-width: 0;
}
.lp-lang {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* sun/moon theme toggle: shows the mode you'd switch TO */
.lp-theme-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 2px solid transparent;
  border-radius: 12px;
  color: rgb(var(--k-hare-text));
  font-size: 22px;
  cursor: pointer;
}
@media (hover: hover) {
  .lp-theme-button:hover {
  border-color: rgb(var(--k-line));
  color: rgb(var(--k-ink-soft));
}
}
.lp-theme-sun { display: none !important; }
html[data-theme="dark"] .lp-theme-sun { display: inline-flex !important; }
html[data-theme="dark"] .lp-theme-moon { display: none !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lp-theme-sun { display: inline-flex !important; }
  html:not([data-theme="light"]) .lp-theme-moon { display: none !important; }
}
.lp-lang-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  background: none;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;
  font-family: "din-round-bold", sans-serif;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgb(var(--k-hare-text));
  cursor: pointer;
}
.lp-lang-button[aria-expanded="true"] {
  border-color: rgb(var(--k-line));
  color: rgb(var(--k-ink-soft));
}
@media (hover: hover) {
  .lp-lang-button:hover {
  border-color: rgb(var(--k-line));
  color: rgb(var(--k-ink-soft));
}
}
.lp-lang-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-lang-button b {
  color: rgb(var(--k-ink-soft));
}
/* The two-letter code is for the narrowest phones only (30 Sep: "ENG…" at 320px): there the
   language's name is still read out, just not shown. */
.lp-lang-code { display: none; }
@media (max-width: 360px) {
  .lp-lang-code { display: inline; }
  .lp-lang-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.lp-lang-icon,
.lp-caret {
  font-size: 18px;
}
.lp-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  list-style: none;
  margin: 0;
  padding: 8px;
  min-width: 190px;
  background: rgb(var(--k-snow));
  border: 2px solid rgb(var(--k-line));
  border-radius: 16px;
  box-shadow: 0 4px 0 rgb(var(--k-line));
}
.lp-lang-menu button {
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: "din-round-bold", sans-serif;
  font-size: 16px;
  cursor: pointer;
}
@media (hover: hover) {
  .lp-lang-menu button:hover {
  background: rgb(var(--k-polar));
}
}

/* ---------- hero ---------- */
.lp-hero {
  padding: 24px 0 48px;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  min-height: min(620px, calc(100vh - 150px));
  min-height: min(620px, calc(100svh - 150px));
}
.lp-scene {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 0.92;
  margin: 0 auto;
}
.lp-scene .vcast {
  position: absolute;
  bottom: 6%;
  height: 58%;
}
.lp-scene .lp-ground {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 3%;
  height: 11%;
  border-radius: 50%;
  background: rgb(var(--k-green-light));
}
.lp-scene .lp-float {
  position: absolute;
}
.lp-hero-copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-hero-copy h1 {
  font-family: "din-round-bold", sans-serif;
  font-size: 32px;
  line-height: 1.25;
  color: rgb(var(--k-ink));
  margin: 0 0 32px;
  max-width: 480px;
}
.lp-hero-buttons {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 340px;
}
.lp-practice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  font-size: 15px;
  color: rgb(var(--k-ink-soft));
}
.lp-practice [data-icon] {
  color: rgb(var(--k-green));
  font-size: 20px;
}

/* ---------- topics ---------- */
.lp-topics {
  border-top: 2px solid rgb(var(--k-line));
  border-bottom: 2px solid rgb(var(--k-line));
}
.lp-topics-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 76px;
}
.lp-topics-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: rgb(var(--k-hare-text));
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (hover: hover) {
  .lp-topics-arrow:hover {
  background: rgb(var(--k-polar));
}
}
.lp-topics-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
/* The strip scrolls with a finger (the founder, 6 Oct, on an iPhone: "if you just
   put your finger on it and went back-and-forth, but right now you have to click
   the arrows"). It used to be overflow:hidden with a translateX, so there was
   nothing for a touch to grab: the arrows were the only way through.
   Native scrolling gives the drag, the flick and its momentum, the trackpad and
   the keyboard for free, and the arrows now drive the same scroll. */
.lp-topics-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  /* A horizontal drag inside the strip must not become the browser's
     swipe-back gesture on iOS, which would leave the page mid-swipe. */
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* the arrows already say it scrolls */
  -ms-overflow-style: none;
}
.lp-topics-viewport::-webkit-scrollbar {
  display: none;
}
.lp-topics-list {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-topics-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  color: rgb(var(--k-ink-soft));
  font-family: "din-round-bold", sans-serif;
  font-size: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
@media (hover: hover) {
  .lp-topics-list a:hover {
  color: rgb(var(--k-ink));
}
}

/* ---------- features ---------- */
.lp-feature {
  padding: 88px 0;
}
.lp-feature-alt {
  background: rgb(var(--k-polar));
}
.lp-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.lp-reverse .lp-feature-copy {
  order: 2;
}
.lp-feature-copy h2 {
  font-family: "feather-bold", sans-serif;
  font-size: 44px;
  line-height: 1.1;
  color: rgb(var(--k-green-ink));
  margin: 0 0 18px;
}
.lp-feature-copy p {
  font-size: 19px;
  line-height: 1.55;
  color: rgb(var(--k-ink-soft));
  margin: 0;
  max-width: 460px;
}
.lp-demo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 330px;
  padding-left: 90px;
}
.lp-demo > .kcard {
  width: 100%;
  max-width: 380px;
  position: relative;
  z-index: 2;
}
.lp-demo-cast {
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 250px;
  z-index: 3;
}
.lp-demo-cast .vcast {
  height: 100%;
}
.lp-demo-cast-right {
  left: auto;
  right: -30px;
}
.lp-demo:has(.lp-demo-cast-right) {
  padding-left: 0;
  padding-right: 110px;
}

/* wallet */
.lp-wallet-top {
  display: flex;
  justify-content: space-between;
}
.lp-wallet-amount {
  font-family: "feather-bold", sans-serif;
  font-size: 46px;
  color: rgb(var(--k-ink));
  margin: 14px 0 2px;
  font-variant-numeric: tabular-nums;
}
.lp-wallet-note {
  font-size: 14px;
  color: rgb(var(--k-ink-soft));
  margin: 0 0 16px;
}
.lp-wallet-rows {
  display: grid;
  gap: 12px;
}
.lp-wallet-row {
  display: grid;
  grid-template-columns: 36px 110px 1fr;
  align-items: center;
  gap: 12px;
  font-family: "din-round-bold", sans-serif;
  font-size: 15px;
}
.lp-bar {
  height: 14px;
  border-radius: 8px;
  background: rgb(var(--k-line));
  overflow: hidden;
}
.lp-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 8px;
  background: rgb(var(--k-green));
  transform-origin: left center;
}

/* mini quiz */
.lp-quiz-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.lp-quiz-face .vface {
  width: 84px;
  height: 84px;
}
.lp-quiz-options {
  display: grid;
  gap: 10px;
}
.lp-quiz-why {
  min-height: 44px;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: rgb(var(--k-ink-soft));
}
.lp-quiz-why.is-right {
  color: rgb(var(--k-green-ink));
  font-family: "din-round-bold", sans-serif;
}
.lp-quiz-why.is-wrong {
  color: rgb(var(--k-red-dark));
  font-family: "din-round-bold", sans-serif;
}

/* growth */
.lp-grow-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.lp-grow-years {
  font-family: "din-round-bold", sans-serif;
  color: rgb(var(--k-ink-soft));
}
.lp-grow-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  margin: 18px 0 16px;
  padding: 0 2px;
  border-bottom: 2px solid rgb(var(--k-line));
}
.lp-grow-chart span {
  transform-origin: bottom center;
  flex: 1;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: rgb(var(--k-line));
  transition: height 0.25s ease, background-color 0.2s ease;
}
.lp-grow-chart span.on {
  background: rgb(var(--k-blue));
}
.lp-grow-result {
  font-size: 17px;
  margin: 16px 0 6px;
}
.lp-grow-value {
  font-family: "feather-bold", sans-serif;
  font-size: 26px;
  color: rgb(var(--k-green-ink));
  font-variant-numeric: tabular-nums;
}
.lp-grow-note {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: rgb(var(--k-ink-soft));
  margin: 0;
}

/* ages */
.lp-ages-label {
  font-family: "din-round-bold", sans-serif;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgb(var(--k-ink-soft));
  margin: 0 0 10px;
}
.lp-ages-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.lp-ages-cash {
  font-family: "feather-bold", sans-serif;
  font-size: clamp(34px, 11vw, 48px); /* 48px wherever it fits; smaller only on the smallest phones */
  color: rgb(var(--k-green-ink));
  font-variant-numeric: tabular-nums;
}

/* no pressure */
.lp-calm {
  align-items: center;
  flex-direction: column;
  gap: 18px;
  padding-left: 0;
}
.lp-calm-bull {
  height: 190px;
}
.lp-calm-bull .vcast {
  height: 100%;
}
.lp-calm-tiles {
  display: flex;
  gap: 14px;
}

/* ---------- CTA ---------- */
.lp-cta {
  background: rgb(var(--k-accent));
  color: rgb(var(--k-on-color)); /* dark ink: white on the accent is 2.14:1 */
  padding: 80px 0 0;
  overflow: hidden;
}
.lp-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lp-cta h2 {
  font-family: "feather-bold", sans-serif;
  font-size: 52px;
  line-height: 1.05;
  margin: 0 0 28px;
  max-width: 560px;
}
.lp-cta-meet {
  margin: 48px 0 8px;
  font-family: "din-round-bold", sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.9;
}
.lp-lineup {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 230px;
  width: 100%;
}
.lp-lineup .lp-lineup-item {
  min-width: 44px; /* 6 Oct: six figures give way to fit a phone's width instead of running off it, never below a 44 px tap target */
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}
.lp-lineup .vcast {
  height: 190px;
}
.lp-lineup-name {
  font-family: "din-round-bold", sans-serif;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgb(var(--k-green-deep)); /* white on it 5.37:1, both themes */
  color: rgb(var(--k-white));
  border-radius: 999px;
  padding: 4px 10px;
  margin: 6px 0 14px;
}

/* ---------- footer ---------- */
.lp-footer {
  /* All blue (the founder, 29 Sep: "make this rather fully green or fully blue, I prefer blue"): the
     footer band is the same accent as the call-to-action above it, so the page reads as one colour.
     The dark hairline on top is the seam between the two blue blocks (no second hue). Vine green
     stays where it means something: the wordmark, correct answers, gains, ticks.
     Text: dark ink on the accent is 7.85:1. It is shown at full opacity: at 0.9 it measured 6.58:1,
     which passes, but full keeps the margin; the accent-shade was 4.48:1 at 0.9 and isn't used. */
  background: rgb(var(--k-accent));
  color: rgb(var(--k-on-color));
  padding: 48px 0 40px;
  border-top: 2px solid rgba(19, 31, 36, 0.2);
}
.lp-footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.lp-footer h3 {
  font-family: "din-round-bold", sans-serif;
  font-size: 18px;
  margin: 0 0 12px;
}
.lp-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.lp-footer a {
  color: rgb(var(--k-on-color));
  text-decoration: none;
  font-size: 15px;
}
@media (hover: hover) {
  .lp-footer a:hover {
  opacity: 1;
  text-decoration: underline;
}
}
.lp-footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 2px solid rgba(19, 31, 36, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}
.lp-footer-bottom p {
  margin: 0;
}
.lp-footer-langs {
  display: flex;
  gap: 8px;
}
.lp-footer-langs button {
  min-height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  border-radius: 10px;
  color: rgb(var(--k-on-color));
  padding: 6px 12px;
  font-family: "din-round-bold", sans-serif;
  cursor: pointer;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .lp-hero-grid,
  .lp-feature-grid {
    grid-template-columns: minmax(0, 1fr); /* a plain 1fr grew to the widest child (the cash figure) */
    gap: 32px;
    min-height: 0;
  }
  .lp-reverse .lp-feature-copy {
    order: 0;
  }
  .lp-feature-copy {
    text-align: center;
  }
  .lp-feature-copy p {
    margin: 0 auto;
  }
  .lp-feature-copy h2 {
    font-size: 36px;
  }
  .lp-feature {
    padding: 56px 0;
  }
  .lp-scene {
    max-width: 420px;
  }
  .lp-footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .lp-wrap {
    padding: 0 16px;
  }
  .lp-header-row {
    min-height: 64px;
    gap: 12px;
  }
  .vine-wordmark {
    font-size: 28px;
  }
  .lp-lang-label .lp-lang-prefix {
    display: none;
  }
  .lp-hero-copy h1 {
    font-size: 26px;
    margin-bottom: 24px;
  }
  .kbtn-lg {
    min-width: 0;
    width: 100%;
  }
  .lp-demo,
  .lp-demo:has(.lp-demo-cast-right) {
    padding: 0 0 170px;
  }
  .lp-demo-cast,
  .lp-demo-cast-right {
    left: 50%;
    right: auto;
    translate: -50% 0;
    height: 180px;
    bottom: -10px;
  }
  .lp-demo > .kcard {
    max-width: none;
  }
  .lp-wallet-row {
    grid-template-columns: 36px 96px 1fr;
  }
  .lp-cta h2 {
    font-size: 38px;
  }
  .lp-lineup {
    height: 150px;
    gap: 0;
  }
  .lp-lineup .vcast {
    height: 110px;
  }
  .lp-lineup-name {
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* Characters stand beside the demo cards, never on top of their controls.
   Re-measured 8 Oct after the six *-neutral files were cropped to their
   drawings: the figures are the same HEIGHT but wider, because the transparent
   margin that used to sit beside each animal is gone, so 150/130 no longer
   cleared them. Measured intrusions into the cards were Berry 60px, Ace 52px,
   Scout 51px — the eagle sat on the calculator's "50 years", the fox on the
   wallet. These numbers are the old ones plus that intrusion plus a ~20px gap,
   and they were checked in the browser, not reasoned about. If the art is ever
   recropped, measure again rather than nudging. */
.lp-demo {
  padding-left: 175px;
}
.lp-demo:has(.lp-demo-cast-right) {
  padding-left: 0;
  padding-right: 165px;
}
/* AND THE FIGURE IS CAPPED, WHICH IS THE REAL FIX (8 Oct, second attempt).
   The first attempt only grew the padding, to 230/205. That stopped the overlap and squeezed the
   CARD instead -- the founder: "why did it become so squished", with a speech bubble wrapped to one
   word a line. Reserving room for a figure and letting the figure grow without limit is a race the
   card always loses.
   Capping the width ends it: the drawing scales down inside its box (object-fit: contain), so the
   space it needs is now a number we choose rather than whatever the artwork happens to measure, and
   the padding can go back to roughly what it was. These are decorative figures beside a card; the
   leads are big in the hero, which is where the founder asked for size. */
.lp-demo-cast .vcast {
  max-width: 150px;
}
.lp-demo-cast {
  height: 240px;
  pointer-events: none;
}
.lp-demo-cast-right {
  right: 0;
}
.lp-calm {
  padding-left: 0 !important;
}
/* Topic tiles wiggle on hover. */
@media (hover: hover) {
  .lp-topics-list a:hover .vtile {
  animation: lp-wiggle 0.5s ease;
}
}
@keyframes lp-wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-10deg) scale(1.1); }
  60% { transform: rotate(8deg) scale(1.1); }
}
@media (max-width: 600px) {
  .lp-demo,
  .lp-demo:has(.lp-demo-cast-right) {
    padding: 0 0 170px;
  }
}
@media (max-width: 600px) {
  /* Characters sit fully below their card on phones. */
  .lp-demo-cast,
  .lp-demo-cast-right {
    height: 160px !important;
    bottom: -8px;
  }
  .lp-demo,
  .lp-demo:has(.lp-demo-cast-right) {
    padding-bottom: 168px !important;
  }
}

/* ---------- growth widget: big, motivating, honest ---------- */
.lp-grow-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.lp-grow-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-grow-label {
  font-family: "din-round-bold", sans-serif;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgb(var(--k-ink-soft));
}
.lp-grow-chips {
  display: flex;
  flex-wrap: wrap; /* "US$10.000" in Spanish made this row wider than a small phone */
  gap: 6px;
}
.lp-grow-chips .kchip-btn {
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.lp-grow-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 0 2px;
}
.lp-grow-after {
  font-family: "din-round-bold", sans-serif;
  font-size: 15px;
  color: rgb(var(--k-ink-soft));
}
.lp-grow-after b {
  color: rgb(var(--k-ink));
}
.lp-grow-hero .lp-grow-value {
  display: block;
  font-family: "feather-bold", sans-serif;
  font-size: clamp(48px, 9vw, 72px);
  line-height: 1.05;
  color: rgb(var(--k-green-ink));
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  transform-origin: center;
  margin: 4px 0 2px;
}
.lp-grow-times {
  min-height: 20px;
  font-family: "din-round-bold", sans-serif;
  font-size: 14px;
  color: rgb(var(--k-green-ink));
}
.lp-grow-chart {
  height: 120px !important;
  margin: 12px 0 14px !important;
}
.lp-grow-ends {
  display: flex;
  justify-content: space-between;
  font-family: "din-round-bold", sans-serif;
  font-size: 13px;
  color: rgb(var(--k-ink-soft));
  margin: 8px 0 10px;
}

/* notch (viewport-fit=cover); 0 on devices without one */
.lp-header { padding-top: env(safe-area-inset-top); }