/* tiny social site. Tokens lifted from the light half of Hetki in
   MindBrowser/Views/Theme.swift ("blue & butter") so the page and the app read
   as one thing: warm off-white, slate ink, one blue primary action, butter
   only where something is picked out.

   Light only, on purpose. The app follows the device; the site doesn't — a
   black page reads as a warning, and this is an invitation. */

:root {
  color-scheme: light;
  --bg: #fcf8f2;
  --text: #354958;
  --text-secondary: #66757c;
  --text-tertiary: #66757c;
  --border: #dedcd5;
  --accent: #456785;
  --on-accent: #ffffff;
  --butter: #f4e8c8;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

/* Pixel art. The birds are a 26×13 grid, the site glyphs 11×11, so scaling
   is done with width alone and the edges must stay hard. The birds carry
   their own fills; everything else takes the ink colour. */
.px {
  display: block;
  fill: var(--text);
  shape-rendering: crispEdges;
  height: auto;
}

.px--logo { width: 160px; margin: 0 auto; }

/* The birds: the app's BrandMark, two halves of one square so each can dance
   on its own. Same 160pt width as the app, because the dance moves in
   absolute points and the feathers would drift off a smaller mark. */
.birds {
  position: relative;
  display: flex;
  width: 160px;
  height: 80px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.birds:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.bird {
  display: block;
  width: 50%;
  height: 100%;
  shape-rendering: crispEdges;
  transform-origin: 50% 50%;
}
.feathers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* How a session goes, straight under the lead: the three things the app
   actually does, in the order it does them. */
.steps {
  list-style: none;
  max-width: 430px;
  margin: 28px auto 0;
  padding: 0;
  text-align: left;
}
.steps li {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  color: var(--text-secondary);
}
.steps span {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--butter);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}
.px--logo-sm { width: 66px; margin: 0 auto; }
.px--app { width: 18px; fill: var(--text); }

/* The app's section label: small, tracked, quiet. */
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
  margin: 0;
}

/* Four sizes, and only four: page title, section title, body, label. Anything
   that needs a fifth is a sign the page is saying too much. */
h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin: 12px 0 0;
}

h2 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--text);
  margin: 0 0 4px;
}

p {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

p.lead {
  font-size: 17px;
  margin-top: 16px;
}

/* Reference, not argument: quiet enough to skip. */
.fineprint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-tertiary);
}

a { color: inherit; }

.hero {
  text-align: center;
  padding-bottom: 8px;
}

/* The name under the birds, as on the app's home screen, set as the page's
   biggest text. The tagline sits under it as a lighter line, so the two read
   as name and slogan rather than two stacked headings. */
.wordmark {
  margin: 18px 0 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--text);
}
.hero h1 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.2px;
  margin-top: 8px;
}
.hero p { margin-left: auto; margin-right: auto; max-width: 430px; }

section { padding-top: 56px; }

/* The screenshots carry no heading, so they sit closer to the hero. */
.section--shots { padding-top: 40px; }

/* Primary action: the app's MindPrimaryButtonStyle, blue with a 14pt radius. */
.cta {
  display: block;
  margin-top: 28px;
  padding: 16px 24px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.cta:hover { opacity: 0.85; }
.cta:active { opacity: 0.85; transform: scale(0.98); }

/* The one line of argument on the page, straight under the hero. No heading
   over it: it explains the flag by standing next to it. */
.manifesto {
  max-width: 440px;
  margin: 8px auto 0;
  font-size: 17px;
  color: var(--text);
  text-align: center;
}

/* The app's home-screen line, reused as the closing note above the last CTA. */
.closing {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}

.cta-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}

/* Screenshots in a device frame. The frame is drawn here rather than baked
   into the images so the shots stay crisp at every width and can be swapped
   for new ones without re-exporting a mockup. Aspect ratio matches the
   exported screenshots (540 × 1168) — keep them in step. */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 22px;
  margin: 24px 0 0;
  padding: 0;
}

.shot {
  margin: 0;
  text-align: center;
}

.phone {
  position: relative;
  margin: 0 auto;
  max-width: 240px;
  padding: 7px;
  border-radius: 30px;
  background: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 12px 28px rgba(0, 0, 0, 0.1);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 1168;
  border-radius: 24px;
  background: var(--bg);
}

/* The dynamic island, sitting over the screenshot's own status bar. */
.phone::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 3.2%;
  min-height: 12px;
  border-radius: 999px;
  background: #1a1a1a;
}

/* A shot that brings its own dynamic island: don't draw a second over it. */
.phone--island::after { display: none; }

.shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
}

/* Narrow screens: one phone at a readable size, swipe for the rest. */
@media (max-width: 520px) {
  .shots {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px 6px;
  }

  .shot {
    flex: 0 0 auto;
    width: 62vw;
    max-width: 240px;
    scroll-snap-align: center;
  }
}

/* One site's changes, headed by the same pixel glyph the app's picker uses. */
.app-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.changes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.changes li {
  color: var(--text-secondary);
  padding-left: 20px;
  margin-top: 7px;
  position: relative;
}

.changes li::before {
  content: "—";
  position: absolute;
  left: 0;
}

.block { margin-top: 30px; }

/* A paragraph closing out a list of changes. */
.changes + p { margin-top: 16px; }

/* Breaks a band out of the reading column without leaving the page's rhythm:
   wide enough for the three site cards side by side, still centred. */
.wide {
  width: min(880px, calc(100vw - 40px));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* One card per site. Same hairline vocabulary as the app's chips. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

/* Three across when there's room; two plus a full-width third in between,
   so x never sits alone in a half-empty row. */
@media (min-width: 560px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 780px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards .card:last-child { grid-column: auto; }
}

.card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.card .changes li { margin-top: 8px; }

/* Hairline box: the app uses it for an ask rather than another line of spec. */
.box {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.box p { margin-top: 8px; }

/* The one ask on the page: butter-filled, like the app's selected chip, so
   it doesn't read as a fourth card. */
.box--tip {
  max-width: 620px;
  margin: 20px auto 0;
  background: var(--butter);
  border-color: transparent;
}

/* Secondary grey drops under 4.5:1 on butter, so the tip reads in ink. */
.box--tip p { color: var(--text); }

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-tertiary);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

footer a { color: var(--text-secondary); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .colophon { margin-top: 14px; font-size: 13px; color: var(--text-tertiary); }

/* Legal + support pages: same shell, denser prose. */
.doc { padding-top: 40px; }
.doc h2 { margin-top: 34px; }
.doc h2:first-of-type { margin-top: 0; }
.doc ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--text-secondary);
}
.doc li { margin-top: 6px; }

.back {
  display: inline-block;
  margin-bottom: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.back:hover { color: var(--text); }

@media (max-width: 420px) {
  .wrap { padding: 40px 20px 56px; }
}