/* eReader site. One stylesheet, no framework, system fonts only (nothing to
   download before text shows). Colours follow the reader's own paper and ink. */

:root {
  --paper: #f6f1e7;
  --paper-raised: #fffdf8;
  --paper-sunk: #ece5d6;
  --ink: #1d1a16;
  --ink-soft: #5d554b;
  --ink-faint: #8a8176;
  --line: #ddd4c2;
  --accent: #c2410c;
  --accent-strong: #e8590c;
  --accent-ink: #ffffff;
  --accent-wash: #fbe6d8;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(60, 40, 10, 0.06), 0 8px 24px rgba(60, 40, 10, 0.08);
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16130f;
    --paper-raised: #1f1b16;
    --paper-sunk: #110f0c;
    --ink: #f1ebe0;
    --ink-soft: #b8ae9f;
    --ink-faint: #877e71;
    --line: #342e26;
    --accent: #ff8a4c;
    --accent-strong: #ff7a33;
    --accent-ink: #1d1206;
    --accent-wash: #3a2314;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

/* Scripts other than Latin, Cyrillic and Greek name their fonts explicitly, script
   font first. Relying on the system UI font to fall back for these scripts shows
   empty boxes in some browsers. */
:lang(ar) {
  --font-text: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: var(--font-text);
}

:lang(he) {
  --font-text: "SF Hebrew", "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-text);
}

:lang(ja) {
  --font-text: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Hiragino Sans", serif;
}

:lang(ko) {
  --font-text: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: var(--font-text);
}

:lang(zh-Hans) {
  --font-text: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: "Songti SC", "Noto Serif SC", "PingFang SC", serif;
}

:lang(zh-Hant) {
  --font-text: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --font-display: "Songti TC", "Noto Serif TC", "PingFang TC", serif;
}

:lang(hi) {
  --font-text: "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --font-display: var(--font-text);
}

:lang(th) {
  --font-text: "Thonburi", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --font-display: var(--font-text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-strong);
}

:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
}

h3 {
  font-size: 1.2rem;
  font-weight: 650;
}

p {
  margin: 0 0 1em;
}

.wrap {
  width: min(1120px, 100% - 40px);
  margin-inline: auto;
}

.narrow {
  width: min(760px, 100% - 40px);
  margin-inline: auto;
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 10px;
  z-index: 100;
}

.skip:focus {
  top: 12px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 34px;
  height: 34px;
}

.nav {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
  align-items: center;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-sunk);
}

.nav .nav-cta {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  margin-inline-start: 6px;
}

.nav .nav-cta:hover {
  background: var(--accent-strong);
  color: var(--accent-ink);
}

@media (max-width: 760px) {
  .nav a:not(.nav-cta) {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.hero-app {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.hero-app img {
  width: 68px;
  height: 68px;
  box-shadow: var(--shadow);
  border-radius: 16px;
}

.hero-app .app-name {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25;
}

.hero-app .app-sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  margin: 20px 0 28px;
  max-width: 38em;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.store-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 12px 22px 12px 18px;
  border-radius: 14px;
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.2;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}

.store-button:hover {
  color: var(--paper);
  transform: translateY(-1px);
}

.store-button svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.cta-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.points {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.points li {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.hero-shots {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.hero-shots img {
  width: min(46%, 250px);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.hero-shots img:nth-child(2) {
  margin-top: 44px;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sections ---------- */

section {
  padding: clamp(44px, 7vw, 84px) 0;
}

.section-alt {
  background: var(--paper-sunk);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 44em;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.eyebrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  margin: 14px 0 0;
}

/* Screenshot strip: scrolls sideways, snaps to each screen. */
.shots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 20px 22px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  -webkit-overflow-scrolling: touch;
}

.shots img {
  flex: none;
  width: min(62vw, 250px);
  border-radius: 20px;
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  background: var(--paper-sunk);
}

.shots-outer {
  max-width: 1400px;
  margin-inline: auto;
}

/* Feature cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.card .icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-wash);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.card .icon svg {
  width: 22px;
  height: 22px;
}

.card p {
  color: var(--ink-soft);
  margin: 8px 0 0;
  font-size: 0.98rem;
}

/* Steps */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li {
  counter-increment: step;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: 12px;
}

.steps p {
  color: var(--ink-soft);
  margin: 8px 0 0;
  font-size: 0.98rem;
}

/* Plans */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.plan {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.plan.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.plan ul {
  margin: 16px 0 0;
  padding-inline-start: 1.2em;
  color: var(--ink-soft);
}

.plan li {
  margin-bottom: 6px;
}

.plan-note {
  color: var(--ink-faint);
  font-size: 0.92rem;
  margin-top: 18px;
  max-width: 60em;
}

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--line);
}

.faq details:first-of-type {
  border-top: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  padding: 18px 34px 18px 0;
  font-weight: 650;
  font-size: 1.08rem;
  list-style: none;
  position: relative;
}

[dir="rtl"] .faq summary {
  padding: 18px 0 18px 34px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 4px;
  top: 14px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
}

.faq details[open] summary::after {
  content: "–";
}

.faq .answer {
  color: var(--ink-soft);
  padding: 0 0 20px;
  max-width: 62em;
}

.more-link {
  display: inline-block;
  margin-top: 22px;
  font-weight: 600;
}

/* Languages */
.languages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.languages a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}

.languages a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.languages a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Closing call to action */
.closing {
  text-align: center;
}

.closing img {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.closing .cta-row {
  justify-content: center;
  margin-top: 26px;
}

/* ---------- Text pages (legal, FAQ, support) ---------- */

.page-head {
  padding: clamp(36px, 6vw, 72px) 0 8px;
}

.page-head p {
  color: var(--ink-soft);
  margin-top: 12px;
}

.crumbs {
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.crumbs a {
  color: var(--ink-soft);
}

.prose {
  padding-bottom: clamp(48px, 7vw, 88px);
}

.prose h2 {
  font-size: 1.45rem;
  margin: 2.2em 0 0.6em;
}

.prose h3 {
  font-size: 1.08rem;
  font-family: var(--font-text);
  margin: 1.6em 0 0.4em;
}

.prose ul {
  padding-inline-start: 1.3em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  margin: 1em 0;
  display: block;
  overflow-x: auto;
}

.prose th,
.prose td {
  text-align: start;
  vertical-align: top;
  border: 1px solid var(--line);
  padding: 10px 12px;
  min-width: 150px;
}

.prose th {
  background: var(--paper-sunk);
}

.toc {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px 0;
  columns: 2 240px;
  font-size: 0.95rem;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  margin-bottom: 6px;
  break-inside: avoid;
}

.description h3 {
  font-family: var(--font-text);
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 1.6em 0 0.6em;
}

.description ul {
  padding-inline-start: 1.2em;
}

.description li {
  margin-bottom: 0.6em;
}

.notice {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

/* Support form */
.form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.form input,
.form select,
.form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
}

.form textarea {
  min-height: 160px;
  resize: vertical;
}

.form .hint {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.88rem;
}

.form button {
  font: inherit;
  font-weight: 650;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  padding: 13px 22px;
  cursor: pointer;
  justify-self: start;
}

.form button:hover {
  background: var(--accent-strong);
}

.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-sunk);
  padding: 36px 0 44px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  color: var(--ink-soft);
}

.fineprint {
  max-width: 46em;
  margin: 10px 0 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .store-button {
    transition: none;
  }
}