/* Public landing page (ADR-022/ADR-023, rebuilt on the deck in ADR-027).
   The page *is* the deck — .deck--public reuses cassette.css for the rail,
   now-card, source panel, dock and speakers. What lives here is only the
   pitch above the deck, the locked affordances, and the pricing modal.
   Everything is token-driven; the page forces the mobayilo theme. */

/* --- shared pieces --------------------------------------------------------- */
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.34em;
}
.lp-brand__kana { font-size: 0.62rem; letter-spacing: 0.42em; color: var(--text-dim); font-weight: 400; }

.lp-cta-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.lp-cta { background: var(--accent); border-color: var(--accent); color: #06210f; }

/* --- always-visible auth entry, pinned to the corner (ADR-022/ADR-027) ----- */
/* Fixed rather than in-flow: at ≥1181px .page--landing is a pinned 100dvh
   appliance with overflow:hidden, so an in-flow header row would eat into
   that fixed height and clip the deck. Sits above the deck (z-index 250) but
   below the pricing modal (300) so the modal still overlays it correctly. */
.lp-auth {
  position: fixed;
  top: 1.1rem;
  right: 1.5rem;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lp-auth__signin { color: var(--text-dim); font-weight: 700; font-size: 0.9rem; }
.lp-auth__signin:hover { color: var(--text); text-decoration: none; }
.lp-auth__signup { padding: 0.5rem 1.15rem; font-size: 0.88rem; }
@media (max-width: 820px) {
  .lp-auth { top: 0.75rem; right: 0.9rem; gap: 0.6rem; }
  .lp-auth__signin { font-size: 0.82rem; }
  .lp-auth__signup { padding: 0.42rem 0.85rem; font-size: 0.82rem; }
}

/* --- the pitch, sitting above the deck's now-card -------------------------- */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 0.5rem 0.5rem;
}
/* Sized against the main column, not the viewport: at ≥1860px the flanking
   speakers squeeze .deck-main to ~400px on a 1920px screen, where a 5vw
   headline would have nowhere to go. .deck-main is the inline-size container.
   Three deliberate lines (the <br>s in the h1), so the scale stays calm —
   design-system display scale, capped below the old one-liner size. */
.lp-hero__headline { font-size: clamp(1.9rem, 6.5cqw, 3.1rem); line-height: 1.08; letter-spacing: -0.01em; margin: 2rem 0 0; }
.lp-hero__sub { max-width: 46ch; color: var(--text-dim); margin: 1.25rem 0 0; }

/* The now-card is the preview player; it keeps the deck's own progress bar. */
.lp-now { width: 100%; }

/* --- locked surfaces ------------------------------------------------------- */
/* Everything a visitor can see but not use yet wears the same hairline
   padlock: rail entries for the personal surfaces, and every track outside
   the free previews. */
.lock-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--text-dim);
  opacity: 0.7;
}
.rail-link--locked { justify-content: flex-start; }
.rail-link--locked .lock-icon { margin-left: auto; }
.rail-link--locked:hover .lock-icon { color: var(--accent); opacity: 1; }
.rail-note {
  margin: 0 0.65rem 0.5rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.playlist-note {
  margin: 0 0 0.75rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-dim);
}

/* A locked row still reads as a row — dimmed, never disabled: clicking it
   loads the tape onto the cassette and opens the pricing modal. */
.playlist-track--locked .playlist-track-title,
.playlist-track--locked .playlist-track-no { color: var(--text-dim); }
.pl-lock { display: inline-flex; align-items: center; }
.playlist-track:hover .pl-lock .lock-icon { color: var(--accent); opacity: 1; }

/* The free ones say so. */
.pl-free {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--wash-accent);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.45rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .lp-hero { padding-top: 1rem; }
  .lp-hero__headline { margin-top: 1.25rem; }

  /* The rail collapses to a one-row bar (☰ Library … Upload); start the page
     below the fixed corner auth so the two never overlap. */
  .page--landing.page--deck { padding-top: 3.6rem; }

  /* Upload becomes a 42px icon button — there's no room beside the glyph for
     a padlock too. */
  .rail-link--upload .lock-icon { display: none; }
}

/* --- pricing modal (simulated) ---------------------------------------------- */
.lp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  /* Scrollable, margin:auto centering: the modal sits centred when it fits and
     scrolls from the top when it's taller than the viewport (mobile) — so the
     "Sign up free" button at the bottom is always reachable. align-items:center
     would clip the top instead. */
  overflow-y: auto;
  /* A dark scrim: the deck behind is busy (speakers, cassette, playlist), so a
     heavy backdrop keeps it from bleeding through as visual noise. */
  background: color-mix(in srgb, #000 82%, transparent);
  padding: 1rem;
}
.lp-modal-overlay[hidden] { display: none; }
.lp-modal {
  position: relative;
  margin: auto;
  width: min(720px, 100%);
  background: var(--bg-raised);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.lp-modal__title { font-size: 1.6rem; font-weight: 700; margin: 0.25rem 0 0; }
.lp-modal__sub { margin: 0.5rem auto 0; max-width: 52ch; }
.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1rem 1.2rem;
  font: inherit;
  color: var(--text);
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.lp-plan:hover { border-color: var(--accent); transform: translateY(-2px); }
.lp-plan--featured { border-color: var(--accent); }
.lp-plan__badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #06210f;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-full);
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.lp-plan__name { font-weight: 700; letter-spacing: 0.06em; }
.lp-plan__price { font-size: 1.5rem; font-weight: 700; }
.lp-plan__price span { font-size: 0.8rem; color: var(--text-dim); font-weight: 400; }
.lp-plan__desc { font-size: 0.78rem; color: var(--text-dim); }
.lp-modal__x {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9rem;
}
.lp-modal__x:hover { color: var(--text); }
.lp-free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.lp-free__text { font-weight: 700; }
.lp-google { max-width: 420px; margin: 1.5rem auto 0; }
.lp-google-or { max-width: 420px; margin: 1rem auto; }

.lp-signup {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.lp-signup__email {
  flex: 0 1 320px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  font: inherit;
  color: var(--text);
}
.lp-signup__email:focus { outline: none; border-color: var(--accent); }

.lp-modal__close {
  margin-top: 1.25rem;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-modal__close:hover { color: var(--text); }
@media (max-width: 720px) {
  .lp-plans { grid-template-columns: 1fr; }
}