/* Lario waitlist - page layer.
   Loads after lario.css and lario-product.css (copied from the Lario UI kit,
   https://lario-ui.vercel.app - treat those two as read-only). Everything here
   is layout for this page, built only from the kit's tokens. */

/* The stage photo sits beside this file, so the relative url resolves here. */
.lr-stage { background-image: url("../img/stage.jpg"); }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lr-logo { display: inline-flex; color: var(--lr-ink); }
.lr-logo svg { width: 99px; height: 40px; }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 20; padding: 8px 16px; background: var(--lr-ink); color: var(--lr-mist); border-radius: 12px; text-decoration: none; }
.skip:focus { top: 16px; }

/* ------------------------------------------------------------ header */
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; padding: 6px 8px; }
.menu-btn .lr-i { width: 20px; height: 20px; }
.lr-header .lr-menu { position: absolute; top: calc(100% + 16px); left: 0; right: 0; padding: 24px; background: var(--lr-paper); border: 1px solid var(--lr-line-soft); box-shadow: var(--lr-shadow-float); }
.lr-header .lr-menu a { font-size: 16px; }
@media (max-width: 809.98px) {
  .lr-header { padding-block: 16px; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 810px) { .lr-header .lr-menu { display: none; } }

/* ------------------------------------------------------------ hero */
.hero-sub { max-width: 420px; text-align: center; text-wrap: balance; }
.lr-hero .lr-head { gap: 32px; }

/* ------------------------------------------------------------ waitlist form */
.join { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.join__row { width: 100%; display: flex; gap: 8px; }
.join__row .lr-input { flex: 1 1 auto; min-width: 0; height: auto; }
.join__row .lr-btn { flex: none; }
.join__msg { margin: 0; min-height: 21px; text-align: center; color: var(--lr-ink-2); }
.join__msg.is-error { color: var(--lr-failed); }
.join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join[aria-busy="true"] .lr-btn { opacity: .6; pointer-events: none; }
.join__done { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; background: var(--lr-paper); border: 1px solid var(--lr-line); border-radius: calc(20px * var(--lr-k)); corner-shape: superellipse(1.5); color: var(--lr-ink); text-align: left; }
.join__done .lr-tile { width: 40px; height: 40px; --r: 14px; }
.join__done .lr-tile .lr-i { width: 20px; height: 20px; }
.join__done p { margin: 0; }
.join__done p span { display: block; color: var(--lr-ink-2); font-size: 14px; }
.join--photo .join__msg { color: var(--lr-on-photo); padding: 4px 12px; border: 1px solid var(--lr-glass-line); border-radius: calc(16px * var(--lr-k)); corner-shape: superellipse(1.5); background: rgba(20, 48, 82, .45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.join--photo .join__msg.is-error { color: #FFD9D4; }
.join--photo .lr-input { border-color: transparent; }
@media (max-width: 479.98px) {
  .join__row { flex-direction: column; }
  .join__row .lr-btn { justify-content: center; }
}

/* ------------------------------------------------------------ hero stage */
.hero-stage { display: grid; grid-template-columns: 300px 1fr 300px; align-items: end; gap: 24px; min-height: 560px; padding-bottom: 0; }
.hero-stage > .lr-card { margin-bottom: 48px; gap: 24px; }
.hero-phone { justify-self: center; width: 320px; height: 500px; aspect-ratio: auto; padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hero-phone .lr-phone__screen { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 1239.98px) {
  .hero-stage { grid-template-columns: 1fr 320px; }
  .hero-stage > .lr-card:last-child { display: none; }
}
@media (max-width: 809.98px) {
  .hero-stage { grid-template-columns: 1fr; justify-items: center; min-height: 0; padding-top: 24px; }
  .hero-stage > .lr-card { display: none; }
  .hero-phone { width: min(300px, 100%); height: 440px; }
}

/* Mini app inside the phone - a picture of the product, not a working UI */
.app { display: flex; flex-direction: column; gap: 14px; padding: 52px 16px 16px; font-size: 13px; color: var(--lr-ink-2); }
.app__top { display: flex; align-items: center; justify-content: space-between; color: var(--lr-ink); }
.app__top .lr-h5 { font-size: 18px; }
.app__top .lr-i { width: 20px; height: 20px; }
.app__sum { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--lr-line-soft); border-radius: calc(24px * var(--lr-k)); corner-shape: superellipse(1.5); }
.app__sum .lr-xxl { font-size: 32px; }
.app__tax { display: flex; align-items: center; gap: 6px; }
.app__tax b { font-weight: 500; color: var(--lr-ink); }
.app__tax .lr-i { width: 14px; height: 14px; }
.app__actions { display: flex; gap: 8px; }
.app__actions .lr-btn { padding: 6px 12px; gap: 6px; font-size: 13px; }
.app__actions .lr-i { width: 16px; height: 16px; }
.app__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--lr-line-soft); }
.app__row b { display: block; font-weight: 500; color: var(--lr-ink); }
.app__amt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.app .lr-badge { padding: 1px 8px; gap: 6px; font-size: 12px; }
.app .lr-badge::before { width: 6px; height: 6px; }

/* ------------------------------------------------------------ steps */
.steps .lr-card { gap: 24px; }
.steps .lr-well { height: 260px; }
.step { color: var(--lr-ink-2); }
.vignette { width: 78%; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--lr-paper); border: 1px solid var(--lr-line); border-radius: calc(24px * var(--lr-k)); corner-shape: superellipse(1.5); box-shadow: var(--lr-shadow-float); font-size: 13px; color: var(--lr-ink-2); }
.vignette b { font-weight: 500; color: var(--lr-ink); }
.vignette__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vignette__foot { padding-top: 4px; }
.vignette .bar { height: 8px; border-radius: 4px; background: var(--lr-line-soft); }
.vignette .lr-badge { padding: 1px 8px; font-size: 12px; gap: 6px; }
.vignette .lr-badge::before { width: 6px; height: 6px; }
.vignette__match { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--lr-line-soft); color: var(--lr-paid); }
.vignette__match .lr-i { width: 16px; height: 16px; }
.qr { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--lr-mist); border: 1px solid var(--lr-line); color: var(--lr-ink); }
.qr .lr-i { width: 22px; height: 22px; }
.muted { color: var(--lr-ink-2); }

/* ------------------------------------------------------------ statement */
.statement .lr-statement { max-width: 760px; margin: 0 auto; text-align: center; text-wrap: balance; color: var(--lr-ink); }
@media (min-width: 810px) { .statement .lr-statement { font-size: 32px; } }

/* ------------------------------------------------------------ features */
.feature { gap: 20px; }
.feature__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: calc(16px * var(--lr-k)); corner-shape: superellipse(1.5); background: var(--lr-mist); border: 1px solid var(--lr-line); color: var(--lr-ink); }

/* ------------------------------------------------------------ faq */
.lr-section > .faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; align-items: start; }
@media (max-width: 1023.98px) { .lr-section > .faq { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ closing stage */
.cta { padding-top: 0; }
.cta .lr-stage { min-height: 560px; justify-content: flex-start; padding-top: 72px; }
@media (max-width: 809.98px) { .cta .lr-stage { min-height: 520px; padding: 48px 20px 160px; } }
.lr-footer { padding-top: 48px; }
.lr-head h2 { text-wrap: balance; }
.lr-footer__brand p { margin: 0; }

/* ================================================================ motion
   One strong ease-out for entrances, the kit's spring for hover. Transform and
   opacity only (the FAQ height is the one accordion exception). Everything
   here sits behind no-preference: under reduced motion the kit already stops
   all motion, and nothing starts hidden. Reveals need the .js flag set in
   <head>, so the page reads fine without JavaScript. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* Press feedback - extends the kit's button transition rather than replacing it */
.lr-btn { transition: background-color .4s var(--lr-spring), color .4s var(--lr-spring), border-color .4s var(--lr-spring), transform .16s var(--ease-out); }
.lr-btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: no-preference) {

  /* Hero: the three beats arrive one after another, then the stage rises */
  @keyframes lr-rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes lr-rise-far { from { opacity: 0; transform: translateY(48px); } }
  @keyframes lr-pop { from { opacity: 0; transform: scale(.9); } }
  .lr-hero .lr-pill { animation: lr-rise .7s var(--ease-out) both; }
  .lr-hero .lr-display > * { animation: lr-rise .8s var(--ease-out) both; }
  .lr-hero .lr-display > :nth-child(1) { animation-delay: 80ms; }
  .lr-hero .lr-display > .lr-emblem { animation-name: lr-pop; animation-delay: 200ms; }
  .lr-hero .lr-display > :nth-child(3) { animation-delay: 260ms; }
  .lr-hero .lr-display > :nth-child(4) { animation-delay: 380ms; }
  .lr-hero .hero-sub { animation: lr-rise .7s var(--ease-out) 480ms both; }
  .lr-hero .join { animation: lr-rise .7s var(--ease-out) 560ms both; }
  .hero-stage { animation: lr-rise-far 1s var(--ease-out) 620ms both; }
  .hero-phone { animation: lr-rise-far 1s var(--ease-out) 820ms both; }
  .hero-stage > .lr-card { animation: lr-rise .8s var(--ease-out) both; }
  .hero-stage > .lr-card:first-of-type { animation-delay: 1000ms; }
  .hero-stage > .lr-card:last-of-type { animation-delay: 1100ms; }

  /* Sections: each block rises once as it enters, items in a grid 70ms apart.
     Deliberate departure from the kit's "sections do not animate in" rule,
     chosen for this page (Nov 2026). Remove this block and the reveal code in
     site.js to go back to the kit default. */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal--stage { transform: translateY(32px) scale(.97); transition-duration: .9s; }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* Statement: words go from faint to ink as it scrolls through (JS sets opacity) */
  .js .statement .word { opacity: .16; }

  /* Gradient tiles: the kit's slow shimmer, as a sliding layer (composite only).
     The layer repeats every half of its width, so translating -50% loops cleanly. */
  @keyframes lr-flow { to { transform: translateX(-50%); } }
  .lr-tile { position: relative; overflow: hidden; isolation: isolate; }
  .lr-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 400%; background: linear-gradient(105deg, #7EE5FC 0%, #8CC63F 25%, #7EE5FC 50%, #8CC63F 75%, #7EE5FC 100%); animation: lr-flow 12s linear infinite; }

  /* FAQ: the answer opens instead of appearing (browsers with ::details-content) */
  @supports selector(::details-content) {
    .lr-faq { interpolate-size: allow-keywords; }
    /* The kit spaces the answer with margin-top, which escapes the clip (overflow:
       clip does not contain margins) and left 16px that could not collapse - the
       card stalled, then snapped shut. Padding stays inside and animates away. */
    .lr-faq p { margin-top: 0; padding-top: 16px; }
    /* Closing: the answer fades out fast, before the card has turned white under
       its light text, while the height runs the full 300ms. */
    .lr-faq::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .3s var(--ease-out), opacity .12s var(--ease-out), content-visibility .3s allow-discrete; }
    /* Opening: height first, the answer fades in just behind it. */
    .lr-faq[open]::details-content { block-size: auto; opacity: 1; transition: block-size .3s var(--ease-out), opacity .25s var(--ease-out) .05s, content-visibility .3s allow-discrete; }
  }
  @keyframes lr-turn { from { opacity: 0; transform: rotate(-90deg); } }
  .lr-faq[open] .lr-minus { animation: lr-turn .25s var(--ease-out); }

  /* Form: success settles in, a bad email gets one small shake */
  @keyframes lr-settle { from { opacity: 0; transform: translateY(6px) scale(.96); } }
  @keyframes lr-tick { from { opacity: 0; transform: scale(.5); } }
  @keyframes lr-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
  .join__done { animation: lr-settle .4s var(--ease-out) both; }
  .join__done .lr-tile svg { animation: lr-tick .35s var(--ease-out) .15s both; }
  .join__row.is-shaking { animation: lr-shake .3s var(--ease-out); }

  /* Phone demo: the badge crossfades when the payment lands */
  .app [data-demo-badge] { transition: opacity .2s var(--ease-out); }
  .app [data-demo-badge].is-swapping { opacity: 0; }
}