/* ============================================================================
   fora kit: a layered parallax hero and a stack of sticky cards.
   Themed by the site's tokens plus a few --lh-* / --stk-* variables.
   ========================================================================== */

/* ---------------------------------------------------------------- hero -- */
.lh { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; isolation: isolate; background: var(--lh-sky-base, var(--sc-canvas)); }
.lh__sky { position: absolute; inset: 0; z-index: 0; background: var(--lh-sky, linear-gradient(180deg, var(--sc-canvas) 0%, var(--sc-surface) 100%)); }
.lh__glow { position: absolute; left: 50%; bottom: 18%; width: 140vw; height: 60vh; transform: translateX(-50%); z-index: 0; background: radial-gradient(60% 60% at 50% 100%, var(--lh-glow, color-mix(in oklab, var(--sc-accent) 45%, transparent)) 0%, transparent 70%); filter: blur(10px); opacity: .9; pointer-events: none; }
.lh__plane { position: absolute; left: 50%; bottom: 0; width: max(100vw, 1600px); max-width: none; height: auto; transform: translateX(-50%); will-change: transform; pointer-events: none; user-select: none; }
.lh__plane--far { z-index: 1; bottom: var(--lh-far-bottom, 26%); }
.lh__plane--near { z-index: 4; bottom: var(--lh-near-bottom, -6%); }
.lh__copy { position: relative; z-index: 2; text-align: center; max-width: 46rem; margin: 0 auto; padding: clamp(6rem, 14vh, 9rem) var(--sc-gutter) 0; animation: lh-rise 900ms var(--sc-ease-out) both; }
.lh__eyebrow { display: inline-block; margin: 0 0 1.4rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); font-size: var(--sc-t-xs); letter-spacing: .04em; color: var(--sc-ink-soft); }
.lh__title { font-family: var(--sc-font-display); font-weight: var(--lh-title-weight, 600); font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 1.1rem; text-wrap: balance; }
.lh__sub { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--sc-ink-soft); max-width: 36rem; margin: 0 auto 1.8rem; text-wrap: pretty; }
.lh__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.lh__product { position: relative; z-index: 3; width: min(62rem, 92vw); margin: clamp(2rem, 5vh, 4rem) auto 0; will-change: transform; animation: lh-rise 1100ms 120ms var(--sc-ease-out) both; }
.lh__frame { background: var(--lh-frame, #0E0E11); border-radius: 18px; padding: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.06) inset; border: 1px solid rgba(255,255,255,.08); }
.lh__screen { border-radius: 12px; overflow: hidden; background: var(--lh-screen, #15161A); aspect-ratio: var(--lh-screen-ar, 16 / 10); position: relative; }
.lh__floor { position: absolute; inset: auto 0 0 0; height: 32vh; z-index: 5; background: linear-gradient(to top, var(--lh-floor, var(--sc-canvas)) 0%, color-mix(in oklab, var(--lh-floor, var(--sc-canvas)) 70%, transparent) 45%, transparent 100%); pointer-events: none; }
.lh--close .lh__copy { padding-top: clamp(5rem, 12vh, 8rem); }
.lh--close { min-height: 88vh; }
@keyframes lh-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .lh__plane { width: 1400px; }
  .lh__plane--far { bottom: 34%; }
  .lh__copy { padding-top: 5rem; }
  .lh__product { width: 94vw; }
}
@media (prefers-reduced-motion: reduce) {
  .lh__copy, .lh__product { animation: none; }
  .lh__plane, .lh__product { transform: translateX(-50%) !important; }
  .lh__product { transform: none !important; }
}

/* --------------------------------------------------------------- stack -- */
.stk { position: relative; --stk-top: 6.5rem; --stk-gap: 1.1rem; }
.stk__head { max-width: 46rem; margin: 0 0 3rem; }
.stk__list { list-style: none; margin: 0; padding: 0; }
.stk__card { position: sticky; top: calc(var(--stk-top) + var(--i, 0) * var(--stk-gap)); margin-bottom: clamp(3rem, 10vh, 7rem); min-height: min(70vh, 640px); display: grid; grid-template-columns: 1fr; gap: 2rem; padding: clamp(1.5rem, 3.5vw, 3rem); border-radius: 24px; background: var(--stk-bg, var(--sc-surface)); color: var(--stk-ink, var(--sc-ink)); border: 1px solid var(--stk-line, rgba(255,255,255,.08)); box-shadow: 0 30px 70px -30px rgba(0,0,0,.55); transform-origin: 50% 0; will-change: transform, filter; }
.stk__card:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .stk__card { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: center; } }
.stk__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: var(--sc-t-xs); letter-spacing: .06em; color: var(--stk-soft, var(--sc-ink-soft)); }
.stk__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }
.stk__title { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 1rem; text-wrap: balance; }
.stk__body { color: var(--stk-soft, var(--sc-ink-soft)); line-height: 1.55; margin: 0 0 1.25rem; max-width: 40ch; text-wrap: pretty; }
.stk__line { margin: 0; font-weight: 600; font-size: var(--sc-t-sm); }
.stk__visual { border-radius: 16px; overflow: hidden; background: var(--stk-visual-bg, #0E0E11); border: 1px solid rgba(255,255,255,.08); min-height: 16rem; position: relative; }
.stk__visual > img, .stk__visual > video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .stk__card { position: relative; top: auto; transform: none !important; filter: none !important; } }

/* --------------------------------------------------- shared mock: a chat -- */
.mock { padding: 1rem; height: 100%; display: grid; gap: .6rem; align-content: start; font-size: 13px; color: #E8E6E1; }
.mock__bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8A8F96; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.mock__bar b { color: var(--sc-accent); font-weight: 600; }
.msg { max-width: 78%; padding: .55rem .8rem; border-radius: 14px; line-height: 1.4; }
.msg--in { background: #23262C; border-bottom-left-radius: 4px; justify-self: start; }
.msg--out { background: var(--sc-accent); color: var(--sc-accent-ink); border-bottom-right-radius: 4px; justify-self: end; }
.msg--sys { justify-self: center; font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8A8F96; background: none; padding: .3rem 0; }
.msg--ok { color: #6FCF97; }