/* Mirrors src/theme/colors.ts (the app's own palette) — hand-synced, not
   imported, since this is a plain static site with no build step that
   could share a TS module. Update both if the app's palette ever changes. */
:root {
  --navy: #166bca;
  --navy-dark: #031e61;
  --blue-light: #2081f7;
  --red: #f0303d;
  --green: #1e8e5e;
  --bg: #ffffff;
  --border: #e6e4dd;
  --border-light: #eceae3;
  --text-primary: #211d16;
  --text-secondary: #8b887c;
  --text-muted: #a4a196;
  --blue-tint: #e3eaf5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

a {
  color: var(--navy);
}

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

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header — logo is intentionally much taller than the bar itself; tight
   vertical padding plus align-items:center is what keeps the bar "slim"
   while the logo reads as big. */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy-dark);
  text-decoration: none;
}
.site-header .logo img {
  height: 64px;
  width: auto;
}
.site-header nav a {
  margin-left: 18px;
  font-size: 15px;
  text-decoration: none;
  color: var(--text-secondary);
}
/* A 64px logo + full wordmark + both nav links doesn't fit one row under
   ~420px — the icon + nav links alone do, so the wordmark is what gives. */
@media (max-width: 460px) {
  .site-header .logo-text {
    display: none;
  }
  .site-header nav a {
    margin-left: 12px;
    font-size: 14px;
  }
}

/* Hero — the wave band is a tiny inline SVG (no image request), pinned to
   the bottom edge only and sized by height, not inset:0 — padding-bottom
   is tied to that height via calc() so the visible white gap above it
   stays constant (~44px) across the whole fluid range, not just at the
   clamp() endpoints. padding-top is no longer about clearing a wave at
   all (the top one was removed) — it's just "how far under the header
   the headline starts." */
.hero-section {
  position: relative;
  overflow: hidden;
  /* Slimmer hero: the deals preview right below it is the real
     destination now, so this is just a brief intro, not the main event. */
  padding-top: clamp(16px, 3vw, 28px);
  padding-bottom: clamp(64px, calc(5vw + 28px), 84px);
}
.hero-wave-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  bottom: 0;
  height: clamp(36px, 5vw, 56px);
}
.hero-wave-bottom svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero h1 {
  font-size: 28px;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 8px;
}
.hero p.sub {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

/* "This month's deals" preview — same .deal-grid/.deal-card and the same
   wide .deals-wrap container the book pages use (see book.js's
   renderDealCard), so it fills the full content width the same way. */
.deals-preview {
  margin: 0 0 40px;
}
.deals-preview-title {
  font-size: 22px;
  color: var(--navy-dark);
  margin: 0 0 14px;
}
.deals-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.deals-preview-chips a {
  background: var(--blue-tint);
  color: var(--navy-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
}
.deals-preview-chips a:hover {
  background: var(--border-light);
}
.deals-preview-cta {
  text-align: center;
  margin: 24px 0 0;
}

.benefits {
  display: grid;
  gap: 16px;
  /* Plain white space above, separating the cards from the hero's bottom
     wave band — a bit less on phones per spec. */
  margin: 36px 0 40px;
}
.benefit {
  background: var(--blue-tint);
  border-radius: 12px;
  padding: 18px 20px;
  height: 100%;
}
.benefit-title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 8px;
  text-wrap: balance;
}
.benefit-body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
}

.screenshots {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0 0 40px;
}

/* Phone frame — pure CSS, no image asset, so it costs nothing until a real
   screenshot is dropped in (see home.js's SCREENSHOTS for exact filenames).
   .phone-screenshot (an <img>) and .phone-placeholder-text are mutually
   exclusive — build.js picks whichever exists on disk for each slot.
   No notch decoration — these are real device screenshots, which already
   include the iPhone's own status bar at the top, so a drawn-on notch
   would just cover part of the real screenshot.
   The frame itself has no fixed aspect-ratio: its height comes from
   .phone-screen's (padding + screen height), so each frame can match its
   own screenshot's real proportions without the three needing to agree on
   one shape. They still look the same size because they share the same
   width (the grid column) and very close real aspect ratios. */
.phone-frame {
  position: relative;
  background: var(--navy-dark);
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 16px 28px -12px rgba(3, 30, 97, 0.35), 0 4px 10px rgba(3, 30, 97, 0.12);
}
.phone-screen {
  /* --screen-ratio is set inline per real screenshot (its own exact
     width/height — see home.js), so width:100% + this aspect-ratio
     reproduces the source image's shape exactly: nothing to crop or
     stretch. Falls back to a generic phone shape only for the
     placeholder case, which has no real dimensions to go on. */
  aspect-ratio: var(--screen-ratio, 9 / 19.5);
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-screenshot {
  width: 100%;
  height: auto;
  display: block;
}
.phone-placeholder-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
  padding: 18px;
}

/* Waitlist form — lives in the hero now, right under the sub text, so it's
   visible without scrolling on a phone or desktop. */
.waitlist {
  background: var(--blue-tint);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  /* No bottom margin here on purpose — it's the hero-section's own
     padding-bottom (above) that owns the exact gap to the wave below. */
  margin: 0 auto;
  max-width: 520px;
}
.waitlist h2 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--navy-dark);
}
.waitlist p.consent {
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 0 0;
}
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.waitlist-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
}
@media (min-width: 480px) {
  .waitlist-form {
    flex-direction: row;
    justify-content: center;
  }
  .waitlist-form input[type="email"] {
    width: auto;
    flex: 1 1 220px;
  }
}
.waitlist-form .hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  filter: brightness(0.88);
}
.btn-lg {
  padding: 16px 28px;
  font-size: 17px;
  border-radius: 10px;
}
.waitlist-form .btn {
  width: 100%;
}
@media (min-width: 480px) {
  .waitlist-form .btn {
    width: auto;
  }
}
.waitlist-status {
  margin-top: 12px;
  font-size: 14px;
}
.waitlist-status.success {
  color: var(--green);
}
.waitlist-status.error {
  color: var(--red);
}

/* Waitlist banner (used on book pages and the archive, top + bottom) —
   red to match the hero's CTA, with a thin blue accent so both brand
   colors show up without needing a graphic. */
.waitlist-banner {
  display: block;
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 3px solid var(--navy);
}
.waitlist-banner:hover {
  filter: brightness(0.92);
}

/* Shared by book pages' <main> and home's deals-preview section — wider
   than the site's default .wrap (720px), which is fine for a headline/
   text column but squeezes a multi-column card grid into the left-ish
   two-thirds of a wide screen, visibly empty on the right. */
.deals-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.book-dates {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 8px 0 4px;
}
/* Small and muted on purpose — a single link to the archive, not a list,
   so it doesn't compete with the jump-links/deals below it. */
.book-other-months {
  margin: 0 0 20px;
  font-size: 13px;
}
.book-other-months a {
  color: var(--text-muted);
}
.book-previous-months {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.book-previous-months a {
  color: var(--text-secondary);
}
.book-jumplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.book-jumplinks a {
  background: var(--blue-tint);
  color: var(--navy-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
}
.book-jumplinks a:hover {
  background: var(--border-light);
}
.book-category {
  margin: 32px 0;
  /* So a jump-link lands with the heading clear of the fixed-ish visual
     top of the page, not flush against the very top edge. */
  scroll-margin-top: 16px;
}
.book-category h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: var(--navy-dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin: 0 0 16px;
}
.category-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Deal card grid — repeat(auto-fit, minmax(...)) so every row's cards
   stretch to fill it evenly (no column left narrower/empty), rather than
   a fixed column count that only fills a wide container if the item
   count happens to divide evenly. minmax's floor is smaller on phones
   (2 columns need ~480px+ of content width at the 240px floor used from
   tablet up, which doesn't fit most phones) — 150px gets 2 real columns
   on a phone without cramping, same floor this grid used before, just
   now via auto-fit instead of a hardcoded column count:
     ~335px phone  -> 2 cols @150px floor
     ~728px tablet -> 2 cols @240px floor
     ~984px laptop -> 3 cols @240px floor
     ~1140px wide  -> 4 cols @240px floor
   justify-content:center keeps a short last row centered rather than
   left-aligned with empty space on the right — note this only has real
   effect when a row's items don't stretch to fully consume the row (CSS
   Grid's own known limitation with 1fr tracks is that a genuinely
   incomplete last row's existing cards keep their normal size with the
   remaining track(s) left empty, not centered) — not an issue for home's
   12-card grid (12 divides evenly by 2, 3, and 4), but a book page
   category whose deal count doesn't divide evenly by the current column
   count can still show a shorter, left-ish last row. */
.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  justify-content: center;
}
@media (min-width: 600px) {
  .deal-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.deal-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(3, 30, 97, 0.06);
}
/* A fixed square, not sized from the image's own dimensions — that (not
   the img's width/height attributes) is what actually prevents layout
   jump here, since cards deliberately don't preserve each photo's native
   aspect ratio. Same box for a real photo or the category-icon
   placeholder, so every card in a row lines up regardless of which deals
   have pictures. */
.deal-card-image {
  aspect-ratio: 1 / 1;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.deal-card-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.deal-card-photo.deal-card-placeholder {
  width: 45%;
  height: 45%;
  opacity: 0.6;
}
.deal-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 14px;
}
.deal-card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  /* Up to 3 lines, then ellipsis — standard webkit line-clamp, supported
     by every browser this site needs to work on. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deal-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.deal-card-badge {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 8px;
}
.deal-card-pill {
  background: var(--border-light);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
}

.book-meta {
  color: var(--text-muted);
  font-size: 13px;
  margin: 32px 0 0;
}

/* Archive */
.archive-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.archive-list li {
  border-bottom: 1px solid var(--border-light);
  padding: 14px 0;
  font-size: 16px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.site-footer a {
  color: var(--text-secondary);
}
.site-footer p {
  margin: 6px 0;
}

/* Privacy policy — the only plain long-form text page on the site, so its
   heading/list/paragraph styling lives here rather than as generic h2/ul
   rules that would affect every other page. */
.privacy-page {
  padding: 24px 0 60px;
}
.privacy-page h1 {
  color: var(--navy);
  font-size: 28px;
  margin: 0 0 4px;
}
.privacy-page .updated {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 28px;
}
.privacy-page h2 {
  color: var(--navy);
  font-size: 19px;
  margin: 32px 0 10px;
}
.privacy-page p {
  font-size: 16px;
  margin: 0 0 16px;
  line-height: 1.6;
}
.privacy-page ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.privacy-page li {
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.6;
}
.privacy-page .contact {
  border-top: 1px solid var(--border);
  margin-top: 36px;
  padding-top: 24px;
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 36px;
  }
  .benefits {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 56px;
  }
  .benefit-title {
    font-size: 1.45rem;
  }
}