/* tersopool.com — styles.css. The app's tokens (tersopool public/styles.css, D11): near-white ground,
   slate-blue accent, system font. Meaning colours are blues, never green, never hue alone — the one
   meaning colour on this page is the accent, on links; tests/colors.check.py keeps every colour readable
   under red-green colourblindness. Phone-first: one column at 375 px with no sideways scroll; the three
   pictures sit in a strip you swipe on a phone and side by side from 760 px up. Targets 48 px or taller. */
:root {
  color-scheme: light;
  --bg: #F6F5F2;
  --card: #FFFFFF;
  --ink: #1D1D1B;
  --muted: #6B6A66;
  --rule: #EEECE7;
  --accent: #2E5A88; /* slate blue: links */
  --tint: #E6EBF1;   /* pale slate behind the beta block */
  --pad: 20px;
  --col: 640px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/24px var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p { margin: 0; overflow-wrap: anywhere; }
em { font-style: normal; font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the top ---- */
.top { display: flex; align-items: center; justify-content: space-between; max-width: var(--col); margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) var(--pad) 0; }
.wordmark { display: inline-flex; align-items: center; min-height: 48px; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); }
.wordmark:hover { text-decoration: none; }
.signin { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; margin-right: -12px; font-weight: 600; }

/* ---- the page ---- */
main { max-width: var(--col); margin: 0 auto; padding: 0 var(--pad); }
section { margin-top: 56px; }
h2 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
section > p, .point p { margin-top: 10px; }
.hero { margin-top: 44px; }
.hero h1 { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.5px; }
.lead { margin-top: 16px; font-size: 19px; line-height: 27px; color: var(--muted); }
.lead em { color: var(--ink); }
.button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 28px; padding: 0 20px; background: var(--ink); color: #FFFFFF; border-radius: 16px; font-size: 17px; font-weight: 600; text-align: center; }
.button:hover { text-decoration: none; opacity: 0.9; }
.button:active { opacity: 0.85; }
.under { margin-top: 12px; font-size: 15px; line-height: 20px; color: var(--muted); text-align: center; }

/* ---- the three pictures: a strip to swipe on a phone, three across from 760 px ---- */
.shots { margin-top: 48px; }
.strip { display: flex; gap: 16px; list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: var(--pad); -webkit-overflow-scrolling: touch; }
.strip li { flex: 0 0 248px; scroll-snap-align: start; }
.strip img { width: 100%; border-radius: 28px; border: 1px solid var(--rule); background: var(--card); box-shadow: 0 8px 24px rgba(29, 29, 27, 0.08); }
.strip p { margin-top: 12px; padding: 0 4px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--muted); }

/* ---- the three points ---- */
.points { display: flex; flex-direction: column; gap: 32px; }
.point h2 { font-size: 22px; line-height: 28px; }
.point p { color: var(--muted); }

/* ---- the beta, the ask, the foot ---- */
.beta { background: var(--tint); border-radius: 20px; padding: 24px 20px; }
.beta p { color: var(--ink); }
.ask p a { display: inline-block; padding: 14px 0; margin: -14px 0; font-weight: 600; } /* a 48 px target inside the sentence */
.ask .button { margin-top: 20px; }
.foot { max-width: var(--col); margin: 64px auto 0; padding: 24px var(--pad) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); font-size: 15px; line-height: 20px; color: var(--muted); }
.foot p { margin: 0; }
.foot p + p { margin-top: 8px; }
.foot a { display: inline-block; padding: 14px 0; margin: -14px 0; font-weight: 600; } /* the words are small; each is a 48 px target */

/* ---- wider screens ---- */
@media (min-width: 760px) {
  .top { padding-top: 24px; }
  .hero { margin-top: 72px; }
  .hero h1 { font-size: 44px; line-height: 52px; letter-spacing: -0.8px; }
  .button { width: auto; min-width: 280px; margin-left: auto; margin-right: auto; }
  .shots { max-width: 960px; margin: 64px auto 0; padding: 0; }
  .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; overflow: visible; }
  .strip li { flex: none; }
  .points { flex-direction: row; gap: 32px; }
  .point { flex: 1; }
}