/* The marketing site for 66 Books. One page, no build step, no script.
   The tokens below are the app's tokens (pwa/styles.css), copied so the two read as one product.
   One token is new: --fs-display, the headline size, which the app has no role for. */

@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/newsreader-latin.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: Newsreader;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/newsreader-italic-latin.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;
}

:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #121212;
  --muted: #8a8a8a;
  --rule: #d9d9d9;
  --hover: #f3f3f3;
  --highlight: 245 197 24;
  --mark: rgb(var(--highlight) / .42);
  --card: #fff;
  --card-rule: #e4e2dc;
  --card-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .06);
  --shadow: 0 2px 12px rgb(0 0 0 / .14);
  /* The app's four sizes, one to a role. Reading is scripture, wherever it is quoted. */
  --fs-sm: 13px;
  --fs-md: 16px;
  --fs-read: 19px;
  --fs-lg: 22px;
  --fs-display: clamp(30px, 6vw, 46px);
  --lh-read: 1.9;
  --lh-ui: 1.45;
  --measure: 680px;
  --font-read: Newsreader, Georgia, serif;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* One palette, three states, as in the app. The bare :root is the day. The media block is the night, unless
   Light was chosen outright; [data-theme="dark"] is the night chosen outright. Every colour that changes is a
   token set in both night blocks, so no rule may carry a colour of its own inside a media block. This page
   offers no theme switch, so the system decides; the third state is kept so the app's rule holds here too. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #121212; --fg: #ececec; --muted: #8e8e8e; --rule: #3a3a3a; --hover: #222; --mark: rgb(var(--highlight) / .22);
    --card: #1f1f1e; --card-rule: #3a3936; --card-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); --shadow: 0 2px 12px rgb(0 0 0 / .6); }
}
:root[data-theme="dark"] { --bg: #121212; --fg: #ececec; --muted: #8e8e8e; --rule: #3a3a3a; --hover: #222; --mark: rgb(var(--highlight) / .22);
  --card: #1f1f1e; --card-rule: #3a3936; --card-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); --shadow: 0 2px 12px rgb(0 0 0 / .6); }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-size: var(--fs-md); line-height: var(--lh-ui); -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* The app's top bar: near-black with a faint grain, a shade lighter than the page at night. */
.bar {
  --bar-top: #1a1a1a; --bar-bottom: #0e0e0e; --bar-line: rgb(255 255 255 / .08); --bar-shadow: none;
  --bar-fg: #f2f2f2; --bar-muted: #9a9a9a; --bar-hover: rgb(255 255 255 / .1);
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  color: var(--bar-fg); border-bottom: 1px solid var(--bar-line); box-shadow: var(--bar-shadow);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), linear-gradient(var(--bar-top), var(--bar-bottom));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bar { --bar-top: #2c2c2b; --bar-bottom: #242423; --bar-line: rgb(255 255 255 / .14); --bar-shadow: 0 1px 0 #000, 0 2px 8px rgb(0 0 0 / .4); }
}
:root[data-theme="dark"] .bar { --bar-top: #2c2c2b; --bar-bottom: #242423; --bar-line: rgb(255 255 255 / .14); --bar-shadow: 0 1px 0 #000, 0 2px 8px rgb(0 0 0 / .4); }
.wordmark { font-size: var(--fs-md); font-weight: 600; text-decoration: none; letter-spacing: -.01em; }
.bar-links { display: flex; align-items: center; gap: 4px; }
.bar-links .link { padding: 6px 10px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--bar-muted); text-decoration: none; }
.bar-links .link:hover { color: var(--bar-fg); background: var(--bar-hover); }
.bar-links .go { color: var(--bar-fg); }
@media (max-width: 460px) { .bar-links .link:not(.go) { display: none; } }

main { display: block; }
section { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.band { padding-top: 64px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--fs-display); line-height: 1.12; text-wrap: balance; }
h2 { font-size: var(--fs-lg); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
h3 { font-size: var(--fs-lg); }
p { margin: 12px 0; }

/* Hero */
.hero { padding: 72px 20px 0; max-width: 1120px; text-align: center; }
.hero h1, .hero .lede, .hero .actions, .hero .fine { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.lede { margin-top: 20px; font-size: var(--fs-read); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.fine { font-size: var(--fs-sm); color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 10px; }
.hero .actions, .plan .actions { justify-content: center; }
.button {
  display: inline-block; padding: 11px 20px; border: 1px solid var(--fg); border-radius: 999px;
  font-size: var(--fs-md); font-weight: 600; text-decoration: none;
}
.button:hover { background: var(--hover); }
.button.primary { background: var(--fg); color: var(--bg); }
.button.primary:hover { opacity: .86; }

/* Screens. A real capture of the running app, framed so it reads as a window. */
.shot { margin: 40px 0 0; }
.shot img { width: 100%; border: 1px solid var(--card-rule); border-radius: 12px; box-shadow: var(--card-shadow); }
.shot.wide { margin-top: 48px; }
.shot.phone img { width: auto; max-width: 280px; margin: 0 auto; border-radius: 22px; }

/* A feature: what it does on the left, the screen on the right. */
.feature { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 40px 0; border-bottom: 1px solid var(--rule); }
.feature:last-child { border-bottom: 0; }
.feature .says { max-width: var(--measure); }
.feature .says p { color: var(--fg); text-wrap: pretty; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }
  .feature .shot { margin: 0; }
}

/* Scripture, set in the reading face at the reading size, as it is in the app. */
.quote-band { padding-top: 72px; }
.scripture { max-width: var(--measure); margin: 0 auto; padding: 0; text-align: center; }
.scripture p {
  margin: 0; font-family: var(--font-read); font-size: var(--fs-read); line-height: var(--lh-read);
  background: linear-gradient(var(--mark), var(--mark)); background-size: 100% 1.1em; background-repeat: no-repeat; background-position: 0 .42em;
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.scripture cite { display: block; margin-top: 18px; font-size: var(--fs-sm); font-style: normal; color: var(--muted); }

/* Facts: short claims, each one true today. */
.facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 40px; margin: 8px 0 0; padding: 0; }
.facts li { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.facts h3 { font-size: var(--fs-md); }
.facts p { margin: 6px 0 0; color: var(--muted); }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 28px; }
.plan { padding: 28px 24px; background: var(--card); border: 1px solid var(--card-rule); border-radius: 14px; box-shadow: var(--card-shadow); text-align: center; }
.plan .amount { margin: 14px 0 4px; font-size: var(--fs-display); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.plan .per { font-size: var(--fs-md); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan-line { color: var(--muted); }
.plan-line.note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-rule); font-size: var(--fs-sm); text-align: left; }
.tag { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--mark); color: var(--fg); font-size: var(--fs-sm); font-weight: 600; vertical-align: 3px; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; }
.ticks li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--card-rule); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: "✓"; position: absolute; left: 4px; color: var(--muted); }
#price .fine { margin-top: 20px; text-align: center; }

/* Foot */
.foot { max-width: 1120px; margin: 72px auto 0; padding: 28px 20px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); text-align: center; }
.foot p { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; font-size: var(--fs-sm); }
.foot a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot a:hover { border-color: var(--fg); }
.foot .fine { display: block; margin-top: 18px; }

/* The hero capture swaps to the phone one on a narrow screen; give it the phone's frame there. */
@media (max-width: 620px) {
  .shot.wide img { max-width: 280px; margin: 0 auto; border-radius: 22px; }
}

/* The one line a returning reader sees (apex.js), shown only when the app left data on this origin.
   A notice, not an alarm: the card vocabulary of the plans, muted, and no colour of its own. */
.moved { max-width: 1120px; margin: 0 auto; padding: 14px 20px 0; }
.moved p { margin: 0; padding: 12px 18px; background: var(--card); border: 1px solid var(--card-rule); border-radius: 12px; color: var(--muted); font-size: var(--fs-sm); text-align: center; text-wrap: pretty; }
.moved a { color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); }
.moved a:hover { border-color: var(--fg); }

/* The Get it cards centre their one action; the plan cards below do not. */
.actions.centred { justify-content: center; }

/* A page of prose, such as the privacy policy: one column at the reading measure. */
.prose { max-width: var(--measure); margin: 0 auto; padding: 48px 20px 0; }
.prose h1 { margin-bottom: 4px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; font-size: var(--fs-md); }
.prose ul { margin: 12px 0; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose p, .prose li { text-wrap: pretty; }