/* Layout: the hero is the first frame of a full-screen tour. Its picture is one real,
   dark BookMiri page, one September from top to bottom. As you scroll, the hero text
   leaves to the left, the picture grows to the page's width and then to the whole
   screen; six steps then move down the page, each keeping one part sharp, blurring the
   rest and writing the step on the blur. The page around the tour follows the viewer's
   theme; the tour is always dark. */
/* Inter, hosted here (SIL Open Font License), so no visitor's address goes to a font service. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-wght.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-ext-wght.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: #f6f9fe;
  --surface: #ffffff;
  --ink: #0d1934;
  --ink-soft: #5a6b8c;
  --rule: #e2e8f3;
  --accent: #1764ec;
  --accent-strong: #0f52cc;
  --on-accent: #ffffff;
  --band: #0d1934;
  --band-ink: #e8eef8;
  --band-soft: #adbbd3;
  /* The tour's own dark stage: the app's dark page, its text and its accent. */
  --stage: #0a1020;
  --stage-ink: #e8eef8;
  --stage-soft: #adbbd3;
  --stage-accent: #5db8f8;
  --shadow: 0 1px 2px rgba(13, 25, 52, 0.05), 0 28px 64px -28px rgba(13, 25, 52, 0.35);

  --display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a1020;
    --surface: #121a2c;
    --ink: #e8eef8;
    --ink-soft: #adbbd3;
    --rule: #232d42;
    --accent: #239ef5;
    --accent-strong: #5db8f8;
    --on-accent: #0d1934;
    --band: #121a2c;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 28px 64px -28px rgba(0, 0, 0, 0.85);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1020;
  --surface: #121a2c;
  --ink: #e8eef8;
  --ink-soft: #adbbd3;
  --rule: #232d42;
  --accent: #239ef5;
  --accent-strong: #5db8f8;
  --on-accent: #0d1934;
  --band: #121a2c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 28px 64px -28px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
p, h1, h2 { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1180px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

.brand { display: inline-flex; color: var(--ink); }
.logo { display: block; height: 30px; width: 102px; color: inherit; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav__login { color: inherit; text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding: 8px 12px; border-radius: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 1rem; font-weight: 650; line-height: 1; padding: 15px 22px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-strong); }
.btn--sm { padding: 10px 14px; font-size: 0.9375rem; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.small-print { font-size: 0.875rem; color: var(--ink-soft); }
.display { font-family: var(--display); font-optical-sizing: auto; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 26em; }

/* ---------- the tour: a tall section with one screen-sized frame stuck to the top ---------- */
.tour { position: relative; height: calc(100svh * 6.1); }
.tour__frame { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* Frame 1: the hero, under the screen. */
.hero { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hero > .wrap { width: 100%; }
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.hero__body { flex: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding-bottom: 48px; }
.hero__text { display: flex; flex-direction: column; gap: 22px; will-change: transform, opacity; }
.hero__text h1 { font-size: clamp(2.375rem, 4.6vw, 3.75rem); }
.hero__slot { height: min(560px, 64svh); border-radius: 18px; }
/* The picture's rim and shadow, following it as it grows. */
.edge { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; border-radius: 18px; box-shadow: 0 0 0 1px rgba(232, 238, 248, 0.09), var(--shadow); }

/* The screen: the real app, full-frame, cut down to the hero's slot until you scroll.
   Its page background is the stage's colour, so the picture has no edges. The app's
   top bar is drawn here (bar, logo, account) so it stretches to any width. */
.screen { position: absolute; inset: 0; z-index: 2; background: var(--stage); overflow: hidden; will-change: clip-path; }
.rig, .bar, .bar-logo, .bar-acts { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.bar { z-index: 0; background: #121a2c; border-bottom: 1px solid #232d42; }
.rig { z-index: 1; }
.bar-logo, .bar-acts { z-index: 2; display: block; height: auto; max-width: none; }
.screen.is-moving :is(.rig, .bar, .bar-logo, .bar-acts) { transition: transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1); }
.layer { position: absolute; left: 0; opacity: 0; transition: opacity 0.6s ease; }
.layer.is-on { opacity: 1; }
.layer img { position: absolute; top: 0; left: 0; display: block; height: auto; max-width: none; }
.layer .base, .bar, .bar-logo, .bar-acts { transition: filter 0.5s ease, opacity 0.5s ease; }
.screen.is-spot :is(.layer .base, .bar, .bar-logo, .bar-acts) { filter: blur(4px) saturate(0.6); opacity: 0.3; }
.screen.is-moving .layer .sharp { transition: clip-path 0.9s cubic-bezier(0.22, 0.7, 0.2, 1); }

/* The steps, written on the blurred part: left on a wide screen, on top on a phone. */
.captions { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: var(--stage-ink); }
.captions::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; background: linear-gradient(90deg, rgba(10, 16, 32, 0.9) 0%, rgba(10, 16, 32, 0.7) 24%, rgba(10, 16, 32, 0) 36%); }
.captions.is-on::before { opacity: 1; }
.cap {
  position: absolute;
  left: max(24px, 6vw);
  top: 50%;
  width: min(30vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(calc(-50% + 16px));
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.cap.is-on { opacity: 1; transform: translateY(-50%); }
.cap__n { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stage-accent); }
.cap h2 { font-family: var(--display); font-optical-sizing: auto; font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.cap p { color: var(--stage-soft); font-size: 1.0625rem; }
.dots { display: flex; gap: 6px; margin-top: 6px; }
.dots i { width: 22px; height: 3px; border-radius: 2px; background: rgba(232, 238, 248, 0.22); }
.dots i.is-on { background: var(--stage-accent); }

.cta-band { background: var(--band); color: var(--band-ink); padding-block: clamp(72px, 10vw, 120px); }
.cta-band .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.cta-band h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.cta-band .lede { color: var(--band-soft); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; font-size: 0.875rem; color: var(--ink-soft); }
.site-foot__brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-foot nav { display: flex; gap: 18px; }
.site-foot a { color: var(--ink-soft); }

/* ---------- phones: same tour, phone screens, the step above the spotlight ---------- */
@media (max-width: 700px) {
  .hero__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 22px; padding-bottom: 20px; }
  .hero__text { gap: 16px; }
  .hero__text .lede { font-size: 1rem; }
  .hero__slot { height: auto; min-height: 160px; }
  .captions::before { background: linear-gradient(180deg, rgba(10, 16, 32, 0.95) 0%, rgba(10, 16, 32, 0.8) 30%, rgba(10, 16, 32, 0) 41%); }
  .cap { left: var(--gutter-l); right: var(--gutter-r); top: calc(env(safe-area-inset-top, 0px) + 24px); width: auto; gap: 10px; transform: translateY(16px); }
  .cap.is-on { transform: none; }
  .cap h2 { font-size: 1.625rem; }
  .cap p { font-size: 1rem; }
  .nav .btn--sm { padding: 9px 12px; font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .screen.is-moving :is(.rig, .bar, .bar-logo, .bar-acts), .layer, .layer .base, .bar, .bar-logo, .bar-acts, .screen.is-moving .layer .sharp, .cap, .captions::before { transition: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-foot__legal { flex-basis: 100%; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }