/* ============================================================================
   Landing page.

   Deliberately reuses the app's palette from styles.css rather than defining its own, so the
   screenshots sit on the page as though they belong to it instead of looking like a marketing
   site bolted onto a different product.
   ========================================================================== */

.lp { --lp-max: 1180px; }
/* The app is a fixed-height dashboard; the landing page scrolls. */
body.on-landing { min-height: auto; }

.lp img { max-width: 100%; height: auto; display: block; }

/* ---- nav ---- */
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(23,19,13,.86); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.lp-nav nav { display: flex; align-items: center; gap: 1.4rem; }
.lp-navlink { color: var(--text-dim); text-decoration: none; font-size: .92rem; }
.lp-navlink:hover { color: var(--gold); }

/* ---- hero ---- */
.lp-hero {
  max-width: var(--lp-max); margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem) 3rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
/* The hero kicker is a sentence, not a section label, so it drops the uppercase-and-tracking
   treatment the feature kickers use — that styling is unreadable past about three words. */
.lp-kicker-hero {
  margin-bottom: .75rem; font-size: clamp(.86rem, 1.3vw, .98rem);
  letter-spacing: 0; text-transform: none; color: var(--gold);
  font-weight: 600; max-width: 42ch; line-height: 1.4;
}
.lp-hero h1 {
  margin: 0 0 1rem; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.12;
  letter-spacing: -.5px; text-wrap: balance;
}
.lp-hero h1 em { color: var(--gold); font-style: normal; }
.lp-lede {
  margin: 0 0 1.6rem; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.55;
  color: var(--text-dim); max-width: 46ch;
}
.lp-lede b { color: var(--text); }
.lp-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.lp-cta.center { justify-content: center; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.02rem; }
.btn-sm { padding: .3rem .7rem; font-size: .84rem; }
.lp-cta-note { margin: .9rem 0 0; color: var(--text-dim); font-size: .86rem; max-width: 46ch; line-height: 1.55; }
.lp-cta-note b { color: var(--text); }

.lp-hero-shot { margin: 0; }
.lp-hero-shot img {
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(224,178,76,.08);
}

/* ---- three-up band ---- */
.lp-band { border-block: 1px solid var(--line); background: var(--bg-2); }
.lp-band-inner {
  max-width: var(--lp-max); margin: 0 auto;
  padding: 2.5rem clamp(1rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem;
}
.lp-point h3 { margin: 0 0 .5rem; color: var(--gold); font-size: 1.05rem; }
.lp-point p { margin: 0; color: var(--text-dim); line-height: 1.55; font-size: .94rem; }

/* ---- feature sections ---- */
.lp-section {
  max-width: var(--lp-max); margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
}
.lp-section-alt { max-width: none; background: var(--bg-2); border-block: 1px solid var(--line); }
.lp-section-alt > * { max-width: var(--lp-max); margin-inline: auto; }

.lp-h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 2.5rem;
  letter-spacing: -.3px; text-wrap: balance;
}
.lp-h2.flush { margin-bottom: 1rem; }

.lp-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.lp-feature:last-child { margin-bottom: 0; }
/* Alternate which side the screenshot falls on, so the page does not read as one long column. */
.lp-feature.reverse .lp-feature-text { order: 2; }
.lp-kicker {
  display: inline-block; margin-bottom: .5rem; color: var(--gold-dim);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
.lp-feature-text h3 {
  margin: 0 0 .7rem; font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.25; text-wrap: balance;
}
.lp-feature-text p { margin: 0 0 1rem; color: var(--text-dim); line-height: 1.6; }
.lp-list { margin: 0; padding: 0; list-style: none; }
.lp-list li {
  position: relative; padding-left: 1.4rem; margin-bottom: .45rem;
  color: var(--text-dim); font-size: .93rem;
}
.lp-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); }
.lp-quiet { color: var(--text-dim); font-size: .86rem; }

.lp-shot { margin: 0; }
.lp-shot img {
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.lp-shot-narrow { max-width: 420px; justify-self: center; }

/* Full-width feature (wide banner screenshot stacked under the copy) */
.lp-feature-wide { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.lp-feature-wide .lp-feature-text { max-width: 66ch; }
.lp-shot-wide { margin: 1.4rem 0 0; }
.lp-shot-wide img {
  display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* "Little things" note closing out the walkthrough */
.lp-cozy {
  margin: clamp(2rem, 5vw, 3.5rem) auto 0; max-width: 70ch; text-align: center;
  color: var(--text-dim); line-height: 1.6; font-size: .95rem;
}

/* ---- shared-profile gallery ---- */
.lp-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin-top: 3rem;
}
.lp-gallery figure { margin: 0; }
/* Fixed-height crops from the top: these are teasers, and ragged heights look accidental. */
.lp-gallery img {
  height: 190px; object-fit: cover; object-position: top;
  border: 1px solid var(--line); border-radius: 8px; opacity: .82;
  transition: opacity .15s, border-color .15s;
}
.lp-gallery figure:hover img { opacity: 1; border-color: var(--gold-dim); }
.lp-gallery figcaption { margin-top: .5rem; color: var(--text-dim); font-size: .84rem; }

/* ---- plugin ---- */
.lp-plugin {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.lp-plugin-side { display: flex; flex-wrap: wrap; gap: .6rem; align-content: center; }
.lp-track {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem .95rem; color: var(--text); font-size: .92rem; font-weight: 600;
}

/* ---- final CTA ---- */
.lp-final {
  text-align: center; padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: radial-gradient(700px 260px at 50% 0%, #2a2013 0%, transparent 70%);
}
.lp-final h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 .7rem; }
.lp-final p { color: var(--text-dim); margin: 0 auto 1.6rem; max-width: 52ch; line-height: 1.55; }
.lp-final .lp-quiet { margin-top: 1.2rem; }

.lp-foot {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
  max-width: var(--lp-max); margin: 0 auto;
  padding: 1.6rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--line);
}

/* ---- demo mode ---- */
.demo-bar {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center;
  padding: .5rem 1rem; background: linear-gradient(#3a2d16, #2f2412);
  border-bottom: 1px solid var(--gold-dim); font-size: .9rem;
}
.demo-bar b { color: var(--gold); }

.auth-card { position: relative; }
.auth-back {
  position: absolute; top: 1rem; left: 1.1rem;
  color: var(--text-dim); text-decoration: none; font-size: .88rem;
}
.auth-back:hover { color: var(--gold); }
.auth-demo { text-align: center; color: var(--text-dim); font-size: .88rem; margin: 1rem 0 0; }
.linklike {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--blue); cursor: pointer; text-decoration: underline;
}
.linklike:hover { color: var(--gold); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .lp-hero, .lp-feature, .lp-plugin { grid-template-columns: 1fr; }
  /* Reset the order so text always leads on a phone. Alternating sides only makes sense while
     the two columns sit next to each other. */
  .lp-feature.reverse .lp-feature-text { order: 0; }
  .lp-nav nav { gap: .9rem; }
  .lp-navlink { display: none; }
  /* Except the RS3 link. The others are anchors to sections further down this same page, so
     hiding them costs nothing — you can scroll. This one goes to a different page, and hiding it
     made the RS3 lookup unreachable from a phone entirely. Shortened to "RS3" so it fits beside
     the theme picker and Log in without wrapping. */
  .lp-navlink-rs3 { display: inline-flex; font-size: .84rem; }
  .lp-navlink-rs3 .lp-rs3-long { display: none; }
  .lp-navlink-rs3 .lp-rs3-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-gallery img { transition: none; }
}