/*
 * HoldSteady — landing-page-only styles.
 *
 * Loaded after Pico and /styles/app.css on /pages/landing.html ONLY.
 * Anything that already exists in app.css (status palette, ticker badge,
 * assumption cards, status bar, row tints, highlight tints, timeline
 * segment colours, .hs-cta button, .hs-meta, .hs-section-heading, ...)
 * is reused as-is. This file covers:
 *
 *   - the "browser screenshot" demo-frame chrome wrapping each fake screen,
 *   - the typewriter caret + button-pulse keyframes,
 *   - the marketing-only .btn.primary / .btn.ghost (the in-app uses
 *     .hs-cta which is too small for a hero CTA),
 *   - hero/section typography overrides (the marketing voice runs bigger
 *     than the in-app voice),
 *   - the hero and history two-column grids,
 *   - the .reveal scroll-fade helper,
 *   - the closing centered CTA section + site footer,
 *   - the floating "Replay ↻" button on the hero demo,
 *   - the change-caption styling under tickers in the section-3 table.
 *
 * No --hs-* custom property is redeclared here — those live on :root in
 * app.css. Adding them again would just be drift waiting to happen.
 */

/* ============================================================
   Hero & section typography overrides.

   Pico defaults headings to its own scale; the marketing page wants
   a tighter, larger voice. Local to this page so /thesis et al. keep
   Pico's scale unchanged.
   ============================================================ */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hs-fg-3);
  margin: 0 0 12px;
}
h1.hero-headline {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 22ch;
}
.hero-sub {
  font-size: 17px;
  color: var(--hs-fg-2);
  max-width: 52ch;
  margin: 0 0 28px;
}
h2.section-headline {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: 22ch;
}
.section-sub {
  font-size: 16px;
  color: var(--hs-fg-2);
  max-width: 56ch;
  margin: 0 0 36px;
}
.micro-note {
  font-size: 12.5px;
  color: var(--hs-fg-3);
  margin-top: 12px;
}

/* ============================================================
   Section rhythm — generous vertical padding plus hairline rules
   between sections so the page reads as a quiet vertical stack.
   ============================================================ */
.landing-section {
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--hs-border-muted);
}
.landing-section:last-of-type { border-bottom: none; }
.landing-section.hero { padding-top: 64px; padding-bottom: 96px; }

/* ============================================================
   Marketing buttons.

   The in-app .hs-cta is a 4px-padded chip that sits next to the brand
   in the header. Hero CTAs need to be bigger and the page wants a
   primary/ghost pair, so we add a marketing-only .btn family rather
   than overload .hs-cta.
   ============================================================ */
.cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  padding: 10px 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn.primary {
  background: var(--hs-accent);
  color: #fff;
}
.btn.primary:hover {
  background: var(--hs-accent-hover);
  color: #fff;
}
.btn.ghost {
  background: transparent;
  color: var(--hs-fg-1);
  border-color: var(--hs-border);
}
.btn.ghost:hover {
  border-color: var(--hs-fg-2);
  color: var(--hs-fg-1);
}

/* ============================================================
   Hero & history grids — 5fr/7fr on wide screens, single column
   below 980px so the copy stays above the demo on mobile.
   ============================================================ */
.hero-grid,
.history-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 980px) {
  .hero-grid,
  .history-grid {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: start;
  }
}

.hero-demo-wrap { position: relative; }

/* ============================================================
   Demo "browser window" frame.

   Each section's hero screenshot lives inside a .demo-frame. The
   .demo-chrome strip with three dots + a fake URL is what reads
   as "screenshot, not live UI" to the visitor.
   ============================================================ */
.demo-frame {
  background: var(--hs-bg-page);
  border: 1px solid var(--hs-border);
  border-radius: 6px;
  overflow: hidden;
}
.demo-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--hs-bg-muted);
  border-bottom: 1px solid var(--hs-border-muted);
}
.demo-chrome .dots { display: flex; gap: 6px; }
.demo-chrome .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8dde2;
}
.demo-chrome .url {
  flex: 1;
  text-align: center;
  font-family: var(--hs-mono);
  font-size: 11.5px;
  color: var(--hs-fg-3);
}
.demo-body { padding: 20px 22px 22px; }

/* The in-app .hs-meta has a 1.5rem bottom margin that suits the real
   thesis page. Inside a tight demo-frame header it's too much air. */
.demo-frame .hs-meta { margin-bottom: 0; }

/* ============================================================
   Demo header (ticker + title + meta) inside the hero frame.
   ============================================================ */
.demo-thesis-head {
  margin-bottom: 14px;
}
.demo-thesis-head .ticker-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-fg-3);
  margin-bottom: 4px;
}
.demo-thesis-head h3 {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 700;
}
.demo-thesis-head .demo-meta {
  font-size: 12px;
  color: var(--hs-fg-3);
  margin-top: 2px;
}

/* ============================================================
   Animated typewriter body.

   The text grows char-by-char with a blinking caret. Once typing
   finishes we add .done to hide the caret, and .revealed to fade in
   the highlight tints. The actual <mark> tints come from app.css
   (.hs-hl-* rules); here we just transition them in on .revealed
   so the highlights "arrive" after the analyze step.
   ============================================================ */
.thesis-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--hs-fg-1);
  margin: 0 0 14px;
  min-height: 8.5em;
  position: relative;
}
.thesis-text .caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  background: var(--hs-accent);
  vertical-align: text-bottom;
  transform: translateY(2px);
  animation: hs-caret-blink 800ms steps(2, start) infinite;
}
.thesis-text.done .caret { display: none; }
@keyframes hs-caret-blink {
  to { opacity: 0; }
}

/* Pre-reveal: the marks render as plain text, no tint, no underline.
   Post-reveal: app.css's .hs-hl-* rules win because the element has
   both .hs-hl and the status class, and the transition runs in. */
.thesis-text mark.hs-hl {
  transition: background-color 320ms ease, border-color 320ms ease;
}
.thesis-text:not(.revealed) mark.hs-hl {
  background: transparent;
  border-bottom-color: transparent;
}

.thesis-footnote {
  font-size: 12px;
  color: var(--hs-fg-3);
  font-style: italic;
  margin: 0 0 18px;
  opacity: 0;
  transition: opacity 400ms ease;
}
.thesis-text.revealed ~ .thesis-footnote { opacity: 1; }

/* ============================================================
   Demo "Analyze My Thesis" button + analyzing / saved states.
   These three children live inside .thesis-actions and swap
   visibility based on which state class is on the parent.
   ============================================================ */
.thesis-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hs-border-muted);
  min-height: 56px;
}
.thesis-actions .pulse-btn {
  padding: 8px 14px;
  background: var(--hs-accent);
  color: #fff;
  border: 1px solid var(--hs-accent);
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.thesis-actions .pulse-btn.pulse {
  animation: hs-btn-pulse 600ms ease;
}
@keyframes hs-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(1, 114, 173, 0.45); transform: translateY(0); }
  40%  { box-shadow: 0 0 0 6px rgba(1, 114, 173, 0); transform: translateY(1px); }
  100% { box-shadow: 0 0 0 0 rgba(1, 114, 173, 0); transform: translateY(0); }
}
.thesis-actions .analyzing,
.thesis-actions .saved-state {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--hs-fg-2);
}
.thesis-actions.analyzing-state .pulse-btn { display: none; }
.thesis-actions.analyzing-state .analyzing { display: inline-flex; }
.thesis-actions.saved .pulse-btn   { display: none; }
.thesis-actions.saved .analyzing   { display: none; }
.thesis-actions.saved .saved-state { display: inline-flex; }

.thesis-actions .saved-state .check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hs-status-ok-bg);
  color: var(--hs-status-ok);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* Tiny inline spinner used inside the "Analyzing…" state. The page-level
   .hs-spinner in app.css is 1.5rem with a margin-right; that's the wrong
   shape inside a sentence. Scope a smaller version to this context. */
.thesis-actions .hs-spinner-inline {
  width: 14px;
  height: 14px;
  border: 2.5px solid #ddd;
  border-top-color: var(--hs-accent);
  border-radius: 50%;
  animation: hs-spin 0.8s linear infinite;
  display: inline-block;
}

/* ============================================================
   Hero assumption-card stagger.

   The cards live in the page as static markup but start invisible;
   landing.js adds .hs-in to each one in sequence after the highlight
   reveal. Pure CSS handles the fade-up — no JS measuring required.

   We do NOT touch the .hs-assumption rule itself (it's in app.css and
   used everywhere); we only style the descendant inside the hero/
   history demo frames.
   ============================================================ */
.demo-frame .hs-assumption {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 360ms ease, transform 360ms ease;
}
.demo-frame .hs-assumption.hs-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Replay button — floats top-right of the hero demo, hidden until
   the first run finishes.
   ============================================================ */
.demo-replay {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  color: var(--hs-fg-3);
  background: var(--hs-bg-page);
  border: 1px solid var(--hs-border-muted);
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  font-family: var(--hs-font);
  transition: opacity 200ms ease;
}
.demo-replay.show {
  opacity: 1;
  pointer-events: auto;
}
.demo-replay:hover {
  color: var(--hs-fg-1);
  border-color: var(--hs-border);
}

/* ============================================================
   Section 2 — history frame.

   Pulls in a fresh demo-thesis-head and stacks .hs-assumption cards
   below. The <hs-status-timeline> inside each card paints itself from
   the segments landing.js feeds it; no styling needed here beyond
   what app.css already provides for the timeline component.
   ============================================================ */
.history-thesis-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hs-border-muted);
  margin-bottom: 16px;
}
.history-thesis-head .h-title {
  font-size: 17px;
  font-weight: 700;
}
.history-thesis-head .h-meta {
  font-size: 12px;
  color: var(--hs-fg-3);
}
.history-assumption-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The standalone-card margin-bottom from app.css makes a stack feel
   sloppy when the cards are also gap'd by flex. Zero it out inside
   the history frame; gap owns spacing here. */
.history-assumption-stack .hs-assumption { margin-bottom: 0; }

/* ============================================================
   Section 3 — theses-list demo-frame.

   The legend, table, and bar use existing app.css markup
   (.hs-tint-legend, .hs-status-bar, .hs-bar-*, tr.hs-tint-*).
   The only landing-only addition is the italic small caption under
   each ticker, since the in-app version surfaces those as `title`
   tooltips instead of inline text.
   ============================================================ */
.list-frame .demo-body { padding: 18px 4px 4px; }
.list-frame .list-title {
  margin: 0 18px 6px;
  font-size: 17px;
  font-weight: 700;
}
.list-frame .hs-tint-legend {
  margin: 0 18px 12px;
}

.list-frame table.theses {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.list-frame table.theses thead th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hs-fg-3);
  font-weight: 600;
  padding: 10px 18px;
  border-bottom: 1px solid var(--hs-border-muted);
}
.list-frame table.theses tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hs-border-muted);
  vertical-align: middle;
}
.list-frame table.theses tbody tr:last-child td { border-bottom: none; }
.list-frame table.theses tbody td.date { color: var(--hs-fg-2); }
.list-frame table.theses tbody td.tk   { font-weight: 600; }

/* Wider bar on a marketing page than the cramped in-app cell. */
.list-frame .hs-status-bar { width: 140px; min-width: 140px; }

.change-caption {
  display: block;
  font-size: 11px;
  color: var(--hs-fg-3);
  margin-top: 4px;
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   Scroll-reveal.

   IntersectionObserver toggles .hs-in on .reveal elements as they
   slide into view. delay-1/2/3 stagger sibling cards so a row of
   three doesn't pop in lock-step.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.hs-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }

/* ============================================================
   Closing CTA section + site footer.
   ============================================================ */
.closing {
  padding: 88px 0 96px;
  text-align: center;
}
.closing h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.closing p {
  color: var(--hs-fg-2);
  max-width: 48ch;
  margin: 0 auto 24px;
}
.closing .cta-row { justify-content: center; }

.site-footer {
  border-top: 1px solid var(--hs-border-muted);
  padding: 24px 0;
  font-size: 12.5px;
  color: var(--hs-fg-3);
}
.site-footer .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer a { color: var(--hs-fg-3); }
.site-footer a:hover { color: var(--hs-fg-1); }

/* ============================================================
   Mobile polish.
   ============================================================ */
@media (max-width: 640px) {
  .demo-body { padding: 16px 16px 18px; }
  .thesis-text { font-size: 14.5px; }
  .list-frame .hs-status-bar { width: 110px; min-width: 110px; }
  .landing-section { padding: 64px 0 48px; }
  .landing-section.hero { padding-top: 48px; padding-bottom: 64px; }
}