/* StopChomp — the app's "ink on paper" journal palette (ChompTheme.kt). */

@font-face {
  font-family: "Shantell Sans";
  src: url("/fonts/shantell-sans.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/fonts/courier-prime.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/fonts/courier-prime-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f8f3e8;
  --card: #fbf7ec;
  --ink: #23211c;
  --rule-blue: #cdd9eb;
  --margin-red: #e8b3a8;
  --highlighter: #f4e58c;
  --highlighter-ink: #7a6f2e;
  --muted: #8c8577;
  --amber: #e0a73c;
  --good-green: #5b8f4e;
  --house-red: #e8b3a8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background-color: #f8f3e8; }

body {
  margin: 0;
  color: var(--ink);
  /* No generic "cursive" in the stack: on phones it renders a script face for
     the split second before Shantell Sans loads, which read as a glitch. Fall
     back to a neutral system sans instead. */
  font-family: "Shantell Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  background-color: var(--paper);
  /* The journal page: faint ruled lines and a red margin line. The rules are a
     single-period gradient tiled with background-size rather than a
     repeating-linear-gradient — repeating gradients accumulate sub-pixel
     rounding over the page height, which made the lines drift on high-DPI
     phones. Tiling one cell keeps every line crisp and evenly spaced. */
  background-image:
    linear-gradient(to right,
      transparent 42px,
      rgba(232, 179, 168, 0.7) 42px, rgba(232, 179, 168, 0.7) 44px,
      transparent 44px),
    linear-gradient(to bottom,
      transparent 35px,
      rgba(205, 217, 235, 0.45) 35px, rgba(205, 217, 235, 0.45) 36px,
      transparent 36px);
  background-repeat: no-repeat, repeat-y;
  background-size: 100% 100%, 100% 36px;
  background-position: 0 0, 0 0;
}

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }

p { margin: 0 0 1rem; }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--highlighter); }

/* THE RECORD — typewriter face, reserved for labels and machine data. */
.label {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.data { font-family: "Courier Prime", "Courier New", monospace; }

.highlight {
  background: linear-gradient(100deg,
    transparent 0.4%, var(--highlighter) 2.5%,
    var(--highlighter) 97%, transparent 98.5%);
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- header ---------- */

.top {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.top .wordmark, .top nav a { white-space: nowrap; }
.top .wordmark {
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
}
.top .wordmark:hover { background: none; }
.top img { width: 34px; height: 34px; border-radius: 9px; }
.top nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 18px;
}
.top nav a {
  font-family: "Courier Prime", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.top nav a:hover { background: var(--highlighter); }

/* ---------- hero ---------- */

.hero { padding: 56px 0 24px; text-align: center; }
.hero .scene { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto 28px; }
.hero p.sub {
  font-size: 1.15rem;
  max-width: 34em;
  margin: 0.75rem auto 1.75rem;
}
.hero .byline { margin-top: 2.5rem; }

/* ---------- buttons ---------- */

.get {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--paper);
  background: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 12px 26px;
  text-decoration: none;
  cursor: default;
}
a.btn { cursor: pointer; }
a.btn:hover { background: var(--ink); color: var(--highlighter); }
.btn.ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--muted);
  border-style: dashed;
  font-size: 0.95rem;
  padding: 10px 20px;
}
.btn .soon {
  font-family: "Courier Prime", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--highlighter);
  color: var(--highlighter-ink);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 9px;
  vertical-align: 2px;
}
.platforms {
  margin-top: 14px;
  font-family: "Courier Prime", monospace;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- sections ---------- */

section { padding: 56px 0 8px; }
section > .label { display: block; margin-bottom: 0.75rem; }

.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 16px 14px 18px 14px;
  padding: 22px 24px;
  margin: 0 0 18px;
}
.card p:last-child { margin-bottom: 0; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 1.25rem; }
.cards .card { margin: 0; }
.cards .card:nth-child(2n) { transform: rotate(0.35deg); }
.cards .card:nth-child(2n + 1) { transform: rotate(-0.3deg); }
@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---------- era strip ---------- */

.eras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 1.5rem 0 0.5rem;
}
@media (max-width: 620px) {
  .eras { grid-template-columns: repeat(2, 1fr); }
}
.era {
  text-align: center;
}
.era .tile {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 6px 4px 0;
}
.era.peak .tile { background: var(--highlighter); }
.era svg { width: 100%; height: auto; display: block; }
.era figcaption {
  font-family: "Courier Prime", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 6px;
}
.era.peak figcaption em {
  display: block;
  font-style: normal;
  color: var(--highlighter-ink);
}

.story-chomp { float: right; width: 110px; height: auto; margin: 0 0 8px 18px; }
@media (max-width: 620px) { .story-chomp { width: 84px; } }

/* ---------- screenshot strip ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 1.25rem;
}
.shots img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 14px 16px 14px 18px;
  background: var(--card);
}
.shots img:nth-child(1) { transform: rotate(-0.4deg); }
.shots img:nth-child(2) { transform: rotate(0.35deg); }
.shots img:nth-child(3) { transform: rotate(-0.25deg); }
@media (max-width: 620px) {
  /* one thumb-flickable row rather than a mile of stacked screenshots */
  .shots {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .shots img { flex: 0 0 72%; scroll-snap-align: center; }
}

/* ---------- desktop shots ---------- */

.desk-lead { margin: 2rem 0 1rem; }
.desk-shot { margin: 0 0 20px; }
.desk-shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 14px 16px 18px 14px;
  background: var(--card);
}
.desk-shot:nth-of-type(odd) img { transform: rotate(-0.25deg); }
.desk-shot:nth-of-type(even) img { transform: rotate(0.3deg); }
.desk-shot figcaption { margin-top: 8px; text-align: center; }

/* ---------- faq ---------- */

.faq h3 { margin-top: 1.75rem; }
.faq h3:first-child { margin-top: 1rem; }
.faq p { max-width: 42em; }

/* ---------- pricing ---------- */

.price-line {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0.25rem 0 0.75rem;
}

/* The pricing section's buttons sit in the text column, not centered like the
   hero's, so the CTA lines up with the paragraph that sets it up. */
#deal .get { justify-content: flex-start; margin-top: 1.5rem; }
#deal .platforms { text-align: left; }

/* "Manage your licenses" — an outlined sibling to the solid buy button, so the
   pair reads as primary + secondary rather than two equal CTAs. */
.btn.alt {
  background: transparent;
  color: var(--ink);
}
a.btn.alt:hover {
  background: var(--highlighter);
  color: var(--ink);
}

/* The desktop-vs-mobile clarification: a margin note, not another sales card. */
.note { margin-top: 1.75rem; border-left: 6px solid var(--margin-red); }
.note h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }

/* ---------- footer ---------- */

footer {
  max-width: 780px;
  margin: 64px auto 0;
  padding: 28px 24px 48px;
  border-top: 2px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-family: "Courier Prime", monospace;
  font-size: 0.85rem;
  color: var(--muted);
}
footer a { color: var(--muted); }
footer .note { width: 100%; margin-top: 4px; }

/* ---------- privacy / article pages ---------- */

article.policy { padding: 40px 0 8px; }
article.policy h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
article.policy h2 { font-size: 1.35rem; margin-top: 2.25rem; }
article.policy ul { padding-left: 1.3rem; }
article.policy li { margin-bottom: 0.35rem; }

/* ---------- thanks (checkout success) ---------- */

.thanks { text-align: center; padding: 56px 0 8px; }
.thanks-chomp { width: 180px; height: auto; margin: 20px auto 4px; display: block; }
.thanks p.sub {
  font-size: 1.15rem;
  max-width: 32em;
  margin: 0.75rem auto 1.75rem;
}
.card.steps { text-align: left; max-width: 36em; margin: 0 auto 18px; }
.card.steps ol { margin: 0; padding-left: 1.4rem; }
.card.steps li { margin: 0 0 1rem; }
.card.steps li:last-child { margin-bottom: 0; }
.thanks .aside {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 32em;
  margin: 1.5rem auto 0;
}
.thanks .aside a { color: var(--muted); }

/* ---------- 404 ---------- */

.lost { text-align: center; padding: 96px 0 40px; }
.lost svg { width: 220px; height: auto; margin-bottom: 24px; }

/* ---------- narrow screens: keep copy clear of the red margin line ----------
   The margin line is painted at 42–44px from the viewport edge. On wide screens
   the content column is centred far to its right, so the line sits alone in the
   left gutter as intended. Once the column goes full-width (< ~820px) the text
   would start at the 24px padding and the line would slice straight through it.
   Indent the content past the line so it reads as a real notebook margin. */
@media (max-width: 820px) {
  .top,
  main,
  footer { padding-left: 54px; }
}