/* Light is warm, uncoated paper rather than flat white: it suits the black and
     white film and the cafe. --glow is the soft light behind the stage. */
  :root { --bg: #f3efe7; --glow: #fffdf9; --fg: #1b1814; --muted: #615a50; --line: #e2dbcf; --accent: #1c6cf5; --accent-ink: #fff; --surface: #fffdf9; --grain: .07; }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #111; --fg: #f2f2f2; --muted: #9a9a9a; --line: #2a2a2a; --accent: #62a0ff; --accent-ink: #0a0a0a; --surface: #1a1a1a; --glow: #111; --grain: 0; }
  }
  * { box-sizing: border-box; margin: 0; }
  /* Honeycomb bands frame every page, mirrored: one along the top edge, one along
     the bottom (tools/honeycomb.py; both render at the same cell size). The bottom band sits on the page's bottom edge; min-height
     keeps it at the bottom of the window on short pages too, and the padding keeps
     the footer links clear of it. */
  body { min-height: 100vh; padding-bottom: 96px;
    background: url("honeycomb-top.svg") repeat-x left top / auto 183px,
                url("honeycomb.svg") repeat-x left bottom / auto 265px,
                radial-gradient(ellipse 75% 50% at 50% 70%, var(--glow) 0%, var(--bg) 65%) fixed, var(--bg);
    color: var(--fg); font: 17px/1.5 system-ui, sans-serif; }
  /* Reduced motion: the same honeycomb without its blinking cells. */
  @media (prefers-reduced-motion: reduce) { body { background-image: url("honeycomb-top.svg#still"), url("honeycomb.svg#still"), radial-gradient(ellipse 75% 50% at 50% 70%, var(--glow) 0%, var(--bg) 65%); } }
  /* Faint paper grain, echoing the grain in the film. Purely decorative. */
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
  main { max-width: 1200px; margin: 0 auto; padding: 64px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; }
  header { display: flex; justify-content: space-between; align-items: center; }
  .lockup { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 22px; color: inherit; text-decoration: none; }
  .lockup img { width: 26px; height: 26px; }
  @media (prefers-color-scheme: dark) { .lockup img { filter: invert(1); } }
  .soon { display: inline-block; margin-bottom: 20px; padding: 5px 14px; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  h1 { font-size: clamp(36px, 7vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
  h1 + p { color: var(--muted); margin-top: 16px; }
  /* Column widths follow each item's aspect ratio (phone 1170:2532, video 16:9) so all three share one height. */
  .stage { display: grid; grid-template-columns: 0.462fr 1.778fr 0.462fr; grid-template-areas: "left video right"; gap: 20px; align-items: center; }
  /* The screenshots have no status bar, so the top padding stands in for one and keeps the notch off the app header. */
  .phone { position: relative; padding-top: 20px; border: 7px solid #161616; border-radius: 30px; overflow: hidden; background: #fafafa; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.35); }
  @media (prefers-color-scheme: dark) { .phone { border-color: #333; } }
  .phone img { display: block; width: 100%; height: auto; }
  .phone::before { content: ""; position: absolute; top: 5px; left: 50%; translate: -50% 0; width: 28%; height: 13px; border-radius: 99px; background: #161616; }
  .phone:first-child { grid-area: left; }
  .phone:last-child { grid-area: right; }
  video { grid-area: video; width: 100%; height: auto; border-radius: 16px; background: #000; }
  @media (max-width: 760px) {
    main { padding-top: 24px; gap: 36px; }
    .soon { margin-bottom: 12px; }
    .stage { grid-template-columns: 1fr 1fr; grid-template-areas: "video video" "left right"; gap: 16px; }
  }
  footer { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  footer a { color: inherit; }
  /* Social links: brand marks in the footer's own colour, labelled for screen readers. */
  footer .icon svg { display: block; width: 18px; height: 18px; fill: currentColor; }

/* ---------- legal pages: terms.html, privacy.html ---------- */
/* The text is the old site's, verbatim; these rules are its legal styles
   translated onto this site's tokens. */
.legal .wrap { max-width: 760px; }
.legal .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.legal h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.1; margin-top: 8px; }
.legal .lede { font-size: 19px; color: var(--muted); margin-top: 18px; }
.legal h2 { font-size: 22px; margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.legal h3 { font-size: 17px; margin: 28px 0 0; }
.legal p { margin: 14px 0 0; }
.legal ul { margin: 14px 0 0; padding-left: 20px; }
.legal li { margin: 8px 0; color: var(--muted); }
.legal li strong { color: var(--fg); font-weight: 600; }
.legal a { color: inherit; text-underline-offset: 3px; }
.legal .deflist { list-style: none; padding: 0; }
.legal .deflist li { padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.legal .deflist li:last-child { border-bottom: 1px solid var(--line); }
.legal-meta { font-size: 14px; color: var(--muted); margin-top: 16px; }
.callout { margin: 32px 0 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.callout p { margin: 0; color: var(--muted); font-size: 15px; }
.callout strong { color: var(--fg); }
.legal-todo { border: 1px dashed var(--muted); border-radius: 12px; padding: 14px 16px; font-size: 15px; color: var(--muted); }
.legal-todo strong { color: var(--fg); }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.legal-table th { font-weight: 600; }
.legal-table td { color: var(--muted); }
@media (max-width: 640px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .legal-table td { border: 0; padding: 2px 0; }
  .legal-table td:first-child { color: var(--fg); font-weight: 600; }
}