/* =============================================================================
   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 white offset shadows, Saira display type, Berkeley
   Mono body copy and Regio Mono labels. 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: #42f07c;         /* page ground: app palette green-40    */
  --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                       */
  /* Offset shadows, selection, ticker separators. Pure white, so the offsets
     read as hard paper slabs against the green rather than the soft lift a
     mid-gray gave. Was magenta, then gray-15. */
  --st-accent: #ffffff;
  --st-on-dark: #9fb4b6;      /* body copy on dark                    */
  --st-on-dark-strong: #e8f2f0;

  /* ---- fonts ---- */
  /* Three faces, by role: Saira for anything titular (`.st-display`), Regio
     Mono for the small uppercase furniture that labels things (eyebrows, stat
     labels, ticker, step numerals — `.st-font-mono` users), and Berkeley Mono
     for everything that is read as a sentence. Berkeley is the element base
     below, so body copy gets it by inheritance and only the two exceptions
     name a face. */
  --st-font-display: "Saira", system-ui, -apple-system, sans-serif;
  --st-font-mono: "Regio Mono", ui-monospace, "SFMono-Regular", monospace;
  --st-font-body: "Berkeley 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-accent);

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

/* 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;
}

/* Ink on the accent, not white — the accent IS white now, so the old white-on-
   accent would be invisible. Both halves are stated explicitly so selected text
   reads the same on the green ground and inside the dark bands. */
.landing-lp-starter ::selection {
  background: var(--st-accent);
  color: var(--st-ink);
}

/* ---- 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;
}

/* The hero h1's size, on a hero-only class rather than on `.st-hero-title`:
   that one is shared with the finale h2, which stays at its own smaller size.
   (It has to be a class, not the `text-[64px]` utilities the finale already
   carries — a two-class scoped rule here outranks a single-class utility, so
   changing the shared rule would resize the finale too.)

   Capped at 120px, which the two forced lines only fit because the hero uses a
   wider container than the rest of the page: "GET PAID EVERY TIME" measures
   1227px at 120px Saira 800. The vw term keeps every narrower viewport below
   the width where that line would wrap. */
.landing-lp-starter .st-hero-h1 {
  font-size: clamp(42px, 8.8vw, 120px);
}

.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-body);
  text-transform: uppercase;
  border: 2px solid var(--st-ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--st-accent);
  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-accent);
  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-body);
  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 ------------------------------------------------------------------ */
/* No bottom seam: the bar sits flush on the green ground. */
.landing-lp-starter .st-bar {
  background: rgba(66, 240, 124, 0.93); /* --st-cash at 93% */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- ticker ------------------------------------------------------------------ */
/* Full-width dark strip; the track holds two copies of the item list and slides
   half its own width for a seamless loop. */
/* 60px total, borders included (Tailwind's preflight puts everything in
   border-box). The height lives here rather than as padding on the element so
   there is one number to change; the track takes the full height and its
   `items-center` centres the items in it. */
.landing-lp-starter .st-ticker {
  height: 60px;
  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;
  height: 100%;
  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; }
}