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

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

/* The download arrow on the nav's Download button. Drawn here rather than as
   inline SVG in each page's markup: the bar is hand-copied into 13 pages plus
   two worker templates, and the icon was the first thing to fall out of step.
   Masked rather than embedded as an image so it takes the button's own colour
   in every state. */
.btn-download::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   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
   --------------------------------------------------------------------------
   A slot-machine roll rather than a cross-fade: the words are stacked in a
   single column on .ticker-track, and .ticker clips that column to exactly one
   line. Advancing a word means translating the track up by one line, so the
   outgoing and incoming words move together as one strip.

   The step is 1.07em, which is the h1's line-height. Keeping the box exactly
   one line box tall is what lets `vertical-align: bottom` land the rolling
   text on the same baseline as the "for" beside it. A taller box would sit the
   words low, a shorter one would crop their ascenders.

   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-block;
  overflow: hidden;
  height: 1.07em;
  vertical-align: bottom;
  text-align: left;
  font-style: italic;
  color: var(--violet);
  transition: width 0.55s var(--ease);
}

.ticker-track {
  display: block;
  /* v2.js only ever writes --roll-i (the index of the visible word); the step
     arithmetic stays here so the line-height and the roll cannot drift apart. */
  transform: translateY(calc(var(--roll-i, 0) * -1.07em));
  transition: transform 0.55s var(--ease);
}

.ticker-track > span {
  display: block;
  height: 1.07em;
  white-space: nowrap;
  /* max-content is load-bearing, not cosmetic. A plain block span fills its
     container, so once v2.js has set an explicit width on the box every word
     would measure as that width and the box could never shrink again. Sizing
     each word to its own text is what makes sizeTo() return the real width. */
  width: max-content;
}

/* The cycle rolls onto a duplicate of the first word appended by v2.js, then
   jumps back to the real one. That jump must not animate, or the strip would
   visibly rewind through every word. */
.ticker.is-snap .ticker-track { transition: 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; the clip already
     leaves the first word showing, so just make sure the track never moves. */
  .ticker-track { transform: none; }
}