/* =============================================================================
   LP starter landing ("/start") — scoped styles.
   Loaded as its own stylesheet (registered in src/dev/build.clj `files`), NOT
   merged into site.css. Every rule is scoped under `.landing-lp-starter` so it
   only applies inside this landing and never affects the rest of the app.

   Identity: the app is near-black with green accents; this page inverts that —
   a full-bleed cash-green ground with deep green-ink text, hard-edged dark
   bands, paper cards with offset shadows (magenta, the one loud accent), Saira
   display type and Regio Mono numerals. Same brand family as the app and the
   Stable Hooks landing (which owns lime), deliberately not the same look.

   The ground-token system: sections sit either on the green page ground or
   inside a `.st-band` dark band. Foreground/card/highlight tokens are defined
   once per ground and everything styles through them, so components never need
   per-band variants.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&display=swap');

.landing-lp-starter {
  /* ---- palette ---- */
  --st-cash: #19ef75;         /* page ground                          */
  --st-ink: #03150c;          /* near-black green: text, borders      */
  --st-ink-2: #0b3a20;        /* body copy on green                   */
  --st-ink-3: #2c6b47;        /* muted labels on green                */
  --st-band: #031116;         /* dark band ground (app ink)           */
  --st-band-2: #071a21;       /* raised surface inside dark bands     */
  --st-line-soft: #0f242c;    /* hairlines inside dark bands          */
  --st-paper: #f4fff7;        /* card surface on green                */
  --st-green: #14f46f;        /* accent on dark                       */
  --st-magenta: #f43fdf;      /* offset shadows, ticker separators    */
  --st-on-dark: #9fb4b6;      /* body copy on dark                    */
  --st-on-dark-strong: #e8f2f0;

  /* ---- fonts ---- */
  --st-font-display: "Saira", system-ui, -apple-system, sans-serif;
  --st-font-mono: "Regio Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- ground tokens: green page ground ---- */
  --st-fg-strong: var(--st-ink);
  --st-fg: var(--st-ink-2);
  --st-fg-muted: var(--st-ink-3);
  --st-hl: var(--st-ink);                      /* eyebrows, links, step nums */
  --st-card-bg: var(--st-paper);
  --st-card-border: 2px solid var(--st-ink);
  --st-card-shadow: 6px 6px 0 var(--st-magenta);

  background-color: var(--st-cash);
  color: var(--st-fg);
  font-family: var(--st-font-display);
}

/* style.css carries a global `p { color: #B7CBC1; ... }` element rule that
   beats inherited color on every paragraph, so without this reset all body
   copy here renders app-sage on green. Only `color` is reset: the global
   rule's size/leading are already beaten by this landing's Tailwind utility
   classes (class > element), and resetting more at (0,1,1) would overpower
   those same utilities. Headings need nothing — their color comes from
   `.st-display` and their sizes from utility classes. */
.landing-lp-starter p {
  color: inherit;
}

.landing-lp-starter ::selection {
  background: var(--st-magenta);
  color: #fff;
}

/* ---- dark band: retokenize the same components ---------------------------- */
.landing-lp-starter .st-band {
  --st-fg-strong: var(--st-on-dark-strong);
  --st-fg: var(--st-on-dark);
  --st-fg-muted: #6c8489;
  --st-hl: var(--st-green);
  --st-card-bg: var(--st-band-2);
  --st-card-border: 1px solid var(--st-line-soft);
  --st-card-shadow: none;

  background-color: var(--st-band);
  color: var(--st-fg);
  border-top: 2px solid var(--st-ink);
  border-bottom: 2px solid var(--st-ink);
}

/* ---- type ------------------------------------------------------------------ */
.landing-lp-starter .st-display {
  font-family: var(--st-font-display);
  letter-spacing: -0.02em;
  color: var(--st-fg-strong);
  text-wrap: balance;
}

.landing-lp-starter .st-hero-title {
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(42px, 7.4vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}

.landing-lp-starter .st-mono {
  font-family: var(--st-font-mono);
}

.landing-lp-starter .st-eyebrow {
  font-family: var(--st-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--st-hl);
  border: 1.5px solid var(--st-hl);
  border-radius: 999px;
  padding: 4px 12px;
  width: fit-content;
}

/* ---- buttons ---------------------------------------------------------------- */
.landing-lp-starter .st-btn {
  background: var(--st-ink);
  color: var(--st-cash);
  font-family: var(--st-font-mono);
  text-transform: uppercase;
  border: 2px solid var(--st-ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--st-magenta);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.landing-lp-starter .st-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--st-magenta);
  color: var(--st-cash);
  text-decoration: none;
}

.landing-lp-starter .st-btn-ghost {
  background: transparent;
  color: var(--st-fg-strong);
  font-family: var(--st-font-mono);
  text-transform: uppercase;
  border: 2px solid var(--st-fg-strong);
  border-radius: 8px;
  transition: background-color 120ms ease, color 120ms ease;
}
.landing-lp-starter .st-btn-ghost:hover {
  background: var(--st-ink);
  color: var(--st-cash);
  text-decoration: none;
}

/* ---- surfaces ---------------------------------------------------------------- */
.landing-lp-starter .st-card {
  background: var(--st-card-bg);
  border: var(--st-card-border);
  box-shadow: var(--st-card-shadow);
  border-radius: 12px;
}
/* Card copy keys off the surface, not the ground: paper cards read in ink even
   though they sit on green. */
.landing-lp-starter .st-card {
  color: var(--st-ink-2);
}
.landing-lp-starter .st-card .st-display { color: var(--st-ink); }
.landing-lp-starter .st-band .st-card { color: var(--st-fg); }
.landing-lp-starter .st-band .st-card .st-display { color: var(--st-fg-strong); }

.landing-lp-starter .st-shot {
  border: var(--st-card-border);
  box-shadow: var(--st-card-shadow);
  border-radius: 12px;
  overflow: hidden;
  background: var(--st-band-2);
}
.landing-lp-starter .st-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tables (compare, pricing) — paper slabs on the green ground. */
.landing-lp-starter .st-table {
  background: var(--st-card-bg);
  border: var(--st-card-border);
  box-shadow: var(--st-card-shadow);
  border-radius: 12px;
  overflow: hidden;
  color: var(--st-ink-2);
}
.landing-lp-starter .st-table-head {
  background: rgba(3, 21, 12, 0.07);
}
.landing-lp-starter .st-row {
  border-top: 1.5px solid rgba(3, 21, 12, 0.14);
}
.landing-lp-starter .st-row:first-child { border-top: 0; }

/* ---- step / list numerals ---------------------------------------------------- */
.landing-lp-starter .st-num {
  font-family: var(--st-font-mono);
  color: var(--st-hl);
  border: 1.5px solid currentColor;
  border-radius: 999px;
}
/* Inside paper cards the highlight is ink regardless of band. */
.landing-lp-starter .st-card .st-num { color: var(--st-ink); }
.landing-lp-starter .st-band .st-card .st-num { color: var(--st-green); }

/* ---- links ------------------------------------------------------------------- */
.landing-lp-starter .st-link {
  color: var(--st-hl);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.landing-lp-starter .st-link:hover { color: var(--st-hl); }

/* ---- header ------------------------------------------------------------------ */
.landing-lp-starter .st-bar {
  background: rgba(25, 239, 117, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--st-ink);
}

/* ---- ticker ------------------------------------------------------------------ */
/* Full-width dark strip; the track holds two copies of the item list and slides
   half its own width for a seamless loop. */
.landing-lp-starter .st-ticker {
  overflow: hidden;
  background: var(--st-band);
  border-top: 2px solid var(--st-ink);
  border-bottom: 2px solid var(--st-ink);
}
.landing-lp-starter .st-ticker-track {
  display: flex;
  width: max-content;
  animation: st-marquee 45s linear infinite;
}
@keyframes st-marquee {
  to { transform: translateX(-50%); }
}

/* ---- scroll reveal ------------------------------------------------------------ */
.landing-lp-starter .st-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.landing-lp-starter .st-reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- FAQ ----------------------------------------------------------------------- */
.landing-lp-starter details.st-faq {
  border-bottom: 1px solid var(--st-line-soft);
}
.landing-lp-starter details.st-faq > summary {
  cursor: pointer;
  list-style: none;
  color: var(--st-fg-strong);
}
.landing-lp-starter details.st-faq > summary::-webkit-details-marker { display: none; }
.landing-lp-starter details.st-faq > summary::after {
  content: "+";
  float: right;
  color: var(--st-hl);
  font-family: var(--st-font-mono);
}
.landing-lp-starter details.st-faq[open] > summary::after {
  content: "\2212"; /* minus */
}

/* ---- reduced motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .landing-lp-starter .st-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .landing-lp-starter .st-ticker { overflow-x: auto; }
  .landing-lp-starter .st-ticker-track { animation: none; }
  .landing-lp-starter .st-btn { transition: none; }
}