/* Landing page — "Full-Bleed Cinema".
   Standalone from style.css: the app UI is a light utility surface and this is a dark
   cinematic one, so they share only the palette. The five terracotta/paper/ink values
   below are the same tokens style.css declares; keep them in step if those change. */

:root {
  --lp-terra: #C67B5C;
  --lp-terra-dark: #A8624A;
  --lp-terra-light: #E8C4B4;
  --lp-paper: #FAFAF8;
  --lp-ink: #2D2D2D;
  /* Dark-surface extensions, tuned to the footage's warm shadows. */
  --lp-night: #17130F;
  --lp-cream: #F2EBE4;
  --lp-cream-70: rgba(242, 235, 228, 0.74);
  --lp-cream-45: rgba(242, 235, 228, 0.45);
  --lp-cream-16: rgba(242, 235, 228, 0.16);
  --lp-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --lp-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --lp-gutter: 96px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--lp-night);
  color: var(--lp-cream);
  font-family: var(--lp-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--lp-terra-light); text-decoration: none; }
a:hover { color: var(--lp-terra); }

/* ── Nav ─────────────────────────────────────────────────────────────── */

.lp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--lp-gutter);
  border-bottom: 1px solid var(--lp-cream-16);
  background: linear-gradient(to bottom, rgba(23, 19, 15, 0.72), rgba(23, 19, 15, 0));
  backdrop-filter: blur(2px);
}

.lp-wordmark {
  font-family: var(--lp-serif);
  font-size: 25px;
  letter-spacing: 0.01em;
  color: var(--lp-cream);
  white-space: nowrap;
}
.lp-wordmark:hover { color: var(--lp-cream); }

/* Same mark as the app's rule bar, same reasoning — see .mark in style.css.
   Terracotta rather than cream, so the C reads as the logo and not as the
   first letter of the word set in a different weight. */
.lp-mark {
  width: 0.676em;   /* 147.5:192, the viewBox's own ratio */
  height: 0.88em;
  margin-right: 0.09em;
  color: var(--lp-terra);
  fill: currentColor;
  /* The crop puts the jar's base exactly on the baseline, which reads a
     hair high next to type — a round glyph overshoots. -0.03em is that
     overshoot, measured against 0 / -0.015 / -0.045 / -0.06. */
  vertical-align: -0.03em;
  overflow: visible;
}

/* Where the mark replaces a literal C, this carries the letter for a screen
   reader — the visible text beside it only ever spells "laypath". */
.lp-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A break opportunity exists at the boundary between a replaced element and
   the text beside it, so the mark and "laypath" can land on separate lines
   the moment their line is tight. The nav gets this from .lp-wordmark; the
   headline and the footer need it on just the name, not the whole line. */
.lp-nb { white-space: nowrap; }

.lp-nav-links { display: flex; align-items: center; gap: 34px; }
.lp-nav-links a { font-size: 14px; color: var(--lp-cream-70); }
.lp-nav-links a:hover { color: var(--lp-cream); }

/* The account chip, for a visitor who is signed in (account.js builds it and
   account.css draws the menu behind it). In this nav it wears the ghost
   button's dress — cream hairline on the film, 8px corners, the height of
   "Open the app" beside it — rather than the app's square cell, which is a
   control from the drawing sheet and reads as pasted in here. The menu it
   opens stays the sheet's panel: it is the same account wherever it is
   opened. */
.lp-nav .acct-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(242, 235, 228, 0.28);
  border-radius: 8px;
  background: transparent;
  color: var(--lp-cream);
}
.lp-nav .acct-avatar svg { width: 18px; height: 18px; }
.lp-nav .acct-avatar:hover,
.lp-nav .acct-avatar[aria-expanded="true"] {
  background: rgba(242, 235, 228, 0.08);
  color: var(--lp-cream);
}

/* The half of the modal lock account.css leaves to the page. This page is a
   long scrolling document at every width, and its scroll drives the film, so
   it is held still under a dialog everywhere. account.js restores the offset
   on close, which scrubs the film back to exactly where it was. */
:root.is-modal-open body {
  position: fixed;
  width: 100%;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px;
  border-radius: 8px;
  background: var(--lp-terra);
  color: #1B1512;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.18s ease;
}
.lp-btn:hover { background: var(--lp-terra-light); color: #1B1512; }

.lp-btn-sm { height: 40px; padding: 0 20px; font-size: 14px; }

.lp-btn-ghost {
  background: transparent;
  border: 1px solid rgba(242, 235, 228, 0.28);
  color: var(--lp-cream);
  font-weight: 400;
  padding: 0 26px;
}
.lp-btn-ghost:hover { background: rgba(242, 235, 228, 0.08); color: var(--lp-cream); }

/* ── The scroll story ────────────────────────────────────────────────── */

.lp-story { position: relative; /* height set by landing.js */ }

.lp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--lp-night);
}

.lp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-scrim { position: absolute; inset: 0; pointer-events: none; }
.lp-scrim-side {
  background: linear-gradient(85deg,
    rgba(23, 19, 15, 0.94) 0%,
    rgba(23, 19, 15, 0.76) 30%,
    rgba(23, 19, 15, 0.14) 62%,
    rgba(23, 19, 15, 0.48) 100%);
}
.lp-scrim-vert {
  background: linear-gradient(to bottom,
    rgba(23, 19, 15, 0.74) 0%,
    rgba(23, 19, 15, 0.46) 42%,
    rgba(23, 19, 15, 0.06) 74%,
    rgba(23, 19, 15, 0.34) 100%);
}

/* ── Copy panels (one per beat, crossfaded in place) ─────────────────── */

/* Top-anchored: the film's action sits low in frame for most of its run, so the
   copy stays out of the bottom third and the rail takes that corner instead. */
.lp-panel {
  position: absolute;
  left: var(--lp-gutter);
  top: 150px;
  width: 560px;
  max-width: calc(100% - var(--lp-gutter) * 2);
  z-index: 4;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.lp-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* The hero panel is taller than the beats and sits higher up the frame. */
.lp-panel[data-beat="0"] { bottom: auto; top: 232px; width: 660px; }

.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--lp-terra-light);
}
.lp-rule { width: 40px; height: 1px; background: var(--lp-terra); flex-shrink: 0; }

.lp-panel h1 {
  font-family: var(--lp-serif);
  font-size: clamp(42px, 5.9vw, 85px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 28px;
}

.lp-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--lp-cream-70);
  max-width: 520px;
  text-wrap: pretty;
  margin-bottom: 40px;
}

.lp-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.lp-freeline {
  margin-top: 26px;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lp-cream-45);
  text-wrap: pretty;
}

.lp-num {
  font-family: var(--lp-serif);
  font-size: 108px;
  line-height: 0.8;
  color: var(--lp-terra);
  margin-bottom: 16px;
}

.lp-panel h2 {
  font-family: var(--lp-serif);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 18px;
}

.lp-panel p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(242, 235, 228, 0.78);
  text-wrap: pretty;
}

.lp-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lp-terra-light);
}
.lp-meta .lp-rule { width: 24px; background: rgba(198, 123, 92, 0.8); }

/* ── Step rail ───────────────────────────────────────────────────────── */

/* Bottom-left, aligned with the copy column above it. It cannot be vertically
   centred: the beat panels' display numeral reaches down into that band. */
.lp-rail {
  position: absolute;
  left: var(--lp-gutter);
  bottom: 108px;
  z-index: 5;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* Tied to the first beat's copy appearing, not to the first scroll: the hero panel
   occupies the same corner and the two overlap for the whole run-in otherwise. */
.lp-story.has-beat .lp-rail { opacity: 1; pointer-events: auto; }

.lp-rail li { display: flex; }

/* Each step is a real button — it jumps the scrub to that beat. The padding is hit
   area only; the negative margin keeps the list's visual rhythm at the 26px gap. */
.lp-rail-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px 8px 0;
  margin: -8px 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(242, 235, 228, 0.4);
  cursor: pointer;
  transition: color 0.3s ease;
}
.lp-rail-step:hover { color: var(--lp-cream); }
.lp-rail-step:focus-visible {
  outline: 2px solid var(--lp-terra);
  outline-offset: 4px;
  border-radius: 3px;
  color: var(--lp-cream);
}
.lp-rail li.is-active .lp-rail-step { color: var(--lp-cream); }
.lp-rail-step:hover .lp-dot { background: var(--lp-terra-light); }

.lp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(242, 235, 228, 0.28);
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.lp-rail li.is-active .lp-dot {
  background: var(--lp-terra);
  box-shadow: 0 0 0 5px rgba(198, 123, 92, 0.22);
}

/* ── Stage chrome ────────────────────────────────────────────────────── */

.lp-scrollcue,
.lp-clock {
  position: absolute;
  bottom: 52px;
  z-index: 4;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--lp-cream-45);
}
.lp-scrollcue { left: var(--lp-gutter); display: flex; align-items: center; gap: 12px; }
.lp-clock { right: var(--lp-gutter); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }

/* The cue is a hero-only invitation; once the story is running it's noise. */
.lp-story.is-scrubbing .lp-scrollcue { opacity: 0; transition: opacity 0.3s ease; }

.lp-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(242, 235, 228, 0.14);
  z-index: 6;
}
.lp-progress-fill { width: 0; height: 100%; background: var(--lp-terra); }

/* ── Formats ─────────────────────────────────────────────────────────── */

.lp-formats { padding: 120px var(--lp-gutter) 0; }

.lp-section-head { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.lp-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: var(--lp-terra); }
.lp-hairline { flex-grow: 1; height: 1px; background: var(--lp-cream-16); }

.lp-h2 {
  font-family: var(--lp-serif);
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 64px;
}

.lp-formats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }

.lp-collabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--lp-cream-45);
  margin-bottom: 28px;
}

.lp-inputs > div {
  position: relative;
  display: flex;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(242, 235, 228, 0.1);
}
.lp-inputs > div:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* The three inputs are alternatives, not a sequence, so the rule between them says
   so out loud. The label masks the rule with the page's own background rather than
   breaking it into two elements. */
.lp-inputs > div:not(:last-child)::after {
  content: 'OR';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  padding: 0 12px;
  background: var(--lp-night);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--lp-cream-45);
}
.lp-inputs dt {
  width: 68px;
  flex-shrink: 0;
  font-family: var(--lp-serif);
  font-size: 26px;
  color: var(--lp-terra-light);
}
.lp-inputs dd { font-size: 15px; line-height: 1.65; color: rgba(242, 235, 228, 0.68); text-wrap: pretty; }

.lp-outputs { display: flex; flex-direction: column; gap: 20px; }
.lp-outputs article {
  padding: 26px 28px;
  border: 1px solid var(--lp-cream-16);
  border-radius: 8px;
  background: rgba(242, 235, 228, 0.035);
}
.lp-outputs header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.lp-outputs h3 { font-family: var(--lp-serif); font-size: 27px; font-weight: 400; }
.lp-outputs p { font-size: 15px; line-height: 1.65; color: rgba(242, 235, 228, 0.68); text-wrap: pretty; }

.lp-tag {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--lp-terra-light);
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(198, 123, 92, 0.16);
}

.lp-final {
  margin-top: 88px;
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 44px 48px;
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(198, 123, 92, 0.16), rgba(198, 123, 92, 0.04));
}
.lp-final img {
  width: 268px;
  height: 172px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.lp-final-copy { flex-grow: 1; }
.lp-final h2 {
  font-family: var(--lp-serif);
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 12px;
}
.lp-final p { font-size: 16px; color: var(--lp-cream-70); }
.lp-final .lp-btn { height: 56px; padding: 0 32px; flex-shrink: 0; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.lp-footer {
  margin-top: 110px;
  padding: 34px var(--lp-gutter);
  border-top: 1px solid var(--lp-cream-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-size: 13px;
  color: var(--lp-cream-45);
}
.lp-footer > span:first-child { font-family: var(--lp-serif); font-size: 19px; color: var(--lp-cream); }
.lp-footer-note { max-width: 620px; text-wrap: pretty; }

/* The footer is a space-between row, so a third child would push the note off
   its own centre. These sit as their own group and hold together on one line —
   a policy link that wraps away from its siblings reads as unrelated. */
.lp-footer-links { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
/* The withdrawal function has to be prominent and permanently available
   (Consumer Rights Directive, Article 11a), and a fourth text link beside
   three others is neither. Boxed in the accent, which on this dark surface is
   the only other boxed thing in the footer. */
.lp-withdraw {
  padding: 6px 12px;
  border: 1px solid var(--lp-terra);
  text-decoration: none;
  transition: background 0.15s;
}
.lp-withdraw:hover { background: rgba(198, 123, 92, 0.14); }

/* ── Fallback: no scrubbing (reduced motion, or the video won't load) ──
   The stage stops pinning and each beat becomes an ordinary full-height
   section over its own still frame. */

.lp-story.lp-static { height: auto !important; }
.lp-story.lp-static .lp-stage { position: static; height: auto; }
.lp-story.lp-static .lp-video,
.lp-story.lp-static .lp-rail,
.lp-story.lp-static .lp-progress,
.lp-story.lp-static .lp-clock,
.lp-story.lp-static .lp-scrollcue { display: none; }
.lp-story.lp-static .lp-scrim { display: none; }

.lp-story.lp-static .lp-panel {
  position: relative;
  left: auto;
  bottom: auto;
  top: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  width: auto;
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--lp-gutter) 96px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 100vmax rgba(23, 19, 15, 0.62);
}
.lp-story.lp-static .lp-panel > * { max-width: 660px; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --lp-gutter: 56px; }
  .lp-panel { width: 500px; }
  .lp-formats-grid { gap: 48px; }
}

/* The closing band's image (268px) and button are both fixed width, so between the
   phone breakpoint and a wide desktop the copy column is the only thing that can
   give — at 880px the headline was wrapping to six lines in a 76px column. Stack it
   well before it gets there. The phone block below re-tunes the same properties. */
@media (max-width: 1080px) {
  .lp-final { flex-direction: column; align-items: stretch; gap: 28px; }
  .lp-final img { width: 100%; height: 200px; }
  .lp-final .lp-btn { justify-content: center; }
}

/* Short but wide windows — a laptop with browser chrome, a half-height window.
   The rail is pinned near the top and the copy block grows upward off the floor, so
   they close on each other as height shrinks: measured, they collide below ~730px
   (beat 4 has the longest body and is the worst case). Rather than drop the rail at
   the first sign of pressure, buy back the space it needs — the display numeral is
   the biggest single item on the copy side. Scoped above the phone breakpoint so it
   cannot interact with the mobile rules below. */
@media (min-width: 861px) and (max-height: 850px) {
  .lp-rail { bottom: 88px; gap: 18px; }

  .lp-panel { top: 120px; }
  .lp-num { font-size: 68px; margin-bottom: 10px; }
  .lp-panel h2 { margin-bottom: 14px; }
  .lp-meta { margin-top: 16px; }

  /* The hero is the tallest panel of the six and overflows the stage on its own at
     this height, so its headline scales off viewport height as well as width. */
  .lp-panel[data-beat="0"] { top: 150px; }
  .lp-panel[data-beat="0"] h1 { font-size: clamp(42px, min(5.9vw, 8.6vh), 85px); }
  .lp-eyebrow { margin-bottom: 20px; }
  .lp-sub { margin-bottom: 28px; }
  .lp-freeline { margin-top: 20px; }
}

/* Below this the two genuinely do not both fit, and the copy is what matters. */
@media (min-width: 861px) and (max-height: 700px) {
  .lp-rail { display: none; }
}

@media (max-width: 860px) {
  :root { --lp-gutter: 24px; }

  .lp-nav { height: 64px; }
  .lp-nav-links { gap: 18px; }
  .lp-nav-links a:not(.lp-btn) { display: none; }
  /* The nav is already down to the wordmark and one button here, and the mark
     is the C — so the word drops and the mark stands for it, the same trade
     the app's rule bar makes at its own phone tier. */
  .lp-wordmark-tail { display: none; }
  .lp-wordmark { font-size: 30px; }

  /* The side scrim is a left-to-right wash; on a narrow screen the copy sits
     over the whole frame, so it has to darken bottom-up instead. */
  .lp-scrim-side { background: linear-gradient(to bottom, rgba(23,19,15,0.72) 0%, rgba(23,19,15,0.52) 42%, rgba(23,19,15,0.16) 74%, rgba(23,19,15,0.4) 100%); }
  .lp-scrim-vert { background: linear-gradient(to bottom, rgba(23,19,15,0.46) 0%, rgba(23,19,15,0.28) 46%, rgba(23,19,15,0) 74%, rgba(23,19,15,0.36) 100%); }

  .lp-panel,
  .lp-panel[data-beat="0"] { width: auto; left: var(--lp-gutter); right: var(--lp-gutter); max-width: none; }
  .lp-panel { top: 96px; bottom: auto; }

  /* Anchored top AND bottom rather than growing upward off the floor: on a short
     phone the hero is tall enough to slide its first line under the fixed nav. */
  .lp-panel[data-beat="0"] {
    top: 84px;
    bottom: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Scale the headline off viewport height as well as width, so the block shrinks
     to fit the box above instead of overflowing it. */
  .lp-panel[data-beat="0"] h1 { font-size: clamp(29px, min(9.4vw, 6.1vh), 46px); }

  .lp-eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: 0.16em; }
  .lp-num { font-size: 72px; }
  .lp-sub { font-size: 15px; margin-bottom: 22px; }
  .lp-freeline { margin-top: 16px; font-size: 12px; }
  .lp-btn { height: 48px; padding: 0 22px; font-size: 15px; }

  /* The rail would sit on top of the copy at this width. */
  .lp-rail { display: none; }
  .lp-scrollcue { display: none; }
  .lp-clock { bottom: 18px; right: var(--lp-gutter); font-size: 11px; }

  .lp-formats { padding-top: 84px; }
  .lp-formats-grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .lp-h2 { margin-bottom: 44px; }

  .lp-final { flex-direction: column; align-items: stretch; gap: 26px; padding: 26px; margin-top: 56px; }
  .lp-final img { width: 100%; height: 190px; }
  .lp-final .lp-btn { justify-content: center; }

  .lp-footer { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 72px; }
}

/* Very short phones (SE-class, 568px). The hero's full stack does not fit between
   the nav and the floor at this height, and centring it just pushes the first line
   back under the nav — so the decorative chrome goes and the box gets the margins. */
@media (max-width: 860px) and (max-height: 640px) {
  .lp-panel[data-beat="0"] { top: 72px; bottom: 40px; }
  .lp-eyebrow { display: none; }
  .lp-clock { display: none; }
  .lp-sub { font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
  .lp-cta-row { gap: 12px; }
  .lp-btn { height: 46px; }
  .lp-freeline { margin-top: 12px; font-size: 11px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-panel, .lp-rail li, .lp-dot, .lp-btn { transition: none; }
}