/* Lysto marketing landing. All classes are lp- prefixed so nothing here can
   collide with the app's styles in lysto.css (which uses .step, .dial,
   .eyebrow, .btn-primary etc. for entirely different components). Colours,
   fonts and tokens come from lysto.css :root. */

/* reset the landing screen from the app's centered 100vh flexbox to a normal,
   tall, scrolling document */
#screen-landing{
  min-height:0; display:block; align-items:stretch; justify-content:flex-start;
  padding:0; text-align:left; line-height:1.5;
}
#screen-landing a{ color:inherit; text-decoration:none; }

.lp-wrap{ max-width:1080px; margin:0 auto; padding:0 1.4rem; }

@keyframes lpBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ---------- top bar ---------- */
.lp-topbar{ position:sticky; top:0; z-index:20; background:rgba(238,240,239,.92); border-bottom:1px solid var(--ink); }
.lp-topbar-inner{ max-width:1080px; margin:0 auto; padding:.8rem 1.4rem; display:flex; align-items:center; justify-content:space-between; }
.lp-brand{ font-family:var(--mono); font-weight:600; font-size:1.35rem; display:inline-flex; align-items:center; letter-spacing:-.04em; }
.lp-brand .lp-caret{ display:inline-block; width:.34em; height:.82em; background:var(--accent); margin-left:.06em; border-radius:1px; }
.lp-code-entry{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--ink); padding:.5rem 1rem; cursor:pointer; transition:background-color .2s,color .2s; }
.lp-code-entry:hover{ background:var(--ink); color:var(--bg); }

/* ---------- hero ---------- */
.lp-hero{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:4.5rem 0 4rem; }
.lp-hero-word{ font-family:var(--mono); font-weight:600; font-size:4.6rem; line-height:1; letter-spacing:-.05em; display:inline-flex; align-items:center; margin-bottom:1.4rem; }
.lp-hero-word .lp-caret{ display:inline-block; width:.34em; height:.82em; background:var(--accent); margin-left:.05em; border-radius:2px; animation:lpBlink 1.05s steps(1) infinite; }
.lp-hero h1{ font-size:1.9rem; font-weight:600; line-height:1.2; margin:0 0 1rem; letter-spacing:-.01em; }
.lp-hero p.lp-sub{ font-size:1.05rem; color:var(--ink-soft); margin:0 0 2rem; max-width:32ch; }
.lp-cta-row{ display:flex; gap:.9rem; flex-wrap:wrap; }
.lp-btn{ background:var(--ink); color:var(--bg); border:1px solid var(--ink); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; padding:.85rem 1.7rem; cursor:pointer; transition:background-color .2s,border-color .2s; }
.lp-btn:hover{ background:var(--accent); border-color:var(--accent); }
.lp-btn-ghost{ display:inline-block; background:none; color:var(--ink); border:1px solid var(--ink); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; padding:.85rem 1.7rem; cursor:pointer; transition:background-color .2s,color .2s; }
.lp-btn-ghost:hover{ background:var(--ink); color:var(--bg); }

/* ---------- dial demo ---------- */
.lp-demo{ background:var(--panel); border:1px solid var(--ink); padding:1.8rem 1.6rem 1.6rem; }
.lp-demo-label{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); text-align:center; margin-bottom:.2rem; }
.lp-demo-hint{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); text-align:center; margin-bottom:1rem; }
.lp-dial-host{ width:190px; margin:0 auto; }
.lp-dial{ cursor:grab; touch-action:none; display:block; width:100%; height:auto; }
.lp-dial:active{ cursor:grabbing; }
.lp-dial-value{ font-family:var(--mono); font-size:1.9rem; text-align:center; margin-top:.6rem; font-variant-numeric:tabular-nums; }
.lp-dial-zone{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); text-align:center; margin-bottom:1.2rem; }
/* min-heights reserve space for the biggest combo so changing the budget never
   reflows the card (and with it the whole hero) — no page jump. */
.lp-demo-pick{ border-top:1px solid #dcdedc; padding-top:1rem; }
.lp-demo-pick-head{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:.7rem; }
/* tall enough for the biggest combo the dial can produce (5 items), so dragging
   fast through positions never resizes the card and jolts the page */
#lpPickItems{ min-height:9.9rem; }
.lp-demo-item{ display:flex; justify-content:space-between; font-size:.9rem; padding:.28rem 0; border-bottom:1px solid #dcdedc; }
.lp-demo-item:last-of-type{ border-bottom:none; }
.lp-demo-item .lp-p{ font-family:var(--mono); color:var(--ink-soft); }
.lp-demo-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; min-height:4.6rem; align-content:flex-start; }
.lp-chip{ font-family:var(--mono); font-size:.68rem; padding:.28rem .6rem; background:var(--accent-soft); color:var(--accent); border:1px solid transparent; }

/* ---------- section shells ---------- */
#screen-landing section{ padding:3.6rem 0; border-top:1px solid var(--ink); }
/* The paste demo is a timed animation, so it needs more scroll distance than a
   static section — otherwise it's trivial to blow straight past and miss it.
   Extra height buys dwell time without ever hijacking the user's scroll. */
#screen-landing section.lp-tall{ padding:7.5rem 0; }
.lp-eyebrow{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:.7rem; text-align:center; }
.lp-sec-title{ font-size:1.5rem; font-weight:600; text-align:center; margin:0 0 2.6rem; letter-spacing:-.01em; }
/* high-contrast phrase: body copy is muted, so ink + bold makes it pop */
.lp-pop{ color:var(--ink); font-weight:700; }
/* loud full-bleed dark band to break the linear light rhythm */
#screen-landing section.lp-loud{ background:var(--ink); border-top:none; padding:4.6rem 0; }
.lp-loud-line{ font-size:2.7rem; font-weight:700; text-align:center; color:var(--bg); margin:0; letter-spacing:-.02em; line-height:1.15; }
/* highlight: a gradient so the tour can wipe it in left-to-right. Default is
   fully painted (returning visitors / reduced-motion see it highlighted). */
.lp-loud-line .lp-hl{ background:linear-gradient(var(--accent),var(--accent)) left center / 100% 100% no-repeat; color:#fff; padding:.02em .24em; transition:background-size .55s cubic-bezier(.4,0,.2,1); }
.lp-loud-line .lp-hl.lp-armed{ background-size:0% 100%; }

/* CTA pulse when the tour lands on it */
@keyframes lpPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.lp-btn.lp-pulse{ animation:lpPulse .8s ease 2; }

/* the guided onboarding cursor (position driven by JS in landing.js) */
.lp-tour-cursor{ position:fixed; top:0; left:0; width:26px; height:26px; margin:-3px 0 0 -3px; pointer-events:none; z-index:60; opacity:0; transition:opacity .45s ease; will-change:transform; transform-origin:5px 4px; }
.lp-tour-cursor.lp-on{ opacity:1; }
.lp-tour-cursor svg{ display:block; transition:transform .12s ease; filter:drop-shadow(0 1px 2px rgba(20,22,26,.4)); }
.lp-tour-cursor.lp-press svg{ transform:scale(.78); }
@media (prefers-reduced-motion: reduce){ .lp-tour-cursor{ display:none; } }

/* how it works */
.lp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.lp-step{ background:var(--panel); border:1px solid var(--ink); padding:1.4rem; }
.lp-step-n{ font-family:var(--mono); font-size:.72rem; color:var(--accent); letter-spacing:.1em; margin-bottom:.8rem; }
.lp-step h3{ font-size:1.05rem; margin:0 0 .5rem; font-weight:600; }
.lp-step p{ font-size:.9rem; color:var(--ink-soft); margin:0 0 1.1rem; }
.lp-mini{ border:1px solid #dcdedc; background:var(--bg); padding:.7rem; font-family:var(--mono); font-size:.74rem; }
.lp-mini-row{ display:flex; justify-content:space-between; padding:.22rem 0; color:var(--ink-soft); }
.lp-mini-row b{ color:var(--ink); font-weight:600; }
.lp-mini-code{ text-align:center; }
.lp-mini-code .lp-big{ font-size:1.1rem; color:var(--ink); letter-spacing:.04em; }
.lp-mini-pick .lp-name{ color:var(--ink); }
.lp-mini-chip{ display:inline-block; margin-top:.5rem; margin-right:.35rem; background:var(--accent-soft); color:var(--accent); padding:.2rem .5rem; font-size:.66rem; }
/* copy button (in Share-your-list card) with a wipe-fill on success */
.lp-copy-btn{ position:relative; margin-top:.8rem; border:1px solid var(--ink); background:var(--panel); font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; padding:.42rem .9rem; cursor:pointer; }
/* -1px inset so the wipe covers the border too — otherwise a hairline of the
   button's own edge stays visible along the bottom when it's "filled". */
.lp-copy-btn .lp-fill{ position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.4,0,.2,1); }
.lp-copy-btn.lp-copied .lp-fill{ transform:scaleX(1); }
.lp-copy-btn .lp-label{ position:relative; z-index:1; color:var(--ink); transition:color .15s ease .12s; }
.lp-copy-btn.lp-copied .lp-label{ color:#fff; }

/* analysis showcase */
.lp-explain-intro{ text-align:center; color:var(--ink-soft); max-width:48ch; margin:-1.8rem auto 2.4rem; font-size:1rem; }
.lp-explain-card{ max-width:440px; margin:0 auto; border:2px solid var(--ink); background:var(--panel); padding:1.4rem 1.5rem; }
.lp-explain-head{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:1rem; }
.lp-explain-item{ display:flex; justify-content:space-between; font-size:1rem; padding:.35rem 0; border-bottom:1px solid #dcdedc; }
.lp-explain-item .lp-p{ font-family:var(--mono); color:var(--ink-soft); }
.lp-explain-total{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.82rem; padding:.6rem 0 1rem; color:var(--ink); }
.lp-reasons{ list-style:none; margin:0; padding:1rem 0 0; border-top:1px solid #dcdedc; }
.lp-reasons li{ position:relative; padding-left:1.3rem; font-size:.92rem; color:var(--ink); margin-bottom:.55rem; opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; }
.lp-reasons li:last-child{ margin-bottom:0; }
.lp-reasons li::before{ content:""; position:absolute; left:0; top:.45em; width:.5rem; height:.5rem; background:var(--accent); }
/* bullets fade + rise in one by one when scrolled into view */
.lp-reasons.lp-reveal li{ opacity:1; transform:none; }
.lp-reasons.lp-reveal li:nth-child(1){ transition-delay:0s; }
.lp-reasons.lp-reveal li:nth-child(2){ transition-delay:.13s; }
.lp-reasons.lp-reveal li:nth-child(3){ transition-delay:.26s; }
.lp-reasons.lp-reveal li:nth-child(4){ transition-delay:.39s; }
@media (prefers-reduced-motion: reduce){ .lp-reasons li{ opacity:1; transform:none; transition:none; } }

/* animated "add from anywhere" demo */
.lp-paste-demo{ position:relative; max-width:460px; margin:0 auto; background:var(--panel); border:1px solid var(--ink); padding:1.4rem; }
.lp-paste-row{ display:flex; align-items:stretch; gap:.5rem; }
.lp-paste-row .lp-paste-field{ flex:1; min-width:0; }
/* the Paste button the cursor actually clicks — makes the causality readable */
.lp-paste-btn{ flex:none; font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; padding:.42rem .95rem; border:1px solid var(--ink); background:var(--panel); color:var(--ink); cursor:pointer; transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .14s ease; }
.lp-paste-btn:hover{ background:var(--ink); color:var(--bg); }
.lp-paste-btn.lp-pressed{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(.96); }
.lp-paste-field{ display:flex; align-items:center; gap:.55rem; border:1px solid var(--ink); background:var(--bg); padding:.6rem .7rem; overflow:hidden; transition:border-color .15s ease; }
/* empty state reads as a real input waiting for a link */
.lp-paste-url:empty::before{ content:"paste a product link\2026"; color:var(--ink-soft); opacity:.7; }
.lp-paste-field.lp-focus{ border-color:var(--accent); }
.lp-paste-field .lp-tag{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); flex:none; }
.lp-paste-url{ font-family:var(--mono); font-size:.82rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-paste-status{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin:.75rem 0 .55rem; min-height:1rem; }
.lp-paste-result{ display:flex; align-items:center; gap:.9rem; border:1px solid #dcdedc; background:var(--bg); padding:.7rem; opacity:0; transform:translateY(8px); transition:opacity .35s ease,transform .35s ease; }
.lp-paste-result.lp-shown{ opacity:1; transform:none; }
.lp-paste-thumb{ width:46px; height:46px; background:var(--accent-soft); border:1px solid #dcdedc; flex:none; display:flex; align-items:center; justify-content:center; }
.lp-paste-thumb svg{ width:30px; height:30px; }
.lp-paste-info{ flex:1; min-width:0; }
.lp-paste-name{ font-size:.94rem; font-weight:600; }
.lp-paste-price{ font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); }
.lp-paste-check{ color:var(--accent); font-weight:700; font-size:1.1rem; flex:none; }
.lp-paste-note{ text-align:center; color:var(--ink-soft); font-size:.9rem; max-width:40ch; margin:1.4rem auto 0; }
/* paste polish: a flash on the field when the link lands + the check popping in */
@keyframes lpFlash{ 0%{ background:var(--accent-soft); } 100%{ background:var(--bg); } }
.lp-paste-field.lp-flash{ animation:lpFlash .5s ease; }
@keyframes lpPop{ 0%{ transform:scale(0); } 55%{ transform:scale(1.28); } 100%{ transform:scale(1); } }
.lp-paste-result.lp-shown .lp-paste-check{ animation:lpPop .42s cubic-bezier(.34,1.56,.64,1); }
/* fake pointer that moves in and clicks */
.lp-cursor-wrap{ position:absolute; top:0; left:0; pointer-events:none; z-index:6; transition:transform .55s cubic-bezier(.4,0,.2,1); opacity:0; }
.lp-cursor-wrap.lp-live{ opacity:1; }
.lp-cursor-arrow{ display:block; width:22px; height:22px; transition:transform .11s ease; filter:drop-shadow(0 1px 1.5px rgba(20,22,26,.35)); }
.lp-cursor-wrap.lp-clicking .lp-cursor-arrow{ transform:scale(.78); }

/* why different */
.lp-beats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.lp-beat{ padding:.4rem; }
.lp-beat .lp-ico{ width:34px; height:34px; color:var(--accent); margin-bottom:.9rem; }
.lp-beat h3{ font-size:1.02rem; margin:0 0 .5rem; font-weight:600; }
.lp-beat p{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* closing */
.lp-closing{ text-align:center; }
.lp-closing h2{ font-size:1.7rem; font-weight:600; margin:0 0 1.6rem; }

.lp-footer{ border-top:1px solid var(--ink); padding:2rem 0; }
.lp-foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); }
.lp-foot-inner a{ color:var(--ink-soft); }
.lp-foot-inner a:hover{ color:var(--ink); }

/* ===================== life: reveals + hover ===================== */
/* Nothing arrives statically — elements rise + fade in on scroll with a
   liquid expo easing. This is what makes a restrained page feel alive. */
.lp-rise{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .4s ease; }
.lp-rise.lp-in{ opacity:1; transform:none; }
/* stagger the cards within a row so they flow in, not all at once */
.lp-steps .lp-step:nth-child(2), .lp-beats .lp-beat:nth-child(2){ transition-delay:.09s; }
.lp-steps .lp-step:nth-child(3), .lp-beats .lp-beat:nth-child(3){ transition-delay:.18s; }
/* hero pieces cascade in on load */
.lp-hero h1.lp-rise{ transition-delay:.06s; }
.lp-hero .lp-sub.lp-rise{ transition-delay:.12s; }
.lp-hero .lp-cta-row.lp-rise{ transition-delay:.18s; }
/* card hover: teal edge + a soft lift-shadow (uses no transform, so it
   coexists with the reveal's transform) */
.lp-step:hover, .lp-explain-card:hover{ border-color:var(--accent); box-shadow:0 18px 38px -22px rgba(20,22,26,.45); }
/* buttons + code chip spring up a touch on hover */
.lp-btn, .lp-btn-ghost, .lp-code-entry{ transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .24s cubic-bezier(.34,1.5,.64,1); }
.lp-btn:hover, .lp-btn-ghost:hover, .lp-code-entry:hover{ transform:translateY(-2px); }
/* These two are <a>s, and `#screen-landing a{color:inherit}` (0-1-0-1) outranks
   a plain `.class:hover` (0-0-2-0) — so the label kept its dark colour on the
   dark hover fill and vanished. Scoped here so the hover colour actually wins. */
#screen-landing .lp-btn-ghost:hover, #screen-landing .lp-code-entry:hover{ background:var(--ink); color:var(--bg); }

@media (prefers-reduced-motion: reduce){
  .lp-rise{ opacity:1; transform:none; transition:none; }
  .lp-btn:hover, .lp-btn-ghost:hover, .lp-code-entry:hover{ transform:none; }
}

@media (max-width:820px){
  .lp-hero{ grid-template-columns:1fr; gap:2.2rem; padding:3rem 0; }
  .lp-hero-word{ font-size:3.6rem; }
  .lp-steps,.lp-beats{ grid-template-columns:1fr; }
  .lp-demo{ max-width:360px; margin:0 auto; }
  .lp-loud-line{ font-size:1.85rem; }
}