/* ==========================================================================
   Sciwand landing v2 — "The Reading Room"
   --------------------------------------------------------------------------
   Base layer: design tokens, reset, typography, layout primitives, nav,
   hero, and the shared "marker highlight" device.
   Section-specific styling lives in v2-sections.css.

   Aesthetic: clean white canvas, editorial serif display, and a single
   violet used as a highlighter. Separation is done with 1px borders and
   grey bands — no drop shadows anywhere. The marker sweep is the signature
   motion: it mirrors what a researcher does to a PDF.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — clean white, with a single cool grey for section bands.
     No shadows anywhere: separation comes from 1px borders and bands. */
  --paper:      #ffffff;
  --paper-band: #f7f8fa;
  --paper-card: #ffffff;

  /* Ink stack — cool near-black, never #000 */
  --ink:     #111827;
  --ink-2:   #4b5563;
  --ink-3:   #6b7280;
  --ink-4:   #9ca3af;

  --line:        #e5e7eb;
  --line-soft:   #eef0f3;

  /* Single brand accent + its washes */
  --violet:      #4f39f6;
  --violet-deep: #3d28d4;
  --violet-wash: #eeebff;
  --marker:      rgba(79, 57, 246, 0.15);

  /* Verification / "cited" signal */
  --teal:      #0f766e;
  --teal-wash: #e6f4f1;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --wrap: 1120px;
  --wrap-narrow: 760px;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Monaco, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--marker); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.band {
  background: var(--paper-band);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

section { position: relative; }

/* Small uppercase label used above every section heading */
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.kicker::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--ink-4);
  flex: none;
}

.kicker--center { justify-content: center; }

/* --------------------------------------------------------------------------
   4. The marker highlight — signature device
   --------------------------------------------------------------------------
   A pseudo-element sweeps left→right behind the text, like a highlighter
   pen. Slightly rotated and with soft ends so it reads as hand-drawn
   rather than as a CSS rectangle. Triggered by .is-lit (added by v2.js
   on scroll) so it animates when the phrase enters the viewport.
   -------------------------------------------------------------------------- */
.mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.mark::before {
  content: "";
  position: absolute;
  left: -0.14em;
  right: -0.14em;
  bottom: 0.04em;
  height: 0.52em;
  background: var(--marker);
  border-radius: 3px 8px 5px 7px;
  transform: rotate(-0.5deg) scaleX(0);
  transform-origin: left center;
  z-index: -1;
  transition: transform 0.62s var(--ease);
}

.mark.is-lit::before { transform: rotate(-0.5deg) scaleX(1); }

/* The em-based defaults are tuned for body copy. At display sizes the same
   ratios put the bar ~11px below the baseline and bleed it well past the
   final glyph, so the headline gets its own tighter, higher geometry. */
.hero h1 .mark::before {
  height: 0.46em;
  bottom: 0.23em;
  left: -0.05em;
  right: -0.05em;
  border-radius: 2px 6px 4px 5px;
}

/* Underline variant for the ethos section */
.mark--rule::before {
  height: 0.16em;
  bottom: -0.02em;
  background: var(--violet);
  opacity: 0.85;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 14px 26px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  background: var(--violet);
  color: #fff;
}

.btn-primary:hover { background: var(--violet-deep); }

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover { border-color: var(--ink-4); background: var(--paper-band); }

.btn-sm { font-size: 14px; padding: 10px 18px; }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.nav.is-stuck { border-bottom-color: var(--line); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

.logo {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}

.nav-links a { transition: color 0.18s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links .btn { margin-left: 4px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}

.nav-toggle span + span { margin-top: 4px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding: 92px 0 0;
  text-align: center;
  position: relative;
}

.hero h1 {
  font-size: clamp(38px, 5.6vw, 70px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.07;
  max-width: 19ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   7b. Audience ticker
   --------------------------------------------------------------------------
   Pure CSS. The words are stacked in one grid cell so the box is sized by the
   longest of them and the line never reflows as they swap. Each word fades and
   slides through its own slice of a shared cycle, offset by animation-delay.

   The box width tracks the *active* word rather than the widest one. Sizing to
   the widest left a visible gap after "for" on every shorter word, so v2.js
   measures each word and drives the width, which then transitions smoothly.
   -------------------------------------------------------------------------- */
.ticker {
  display: inline-grid;
  vertical-align: bottom;
  text-align: left;
  font-style: italic;
  color: var(--violet);
  transition: width 0.42s var(--ease);
}

.ticker > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.34em);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}

.ticker > span.is-on { opacity: 1; transform: none; }

/* Leaving the previous word alone would let it slide down through the next
   one; sending it up keeps the motion a single consistent direction. */
.ticker > span.is-out { opacity: 0; transform: translateY(-0.34em); }

/* Without JS the width is never set, so the grid falls back to its natural
   (widest-word) size. Show the first word so the headline still completes. */
.ticker:not(.is-live) > span:nth-child(1) { opacity: 1; transform: none; }

.hero-sub {
  font-size: clamp(17px, 2vw, 20.5px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 26px auto 0;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* --------------------------------------------------------------------------
   7b. Hero assurances
   --------------------------------------------------------------------------
   Ownership, privacy, price, offline. Set in --ink-4 with icons to match:
   present for anyone scanning for them, quiet enough that they do not fight
   the headline. Colouring these (violet ticks, bold labels) is what made an
   earlier version read as clutter — resist it.
   -------------------------------------------------------------------------- */
.hero-trust {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 24px;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-4);
}

.hero-trust svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   8. Hero demo video
   --------------------------------------------------------------------------
   The recording already contains the app's own window chrome, so there is no
   synthetic frame here — just the video, rounded to match the card language.
   -------------------------------------------------------------------------- */
.stage {
  margin: 62px auto 0;
  padding-bottom: 96px;
}

.window-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stage-caption {
  margin: 20px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 15px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   9. Scroll reveal — applied by v2.js
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* Staggered hero entrance on load */
.rise {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.85s var(--ease) forwards;
}

.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.15s; }
.rise-3 { animation-delay: 0.25s; }
.rise-4 { animation-delay: 0.35s; }
.rise-5 { animation-delay: 0.46s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Responsive — base layer
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .wrap { padding: 0 20px; }

  .nav-toggle { display: block; }

  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
    display: none;
  }

  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 13px 2px; border-bottom: 1px solid var(--line-soft); }
  .nav-links .btn { margin: 14px 0 0; }

  .hero { padding-top: 56px; }
  .stage { margin-top: 40px; padding-bottom: 64px; }
  .hero-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rise { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .mark::before { transform: rotate(-0.5deg) scaleX(1); }

  /* v2.js stops cycling the ticker under reduced motion, but the blanket rule
     above also kills the transitions, so pin the first word fully visible. */
  .ticker > span { opacity: 0; transform: none; }
  .ticker > span:nth-child(1) { opacity: 1; }
}