/* ─────────────────────────────────────────────────────────────────
   Paperflow marketing — design tokens lifted from the app's index.css
   so the website reads as a continuation of the brand surface.
   ───────────────────────────────────────────────────────────────── */
:root {
  --bg: #F5F5F5;
  --card: #FCFCFB;
  --ink: #2D000F;
  --ink-heading: #2D000F;
  --ink-soft: #6B6660;
  --ink-faint: #6E685E;
  --hairline: #F2E9ED;
  --btn-primary: #2D000F;
  --btn-primary-hover: #1A0009;
  --shadow: 0 6px 28px rgba(45, 0, 15, 0.06), 0 1px 2px rgba(45, 0, 15, 0.04);
  --display-font: "Stack Sans Text", -apple-system, BlinkMacSystemFont,
    "SF Pro Text", system-ui, sans-serif;
  --heading-font: "Stack Sans Headline", -apple-system, BlinkMacSystemFont,
    "SF Pro Display", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

/* ── Top navigation ─────────────────────────────────────────── */
.topnav-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 24px 0;
}
.topnav {
  width: 100%;
  max-width: 720px;
  height: 56px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 16px;
}
.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topnav-bobble {
  width: 24px;
  height: 24px;
  border-radius: 5px;
}
.topnav-wordmark {
  height: 22px;
  width: auto;
}
.topnav-cta {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-heading);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 14px;
  transition: background 0.12s, border-color 0.12s;
}
.topnav-cta:hover {
  background: #FFFFFF;
  border-color: #E2D9DC;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 64px 24px 96px;
  max-width: 1080px;
  margin: 0 auto;
}
.hero-title {
  font-family: var(--heading-font);
  font-size: clamp(40px, 6vw, 64px);
  /* All headings dropped one weight notch (400 → 300). */
  font-weight: 300;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--ink-heading);
  margin: 0 auto 22px;
  /* Constrains the line so "The voice first task" sits on the first
     line and "management app" wraps to the second. Centred via
     auto margin. */
  max-width: 720px;
}
.hero-sub {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 40px;
}
.hero-sub strong {
  color: var(--ink-heading);
  font-weight: 500;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  color: #FCFCFB;
  background: var(--btn-primary);
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
}
.hero-cta:hover {
  background: var(--btn-primary-hover);
}
.hero-cta:active {
  transform: scale(0.99);
}

/* Hero demo — raw speech → arrow → AI structured. The middle column
   sizes to its content so the cards on either side share the
   remaining space evenly. */
.hero-demo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  margin-top: 64px;
  text-align: left;
  align-items: center;
}
.hero-demo-arrow {
  color: var(--ink-soft);
  opacity: 0.7;
}
.demo-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 56px 28px 28px;
  min-height: 280px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.demo-card-label {
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 400;
}
.demo-raw {
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  /* Reserve enough vertical space so the layout doesn't shift as
     words type in. min-height roughly matches the final transcript. */
  min-height: 168px;
  white-space: pre-wrap;
}
/* Each typed word blurs and lifts into view — feels like the word is
   "settling" rather than snap-appearing. */
.demo-raw .word {
  display: inline-block;
  opacity: 0;
  animation: word-flow-in 0.9s cubic-bezier(0.2, 0, 0, 1) forwards;
}
@keyframes word-flow-in {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(4px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* The pill at the bottom of the raw card — matches the app's
   recording pill geometry. Bars pulse continuously while the demo's
   raw-speech phase is active. Centred horizontally in the card. */
.demo-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 8px;
  background: var(--card);
  border: 1.5px solid var(--ink-heading);
  border-radius: 10px;
  margin-top: 16px;
  font-weight: 300;
}
.demo-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.demo-pill-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}
.demo-pill-bars > span {
  width: 2px;
  height: 14px;
  background: var(--ink-heading);
  border-radius: 1px;
  transform-origin: center;
}
.demo-pill.is-listening .demo-pill-bars > span {
  animation: pill-bar-pulse 0.9s ease-in-out infinite;
}
.demo-pill.is-listening .demo-pill-bars > span:nth-child(1) { animation-delay: 0ms; }
.demo-pill.is-listening .demo-pill-bars > span:nth-child(2) { animation-delay: 110ms; }
.demo-pill.is-listening .demo-pill-bars > span:nth-child(3) { animation-delay: 220ms; }
.demo-pill.is-listening .demo-pill-bars > span:nth-child(4) { animation-delay: 330ms; }
@keyframes pill-bar-pulse {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}
.demo-pill-bobble {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin-left: 4px;
}

/* AI structured — the card itself stays fully visible at all times.
   What lights up on activation is the CONTENT: every word, time, and
   checkbox is pre-staged at opacity:0 and animates in via the same
   blur-flow keyframe the raw side uses. Order is computed in
   script.js — words flow top-to-bottom, with row gaps between blocks
   so each task feels like a fresh entry instead of a single run-on. */
.demo-card--ai {
  font-weight: 300;
}
.demo-day {
  margin-bottom: 18px;
}
.demo-day:last-child {
  margin-bottom: 0;
}
.demo-day-title {
  font-family: var(--heading-font);
  font-size: 18px;
  /* 500 → 400 to match the rest of the heading scale. */
  font-weight: 400;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
  color: var(--ink-heading);
}
.demo-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.demo-tasks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--ink);
  position: relative;
}
.demo-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
}
.demo-task-text {
  /* The word-stagger animation populates this span via JS. */
}
.demo-task-time {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-soft);
}
/* All content within the AI card starts hidden — the card looks
   "empty" rather than dimmed. */
.demo-card--ai .word,
.demo-card--ai .demo-checkbox,
.demo-card--ai .demo-task-time {
  opacity: 0;
  display: inline-block;
}
.demo-card--ai .demo-checkbox {
  display: inline-block;
}
/* When the structured phase fires, each word + checkbox + time
   blur-flows into view at its computed delay. JS sets --word-delay
   on words and --row-delay on rows / times / checkboxes. */
.demo-card--ai.is-active .word {
  animation: word-flow-in 1.1s var(--word-delay, 0ms) cubic-bezier(0.2, 0, 0, 1) forwards;
}
.demo-card--ai.is-active .demo-checkbox,
.demo-card--ai.is-active .demo-task-time {
  animation: word-flow-in 1.1s var(--row-delay, 0ms) cubic-bezier(0.2, 0, 0, 1) forwards;
}

/* ── Marquee ────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 28px 0;
  margin: 32px 0 96px;
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 24s linear infinite;
}
.marquee-item {
  flex-shrink: 0;
  font-family: var(--heading-font);
  font-size: clamp(36px, 4.5vw, 56px);
  /* 500 → 400 (one notch lighter). */
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--ink-heading);
  margin-right: 64px;
  /* First and last items fade so the loop seam disappears. */
}
.marquee-item:nth-child(odd) {
  color: var(--ink-soft);
  opacity: 0.55;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Feature blocks ─────────────────────────────────────────── */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 24px;
}
.feature--reverse .feature-text {
  order: 2;
}
.feature--reverse .feature-image {
  order: 1;
}
.feature-title {
  font-family: var(--heading-font);
  font-size: clamp(28px, 3.4vw, 40px);
  /* One weight notch lighter (500 → 400). */
  font-weight: 400;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--ink-heading);
  margin: 0 0 18px;
}
.feature-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 380px;
}
.feature-image {
  /* Placeholder block until product screenshots are dropped in.
     Square aspect, soft border, white fill. */
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 32px 24px;
  margin-top: 64px;
}
.footer-row {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.footer-nav {
  display: flex;
  gap: 24px;
}
.footer-nav a:hover {
  color: var(--ink);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topnav {
    max-width: 100%;
  }
  .hero {
    padding: 40px 20px 64px;
  }
  .hero-demo {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
  /* On mobile the cards stack — rotate the chevron to point down. */
  .hero-demo-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .feature {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 20px;
  }
  .feature--reverse .feature-text,
  .feature--reverse .feature-image {
    order: initial;
  }
  .feature-image {
    max-width: 360px;
    width: 100%;
  }
  .footer-row {
    flex-direction: column;
    gap: 12px;
  }
  .marquee {
    margin: 16px 0 64px;
  }
}