/* Pocket Theory — the app's own "Canvas" look: a printed score. Cream paper, warm ink,
   one rust accent, serif headings, hairline rules instead of boxes. Colours are the app's
   Canvas palette (app/styles/tokens.css), so the page and the screenshots on it agree.

   Loaded AFTER ../style.css on every page in this folder: it re-points the house
   variables, so privacy.html and support.html take the look with no markup changes, and
   adds the components only index.html uses. No web fonts, no requests: the system serif
   stack is the same one the app uses. */

:root {
  --bg: #f3eee4;
  --fg: #2b2723;
  --muted: #675e54;
  --rule: #d9cfbd;
  --accent: #a4502f;
  --surface: #faf7f0;
  --serif: ui-serif, "New York", "Iowan Old Style", Charter, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1a17;
    --fg: #efe8dc;
    --muted: #a99d8e;
    --rule: #3a342e;
    --accent: #e08a62;
    --surface: #26221e;
  }
}

body { background: var(--bg); color: var(--fg); font-family: var(--sans); }
main a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }

/* privacy and support: the house page, set in the app's type instead of all-caps mono */
main h1, main h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--fg);
}
main h1 { font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.05; }
main h2 { font-size: 1.375rem; margin-top: 2.5rem; }
main .sub { color: var(--accent); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8125rem; }

/* the landing page's <main> is the whole page, not the house's narrow legal column */
.pt main { max-width: none; padding: 0; line-height: 1.55; }
.pt main h2 { border-bottom: 0; padding-bottom: 0; }

/* ------------------------------------------------------------------ the landing page */
.pt { --gut: clamp(1rem, 5vw, 3rem); }
.pt .top { padding: 1.25rem var(--gut); font-size: 0.9375rem; }
.pt .top a { text-decoration: none; color: var(--muted); }
.pt .top a:hover { color: var(--fg); }

.pt .hero {
  max-width: 68rem; margin: 0 auto; padding: clamp(1.5rem, 6vw, 4.5rem) var(--gut) clamp(2rem, 6vw, 4rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .pt .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.pt .kicker {
  margin: 0 0 0.5rem; color: var(--accent); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pt h1 { font-size: clamp(2.75rem, 9vw, 5rem); line-height: 1; margin: 0 0 1.25rem; }
.pt .lede { font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.5; color: var(--muted); margin: 0 0 2rem; max-width: 32rem; }

.pt .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 1rem; }
.pt .btn {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.4rem;
  border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
}
.pt .btn:hover { background: var(--accent); border-color: var(--accent); color: #faf7f0; }
.pt .soon {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.2rem; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--fg); font-weight: 600; font-size: 0.9375rem;
}
.pt .small { color: var(--muted); font-size: 0.875rem; margin: 0; }

/* the phone screens: a row on wide screens, a swipeable strip on a phone */
.pt .screens {
  display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.pt .screens li { flex: 0 0 auto; width: min(62vw, 15rem); scroll-snap-align: start; }
.pt .screens img {
  display: block; width: 100%; height: auto; border-radius: 1.4rem;
  border: 1px solid var(--rule); background: var(--surface);
  box-shadow: 0 10px 30px rgba(60, 45, 30, 0.12);
}
.pt .hero .screens li:nth-child(n+3) { display: none; }
@media (min-width: 52rem) { .pt .hero .screens { overflow: visible; } .pt .hero .screens li { width: calc(50% - 0.5rem); } .pt .hero .screens li:nth-child(2) { margin-top: 3rem; } }

/* features: hairline-ruled columns, like the app's sections */
.pt .features {
  max-width: 68rem; margin: 0 auto; padding: 0 var(--gut) clamp(2.5rem, 7vw, 5rem);
  display: grid; gap: 0 clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.pt .feature { border-top: 1px solid var(--rule); padding: 1.5rem 0 0.5rem; }
.pt .feature h2 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.pt .feature p { margin: 0 0 1rem; line-height: 1.6; color: var(--muted); }
.pt .feature p strong { color: var(--fg); font-weight: 600; }

.pt .more { max-width: 68rem; margin: 0 auto; padding: 0 var(--gut) clamp(2.5rem, 7vw, 5rem); }
.pt .more h2 { font-size: 1.5rem; margin: 0 0 1.25rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.pt .note { color: var(--muted); font-size: 0.875rem; margin: 0.75rem 0 0; }

.pt .facts {
  max-width: 68rem; margin: 0 auto; padding: 1.5rem var(--gut) 3rem;
  display: flex; gap: 1.5rem; align-items: flex-start; border-top: 1px solid var(--rule);
}
.pt .facts .icon { width: 72px; height: 72px; border-radius: 16px; flex: none; }
.pt .facts p { margin: 0 0 0.5rem; line-height: 1.55; }
.pt .facts .links { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

.pt footer { max-width: 68rem; margin: 0 auto; padding: 0 var(--gut) 3rem; color: var(--muted); font-size: 0.875rem; }
.pt footer a { color: inherit; }