/* Koda landing: the receipt stack hero and the fold's interaction layer.
   (Lens 2026-09-20, replaced by the stack 2026-09-25.)
   Loaded by index.html beside the inline sheet; every name here is new
   (.lp-hero*, .tilt-ready) or a hover/motion extension of an existing card,
   so the inline sheet keeps painting the page whole when this file is
   missing. One hue, no blur, motion only where the reader asked for it. */

/* THE FOLD, two columns: the words keep the left, the stack takes the right.
   Row gap is zero so the empty rows the hero spans cost nothing; the
   children keep their own margins. The form follows the lede so it sits on
   the first screen at 1440x900 and 375x812 (KWI audit 007, move 7). */
@media (min-width: 1000px) {
  .lp-fold .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 0 48px; align-items: center }
  .lp-fold .wrap > * { grid-column: 1 / -1; min-width: 0 }
  .lp-fold .wrap > .lp-claim, .lp-fold .wrap > .lp-lede, .lp-fold .wrap > .lp-act { grid-column: 1 }
  .lp-fold .wrap > .lp-act { margin-top: 36px }
  .lp-fold .wrap > .lp-hero3d { grid-column: 2; grid-row: 1 / span 3; align-self: center }
  .lp-fold .wrap > .lp-claim { font-size: clamp(var(--fs-6), 5vw, 72px); max-width: none }
  .lp-fold { padding: 56px 0 96px }
  .lp-fold .lp-hero-stage { max-height: 440px }
  .lp-row { margin-top: 56px }
}
.lp-hero3d { display: block; width: 100%; margin: 0; transform: translate3d(0, calc(var(--sp, 0) * 64px), 0); will-change: transform }
.lp-hero-stage { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 500px; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab }
.lp-hero-stage.is-drag { cursor: grabbing }
.lp-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-hairline); min-height: 44px }
/* the chosen Deep Dive: a real link, so the stack has a keyboard path */
.lp-hero-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.lp-hero-title { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-2); line-height: 1.35; letter-spacing: var(--track-16); color: var(--on-surface); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.lp-hero-title:hover { color: var(--koda-blue); opacity: 1 }
.lp-hero-title:focus-visible { outline: 2px solid var(--koda-blue); outline-offset: 3px }
.lp-hero-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.lp-hero-step { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border-soft); border-radius: var(--r-md); color: var(--on-surface-variant); font-size: 16px; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) }
.lp-hero-step:hover:not(:disabled) { color: var(--koda-blue); border-color: var(--koda-blue) }
.lp-hero-step:disabled { opacity: .35; cursor: default }
.lp-hero-step:focus-visible { outline: 2px solid var(--koda-blue); outline-offset: 3px }
.lp-hero-step[hidden] { display: none }
.lp-hero-poster, .lp-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.lp-hero-poster { object-fit: contain; object-position: center; pointer-events: none; transition: opacity .8s var(--ease-out) }
.lp-hero-canvas { opacity: 0; transition: opacity .8s var(--ease-out) }
.lp-hero3d.has-3d .lp-hero-poster { opacity: 0 }
.lp-hero3d.has-3d .lp-hero-canvas { opacity: 1 }
/* the two hints sit on the lens and are only true once it is live */
.lp-hero-cap, .lp-hero-pause { opacity: 0; transition: opacity .5s var(--ease-out) .3s; pointer-events: none }
.lp-hero3d.has-3d .lp-hero-cap, .lp-hero3d.has-3d .lp-hero-pause { opacity: 1; pointer-events: auto }
.lp-hero-cap { display: block; margin-top: 6px; line-height: 1.6 }
.lp-hero3d.touched .lp-hero-cap { opacity: 0 }
.lp-hero-pause { flex-shrink: 0; min-height: 44px; padding: 0 2px; background: none; border: 0; border-bottom: 1px solid var(--border-strong); color: var(--on-surface-variant); font-family: var(--font-mono); font-size: var(--fs-micro-2); letter-spacing: var(--track-10); text-transform: uppercase; cursor: pointer }
.lp-hero-pause:hover { color: var(--koda-blue); border-color: var(--koda-blue) }
.lp-hero-pause:focus-visible { outline: 2px solid var(--koda-blue); outline-offset: 4px }
.lp-hero-pause[hidden] { display: none }
@media (max-width: 999px) {
  .lp-fold .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 }
  /* on one column the stack follows the form and precedes the ledger row */
  .lp-fold .wrap > .lp-hero3d { grid-row: 4; margin: 30px 0 0; transform: none; will-change: auto }
  .lp-hero-stage { aspect-ratio: 4 / 3; max-height: 400px }
}
@media (max-width: 680px) {
  .lp-fold .wrap > .lp-hero3d { margin-top: 22px }
  .lp-hero-stage { aspect-ratio: 1 / 1; max-height: 340px }
  .lp-hero-foot { margin-top: 6px }
  .lp-hero-foot { flex-direction: column; align-items: stretch }
  .lp-hero-ctl { justify-content: flex-end }
  .lp-hero-pause { order: -1; margin-right: auto }
}

/* The Atlas beta entry (scripts/prepare-atlas-entry.cjs, injected at deploy):
   one ruled line above the fold, not a box, so it costs the form no screen. */
.atlas-entry { border-bottom: 1px solid var(--border-hairline) }
.atlas-entry .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; padding-top: 10px; padding-bottom: 10px; font-size: var(--fs-2); line-height: 1.5; color: var(--on-surface-variant) }
.atlas-entry .kl-k { display: inline; color: var(--koda-blue) }
.atlas-entry strong { color: var(--on-surface); font-weight: 600 }
.atlas-entry a { margin-left: auto; color: var(--koda-blue); font-weight: 600; min-height: 24px }
@media (max-width: 680px) { .atlas-entry-desc { display: none } }

/* THE FOLD's figure and the counts roll in (JS restores the exact HTML). */
[data-final] { font-variant-numeric: tabular-nums }

/* CARD DEPTH. Fine pointers only. `transform` belongs to the rise animation
   until it ends (fill-mode both would pin it), so the tilt waits for
   .tilt-ready, which the script adds on animationend. */
@media (hover: hover) and (pointer: fine) {
  .lp-inst.is-in .lp-irow.tilt-ready, .lp-inst.is-in .lp-today.tilt-ready { animation: none; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .55s var(--ease-out), border-color var(--dur-base) var(--ease-out) }
  .lp-irow::after, .lp-today::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 130, 246, .13), transparent 42%); opacity: 0; transition: opacity .35s var(--ease-out) }
  .lp-irow:hover::after, .lp-today:hover::after { opacity: 1 }
  .lp-irow:hover .lp-stack-p:nth-child(1) { transform: translate(-50%, -50%) rotate(-11deg) translateX(-8px) }
  .lp-irow:hover .lp-stack-p:nth-child(2) { transform: translate(-50%, -50%) rotate(7deg) translateX(8px) }
  .lp-stack-p { transition: transform .5s var(--ease-out) }
  .lp-irow:hover .lp-loop-svg { opacity: .85; transform: scale(1.03) }
  .lp-loop-svg { transition: opacity .4s var(--ease-out), transform .6s var(--ease-out) }
  .lp-irow:hover .lp-gauge-fill { stroke-width: 10 }
  .lp-gauge-fill { transition: stroke-width .3s var(--ease-out) }
  /* the one chromatic action: a sheen under the pointer */
  .subscribe-bar button { position: relative; overflow: hidden }
  .subscribe-bar button::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%); opacity: 0; transition: opacity .3s var(--ease-out) }
  .subscribe-bar button:hover::after { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero3d { transform: none; will-change: auto }
  .lp-hero-poster, .lp-hero-canvas, .lp-hero-cap, .lp-hero-pause, .lp-stack-p, .lp-loop-svg { transition: none }
}