/* Landing stage (spec 2026-10-11): the "You said" chip, the Now-yours box, the legend and the canvas — all inside
   the hero art column, above the example card. External file per CSP style-src-elem. Motion only under html.lp-stage;
   without it (reduced motion, no JS, second load) everything is static and visible. */
.lp-hero-art.has-receipt { overflow: visible; }
.lp-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* width: 100% is load-bearing — .lp-hero-art's base rule sets place-items: center, and current Chrome applies
   justify-items to block children, so a width-auto block here shrink-wraps to 0 and centres (seen 2026-10-11). */
.lp-stage-slot { position: relative; z-index: 3; width: 100%; min-height: 112px; margin: 0 0 14px; }

/* chip */
.lp-stage-said { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--surface-flat) 72%, transparent);
  backdrop-filter: blur(8px); font-size: 0.95rem; line-height: 1.4; }
.lp-stage-said-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.lp-stage-said-text { color: var(--fg); }
html.lp-stage .lp-stage-said-text::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em;
  background: var(--accent-purple); animation: lpStageCaret 0.9s steps(2, start) infinite; }
html.lp-stage .is-typed .lp-stage-said-text::after { display: none; }
@keyframes lpStageCaret { to { visibility: hidden; } }

/* legend */
.lp-stage-legend { margin: 8px 0 0 4px; font-size: 0.78rem; color: var(--fg-muted); display: flex; gap: 14px; align-items: center; }
.lp-stage-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.lp-stage-legend .dot-run { background: var(--accent-purple); box-shadow: 0 0 8px var(--accent-purple); }
.lp-stage-legend .dot-you { background: var(--accent-gold, #d7b36a); box-shadow: 0 0 8px var(--accent-gold, #d7b36a); }
.lp-stage-legend[hidden] { display: none; }   /* unscoped: the author display:flex above beats the UA [hidden] rule in EVERY state */

/* box */
.lp-stage-box { margin: 0; }
.lp-stage-box-label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.lp-stage-box-row { display: flex; gap: 8px; }
.lp-stage-box-row input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border-radius: 10px; font: inherit; font-size: 0.95rem;
  color: var(--fg); background: color-mix(in srgb, var(--surface-flat) 85%, transparent); border: 1px solid var(--border-subtle); }
.lp-stage-box-row input::placeholder { color: var(--fg-faded); }
.lp-stage-box-row input:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }
.lp-stage-box-row .btn { white-space: nowrap; }
.lp-stage-box-status { min-height: 18px; margin: 6px 0 0; font-size: 0.82rem; color: var(--fg-muted); }
/* (the status line carries aria-live="polite" but NOT role="status": cozy-theme.css paints that role as a gradient banner,
   with :not(#id) terms no class selector can beat; the line is empty until a too-short submit) */
@media (max-width: 560px) { .lp-stage-box-row { flex-direction: column; } .lp-stage-slot { min-height: 150px; } }

/* no-motion state: chip compact, box static beneath it. The slot reserves the stacked height so a late webfont
   (cozy's serif) cannot grow the column and re-centre the whole hero grid (CLS .24 measured without this). */
html:not(.lp-stage) .lp-stage-said { min-height: 0; padding: 6px 12px; font-size: 0.82rem; margin-bottom: 8px; }
html:not(.lp-stage) .lp-stage-slot { min-height: 156px; }
@media (max-width: 560px) { html:not(.lp-stage) .lp-stage-slot { min-height: 232px; } }

/* story state: chip + legend + box share the slot; the box waits for phase 4 (.is-now) */
html.lp-stage .lp-stage-said, html.lp-stage .lp-stage-legend, html.lp-stage .lp-stage-box { position: absolute; left: 0; right: 0; }
html.lp-stage .lp-stage-said { top: 0; transition: opacity .35s ease, transform .35s ease; }
html.lp-stage .lp-hero-art:not(.is-typing) .lp-stage-said-text { opacity: 0; }   /* phone: no show-then-blank-then-retype before the column is in view */
html.lp-stage .lp-stage-legend { top: 54px; transition: opacity .35s ease, transform .35s ease; }
/* visibility, not only opacity: an invisible input must be out of the tab order and the accessibility tree */
html.lp-stage .lp-stage-box { top: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease .15s, visibility 0s .15s; }
html.lp-stage .is-now .lp-stage-box, html.lp-stage-done .lp-stage-box { opacity: 1; visibility: visible; pointer-events: auto; }
html.lp-stage .is-now .lp-stage-said, html.lp-stage .is-now .lp-stage-legend,
html.lp-stage-done .lp-stage-said, html.lp-stage-done .lp-stage-legend { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* the card during the story: ghost frame, hidden lines, then staggered reveal */
html.lp-stage .lp-hero-art:not(.is-settled) .lp-receipt-card { border-color: color-mix(in srgb, var(--accent-purple) 35%, transparent); }
html.lp-stage .lp-receipt-lines li, html.lp-stage .lp-receipt-stamp, html.lp-stage .lp-receipt-foot, html.lp-stage .lp-receipt-title {
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
html.lp-stage .lp-receipt-lines li.is-in, html.lp-stage .lp-receipt-title.is-in,
html.lp-stage-done .lp-receipt-lines li, html.lp-stage-done .lp-receipt-title { opacity: 1; transform: none; }
/* revealed values match landing-receipt.css's design opacities, so the settled card is the static card */
html.lp-stage .lp-receipt-lines li.more.is-in, html.lp-stage-done .lp-receipt-lines li.more { opacity: 0.7; }
html.lp-stage .lp-receipt-stamp.is-in, html.lp-stage-done .lp-receipt-stamp { opacity: 0.65; transform: none; }
html.lp-stage .lp-receipt-foot.is-in, html.lp-stage-done .lp-receipt-foot { opacity: 0.85; transform: none; }

/* glass shimmer over the tease line, once, after the settle */
.lp-receipt-lines li.more { position: relative; overflow: hidden; }
html.lp-stage .is-settled .lp-receipt-lines li.more::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, #fff 20%, transparent) 50%, transparent 80%);
  transform: translateX(-120%); animation: lpStageShimmer 1.5s ease-out 0.2s 1 forwards; }
html[data-ux-mode="cozy"].lp-stage .is-settled .lp-receipt-lines li.more::after {
  background: linear-gradient(100deg, transparent 20%, var(--accent-gold-soft) 50%, transparent 80%); }
@keyframes lpStageShimmer { to { transform: translateX(120%); } }

/* cozy: paper, not glass */
[data-ux-mode="cozy"] .lp-stage-said, [data-ux-mode="cozy"] .lp-stage-box-row input { background: var(--surface-raised, #FFFBF2); backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-stage-canvas { display: none; }
}

/* ── motion through the page (spec §5) ─────────────────────────────────────── */
[data-reveal] { transition: opacity .55s ease, transform .55s ease; }
html.lp-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.lp-reveal [data-reveal]:nth-child(2) { transition-delay: .08s; }
html.lp-reveal [data-reveal]:nth-child(3) { transition-delay: .16s; }
html.lp-reveal [data-reveal]:nth-child(4) { transition-delay: .24s; }
html.lp-reveal [data-reveal]:nth-child(n+5) { transition-delay: .32s; }

/* step connector: one path through the three card centres, drawn on reveal */
.steps-grid { position: relative; }
.lp-steps-wire { position: absolute; left: 0; right: 0; top: 50%; height: 24px; width: 100%; transform: translateY(-50%); pointer-events: none; z-index: 0; }
.lp-steps-wire path { fill: none; stroke: var(--accent-purple); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: 200; opacity: .55;
  transition: stroke-dashoffset 1.2s ease-out .2s; }
.steps-grid.is-in .lp-steps-wire path { stroke-dashoffset: 0; }
.steps-grid .step-card { position: relative; z-index: 1; }
@media (max-width: 900px) { .lp-steps-wire { display: none; } }

/* run tiles count up without jitter */
.lp-run-tile dd { font-variant-numeric: tabular-nums; }

/* aurora halo outside the two primary buttons (the fill and its 5.17:1 text are untouched) */
[data-cta="hero-register"], [data-cta="final-register"] { position: relative; isolation: isolate; }
[data-cta="hero-register"]::before, [data-cta="final-register"]::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .7;
  background: conic-gradient(from var(--lp-aurora-angle, 0deg), var(--accent-blue), var(--accent-purple), var(--accent-gold, #d7b36a), var(--accent-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px;
  animation: lpAurora 6s linear infinite; }
@property --lp-aurora-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes lpAurora { to { --lp-aurora-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { [data-cta="hero-register"]::before, [data-cta="final-register"]::before { animation: none; } }