/* vispr.fit — the public site. Colours are sampled from the app's own assets (see
   backend/website/README.md); type matches the marble buttons (Montserrat SemiBold) with a
   legibility-first body face. Dark only: it is the app's default look. */

@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/montserrat-600.c9799d10d224.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-400.d444e1815a3a.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-700.c6b471cbb2b9.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/atkinson-400-italic.66d79cf044cb.woff2") format("woff2"); }

:root {
  --stone: #1E201E;        /* Charcoal marble, the app's default background */
  --glass: #333A35;        /* exercise-tile glass */
  --jade: #7F9381;         /* tile figures */
  --button-jade: #283B2A;  /* marble button pill */
  --ink: #E8ECE8;          /* headings */
  --text: #C2CAC3;         /* body, 9.8:1 on stone */
  --muted: #98A39A;        /* secondary, 6.3:1 */
  --link: #86C98E;         /* the brand green lifted for text, 8.4:1 */
  --line: rgba(232, 236, 232, 0.12);

  --display: "Montserrat", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;

  --gutter: max(20px, env(safe-area-inset-left));
  --measure: 34rem;        /* ~70 characters of body text */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
}
/* The marble is ONE image pinned behind the page. Repeating it showed a hard seam where the
   texture (not made to tile) met itself; `background-attachment: fixed` would fix that but
   iOS Safari ignores it, so a fixed layer does the pinning instead. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--stone) url("img/marble-charcoal-sm.554b5bdd5c02.webp") center / cover no-repeat;
}
@media (min-width: 900px) {
  body::before { background-image: url("img/marble-charcoal.85013cc2afeb.webp"); }
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0; }
h1, h2 { text-wrap: balance; }   /* no one-word last lines ("… every / PR") */
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* --- header ---------------------------------------------------------------- */
.site-header { padding-top: max(20px, env(safe-area-inset-top)); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font: 600 1.25rem/1 var(--display); }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.site-nav { display: flex; gap: 18px; font-size: 0.95rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* --- hero: the tile wall ----------------------------------------------------- */
.hero { padding: 40px 0 72px; overflow: hidden; }
.hero .wrap { display: grid; gap: 40px; }
.hero h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.015em;
  max-width: 12ch; }
.hero .lede { font-size: 1.1875rem; max-width: 30rem; margin: 20px 0 28px; }
.get { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.app-store img { display: block; height: 54px; width: auto; }
.coming-soon { color: var(--muted); font-size: 0.95rem; margin: 0; }

.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.wall li:nth-child(n+10) { display: none; }
.wall img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 248; }

@media (min-width: 900px) {
  .hero { padding-top: 64px; }
  .hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; }
  /* The wall runs off the right edge: it reads as a slice of a bigger wall, like the Lift tab. */
  .wall { grid-template-columns: repeat(4, 1fr); width: calc(100% + 18vw); }
  .wall li:nth-child(n+10) { display: block; }
}

/* One orchestrated moment: the tiles settle in once on load. Opacity only — nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  .wall li { animation: tile-in 600ms ease-out both; animation-delay: calc(var(--i) * 45ms); }
  @keyframes tile-in { from { opacity: 0; } to { opacity: 1; } }
}

/* --- quote ------------------------------------------------------------------- */
.quote { padding: 64px 0; border-top: 1px solid var(--line); }
.quote figure, .quote blockquote { margin: 0; }
.quote blockquote { max-width: 44rem; }
.quote blockquote p { font: italic 400 clamp(1.3rem, 1rem + 1.2vw, 1.75rem)/1.45 var(--body); color: var(--ink); }
.quote figcaption { color: var(--muted); margin-top: 8px; }

/* --- features ---------------------------------------------------------------- */
.features { padding: 24px 0 40px; }
.feature { display: grid; gap: 24px; align-items: center; padding: 48px 0; border-top: 1px solid var(--line); }
.feature h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; margin-bottom: 14px; }
.feature .copy { max-width: var(--measure); }
.shot { margin: 0; justify-self: center; width: min(280px, 72vw); }
.shot img { display: block; width: 100%; height: auto; border-radius: 28px; }
/* The share card is its own image, not a phone screen, so it's wider. Its export has a dark
   square backdrop; rounding it keeps that from reading as a hard black box on the marble. */
.shot-card { width: min(340px, 80vw); }
.shot-card img { border-radius: 22px; }
/* Two screens that belong together (Ideas + Bug Report), side by side at every width. */
.shot-pair { display: flex; gap: 16px; justify-content: center; }
.shot-pair .shot { width: min(220px, 42vw); }
.shot figcaption { color: var(--muted); font-size: 0.9rem; text-align: center; margin-top: 10px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 64px; padding: 64px 0; }
  .feature:nth-child(even) .shot, .feature:nth-child(even) .shot-pair { order: -1; }
}

.touches { padding: 64px 0; border-top: 1px solid var(--line); }
.touches h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 28px; }
.touch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.touch-list img { display: block; width: min(280px, 72vw); height: auto; border-radius: 28px; margin: 0 auto 14px; }
.touch-list p { text-align: center; max-width: 18rem; margin: 0 auto; }
@media (min-width: 900px) { .touch-list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.every-lift { padding: 56px 0; border-top: 1px solid var(--line); }
.every-lift h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 10px; }
.every-lift p { color: var(--muted); max-width: var(--measure); }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 16px 0 0; padding: 0; }
.strip img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 248; }
@media (min-width: 700px) { .strip { grid-template-columns: repeat(6, 1fr); } }

/* --- developer + data -------------------------------------------------------- */
.panel { padding: 64px 0; border-top: 1px solid var(--line); }
.panel .wrap { display: grid; gap: 48px; }
.panel h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 14px; }
.panel section { max-width: var(--measure); }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 12px 0; border-top: 1px solid var(--line); }
.facts li:first-child { border-top: 0; padding-top: 0; }
.facts strong { color: var(--ink); }
@media (min-width: 900px) { .panel .wrap { grid-template-columns: 1fr 1fr; gap: 64px; } }

.closing { padding: 56px 0 72px; border-top: 1px solid var(--line); }
.closing h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 20px; }

/* --- footer ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 max(32px, env(safe-area-inset-bottom));
  color: var(--muted); font-size: 0.95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { color: var(--muted); }

/* --- document pages (privacy, terms, support) -------------------------------- */
.doc { padding: 48px 0 72px; }
.doc .wrap > * { max-width: 42rem; }
.doc h1 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem); margin-bottom: 6px; }
.doc h2 { font-size: 1.25rem; margin: 36px 0 8px; }
.doc .meta { color: var(--muted); margin-bottom: 20px; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc p, .doc li { overflow-wrap: anywhere; }