/* Block&Read — landing (redesign 1.1)
 *
 * Only index.html loads this file. The guides and the legal pages share
 * style.css with the landing and keep the previous look; everything here is
 * scoped under body.landing so none of it leaks into them.
 *
 * The idea behind the redesign: the app is now a wooden bookcase, so the page
 * is one too. Every group of screenshots stands on a plank, the way books
 * stand on a shelf, with the same warm light the app paints under each board.
 */

body.landing {
  --bg: #110b07;
  --panel: #1a120c;
  --panel-2: #22170f;
  --border: #33241a;
  --wood-hi: #8a5a2e;
  --wood: #5e3718;
  --wood-lo: #341c0c;
  --glow: rgba(255, 186, 104, .20);
  background: var(--bg);
}

/* ---------- The plank ----------
 * A row of phones standing on a board. The board is the row's ::after, so
 * phones sit on it simply by aligning to the bottom. ::before is the warm
 * light that falls from the shelf above, as in the app. */
.landing .shelf {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 36px);
  padding: 40px 24px 0;
  margin: 0 auto 26px;
  max-width: 1040px;
}
.landing .shelf::before {
  content: "";
  position: absolute;
  inset: 0 6% auto 6%;
  height: 70%;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--glow), transparent 72%);
  pointer-events: none;
}
.landing .shelf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 24px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px, rgba(255,220,170,.05) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, var(--wood-hi) 0%, var(--wood) 38%, var(--wood-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 214, 160, .22),
    0 26px 44px rgba(0, 0, 0, .62);
}
.landing .shelf figure {
  position: relative;
  z-index: 1;
  margin: 0;
  flex: 0 1 auto;
  text-align: center;
}
.landing .shelf img {
  width: clamp(150px, 22vw, 270px);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55));
}
/* The phone in the middle of a trio stands a little taller, like the book
   pulled halfway out of the row. */
.landing .shelf.trio figure:nth-child(2) img { width: clamp(170px, 26vw, 310px); }
/* A plank as wide as what it holds: one or two phones on a board built for
   three look lost. */
.landing .shelf.duo { max-width: 700px; }
.landing .shelf.solo { max-width: 420px; }
.landing .shelf figcaption {
  position: absolute;
  left: 50%; bottom: -60px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  font-size: 13.5px;
  color: var(--muted);
  font-family: var(--sans);
  line-height: 1.35;
}

/* ---------- Sections ---------- */
.landing section { padding: 104px 0; }
.landing .section-panel { background: var(--panel); border-color: var(--border); }
.landing .section-head { margin-bottom: 40px; }
.landing .section-head h2 { font-size: clamp(32px, 5vw, 50px); line-height: 1.08; }
.landing .shelf-block + .shelf-block { margin-top: 120px; }
.landing .shelf-copy { max-width: 640px; margin: 0 auto 8px; text-align: center; }
.landing .shelf-copy h3 {
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
  margin-bottom: 12px;
}
.landing .shelf-copy p { color: var(--muted); font-size: 17.5px; }
.landing .shelf-copy .feature-kicker {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.landing .with-captions { margin-bottom: 96px; }

/* ---------- Hero ---------- */
.landing .hero { padding: 72px 0 120px; }
.landing .hero h1 { font-size: clamp(42px, 7vw, 78px); line-height: 1.02; }
.landing .hero .shelf { margin-top: 56px; }

/* ---------- Format chips ---------- */
.landing .chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 22px auto 0;
}
.landing .chip {
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ---------- iPad ---------- */
.landing .ipad-shot { max-width: 720px; margin: 0 auto; }
.landing .ipad-shot img { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6)); }
.landing .ipad-shot.shelf { max-width: 780px; }
.landing .ipad-shot.shelf img { width: 100%; max-width: 640px; }

/* ---------- Pricing ---------- */
.landing .plans {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 22px;
  max-width: 940px;
  margin: 0 auto;
  align-items: stretch;
}
.landing .plan {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 30px;
  display: flex; flex-direction: column;
}
.landing .plan.premium {
  border-color: rgba(205, 162, 80, .55);
  box-shadow: 0 0 0 1px rgba(205, 162, 80, .18), 0 24px 60px rgba(0, 0, 0, .35);
}
.landing .plan h3 { font-size: 28px; margin-bottom: 4px; }
.landing .plan .plan-sub { color: var(--muted); font-size: 15.5px; margin-bottom: 22px; }
.landing .plan ul { list-style: none; margin: 0 0 26px; display: grid; gap: 11px; }
.landing .plan li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  color: var(--text);
}
.landing .plan li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.landing .prices { display: grid; gap: 10px; margin-top: auto; }
.landing .price {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0, 0, 0, .18);
  font-family: var(--sans);
}
.landing .price strong { font-size: 16px; }
.landing .price .amount { color: var(--muted); font-size: 14.5px; text-align: right; }
.landing .price.best { border-color: rgba(205, 162, 80, .55); }
.landing .price .tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #1a120c; background: var(--accent);
  border-radius: 999px; padding: 2px 8px;
  vertical-align: 2px;
}
.landing .plan .free-price {
  margin-top: auto;
  font-family: var(--serif);
  font-size: 34px; font-weight: 700;
}
.landing .plan .free-price small { font-family: var(--sans); font-size: 15px; color: var(--muted); font-weight: 500; }
.landing .price-note {
  text-align: center;
  color: var(--muted-2);
  font-size: 14px;
  margin-top: 22px;
}
@media (max-width: 820px) {
  .landing .plans { grid-template-columns: 1fr; }
}

/* ---------- Narrow screens ----------
 * Three phones do not fit side by side on a phone. The outer two tuck behind
 * the middle one instead of disappearing, so the row still reads as a shelf. */
@media (max-width: 700px) {
  .landing section { padding: 80px 0; }
  .landing .shelf { gap: 0; padding-top: 28px; }
  .landing .shelf img { width: 42vw; }
  .landing .shelf.trio figure:nth-child(2) { z-index: 2; }
  .landing .shelf.trio figure:nth-child(2) img { width: 48vw; }
  .landing .shelf.trio figure:nth-child(1) { margin-right: -12vw; }
  .landing .shelf.trio figure:nth-child(3) { margin-left: -12vw; }
  .landing .shelf.trio figure:nth-child(1) img,
  .landing .shelf.trio figure:nth-child(3) img { width: 36vw; opacity: .92; }
  .landing .shelf figcaption { display: none; }
  .landing .with-captions { margin-bottom: 40px; }
  .landing .shelf-block + .shelf-block { margin-top: 88px; }
}

/* Headlines break into lines of even length instead of leaving one word
   stranded on the last line ("Read the / books."). */
.landing h1, .landing h2, .landing h3 { text-wrap: balance; }
.landing .price .amount { white-space: nowrap; }