/* Glue — gluelabs.com
 *
 * The app's palette, so the site and the product do not look like different companies: cream
 * ground, near-black ink, one blue accent. The brand red appears only as the mark, for the reason
 * recorded in ui/test-icons.mjs — #FF452D is 3.25:1 on this cream, below the 4.5 text needs, and
 * the app already uses a red for destructive warnings.
 *
 * Plain CSS, no build step, matching ui/. */

:root {
  --bg: #fff8f1;
  --ink: #000000;
  --ink-2: #1a1a1a;
  --muted: #6f6a63;
  --line: #e6ded2;
  --line-2: #f0e9df;
  --accent-text: #0063e6;
  --accent-weak: #cfe2ff;
  --accent-on-weak: #0052c4;
  --brand: #ff452d;
  /* A second ground, half a step from --bg, so alternating sections read as separate without
     introducing a colour. Anything stronger turns a quiet page into a striped one. */
  --panel: #fdf3e9;
  --measure: 34rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 24px; }

/* ── Chrome ──────────────────────────────────────────────────────────────── */
header.top { padding: 22px 0; }
header.top .wrap { display: flex; align-items: center; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img.mark { width: 26px; height: 26px; border-radius: 6px; display: block; }
.brand img.word { height: 17px; display: block; }
nav.top-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav.top-nav a { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
nav.top-nav a:hover { color: var(--ink); }

/* ── Type ────────────────────────────────────────────────────────────────── */
h1 {
  font: 600 clamp(2.1rem, 5vw, 3.1rem)/1.1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -0.02em; margin: 0 0 18px; color: var(--ink);
}
h2 { font-size: 1.35rem; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ink); }
h3 { font-size: 1rem; margin: 0 0 6px; color: var(--ink); }
p { margin: 0 0 16px; max-width: var(--measure); }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 40rem; }
.muted { color: var(--muted); }
.sm { font-size: 0.875rem; }
a { color: var(--accent-text); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 56px 0 40px; }
.hero .mark-lg { width: 76px; height: 76px; border-radius: 18px; display: block; margin-bottom: 26px; }

.cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 26px 0 10px; }
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 8px; text-decoration: none;
  font-weight: 500; font-size: 15px; border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-2); }
.btn-quiet { border-color: var(--line); color: var(--ink-2); }
.btn-quiet:hover { border-color: var(--ink-2); }
.req { color: var(--muted); font-size: 13px; }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { padding: 40px 0; border-top: 1px solid var(--line-2); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 30px 36px; margin-top: 26px; }
.grid p { margin: 0; font-size: 0.94rem; color: var(--muted); }

/* The three claims. Bordered rather than filled, so the page stays as quiet as the app. */
.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 16px; margin-top: 24px; }
.claim { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.claim h3 { margin-bottom: 4px; }
.claim p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* ── Legal pages ─────────────────────────────────────────────────────────── */
/* Longhand, because these elements are `class="wrap doc"` and the shorthand would reset the 24px
   side padding `.wrap` gives them — invisible on a wide screen, where the 62rem cap leaves margins
   anyway, but on a phone it put the text against the glass. */
.doc { padding-top: 40px; padding-bottom: 60px; }
.doc h2 { margin-top: 34px; }
.doc p, .doc li { max-width: var(--measure); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 7px; }
.updated { color: var(--muted); font-size: 0.875rem; margin-bottom: 26px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--line); margin-top: 40px; padding: 30px 0 44px; }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 26px; }
footer.site h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
footer.site a { display: block; color: var(--ink-2); text-decoration: none; font-size: 0.9rem; margin-bottom: 7px; }
footer.site a:hover { color: var(--accent-text); }
.colophon { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.colophon img { height: 28px; opacity: 0.85; }
/* The rule above the colophon separates it from the link columns, so it is drawn only when those
   columns are there. On the legal pages the colophon is the whole footer, and the rule landed a
   few pixels under the footer's own top border — two lines saying one thing. */
.cols + .colophon { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.colophon .sm { margin-left: auto; }

@media (max-width: 640px) {
  header.top .wrap { flex-wrap: wrap; row-gap: 12px; }
  nav.top-nav { gap: 16px; margin-left: 0; width: 100%; }
  .colophon .sm { margin-left: 0; width: 100%; }

  /* Tap targets. Nav and footer links were 23px tall — fine for a cursor, and a guess with a
     thumb. 44px is Apple's minimum and the reason is physical, not stylistic.

     The padding is vertical only and the gaps shrink to match, so the rows do not grow: the links
     get taller without the header or footer getting taller with them. */
  nav.top-nav a { padding: 11px 0; }
  /* The logo is also a link home. Inline links inside prose are left alone — padding those to
     44px would break the line they sit in, and a reader tapping a word mid-sentence is aiming
     anyway. */
  .brand { padding: 9px 0; }
  footer.site a { padding: 10px 0; margin-bottom: 0; }
  footer.site .cols { gap: 18px; }
  /* A link that is a paragraph on its own — the contact addresses — has a line to itself, so it
     can take vertical padding without its hit area overlapping the lines above and below. That is
     what separates it from an inline link, not how important it is. */
  a.tap { display: inline-block; padding: 9px 0; }

  /* Full-width buttons, because a thumb reaching across a phone should not have to aim. */
  .cta { flex-direction: column; align-items: stretch; }
  .btn { text-align: center; padding: 14px 22px; }

  .hero { padding: 32px 0 28px; }
  section { padding: 30px 0; }
}

/* ── The redesign ─────────────────────────────────────────────────────────────
   Longer page, one argument per section. Sections alternate ground so a reader
   scrolling fast can tell where one ends — the previous page was a single
   unbroken cream and everything below the fold read as the same block. */

.wrap.narrow { max-width: 40rem; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
  color: var(--muted); margin-bottom: 14px; font-weight: 600;
}

/* The hero carries one promise, so it gets the room to be read as one. */
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); max-width: 14ch; }
.hero .lede { font-size: 1.2rem; max-width: 34rem; }

section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -0.015em;
  margin-bottom: 14px; max-width: 22ch;
}
section p { font-size: 1.02rem; }

/* A line that carries the section's whole point. Bigger, unindented, no rule —
   a blockquote bar would make it read as a citation rather than the argument. */
.pull {
  font-size: 1.15rem; color: var(--ink); margin: 18px 0 0; max-width: 30rem;
  line-height: 1.5;
}
.big { font-size: 1.25rem; color: var(--ink); }

/* What they've already tried. A definition list, because that is what it is:
   each thing named, then given its due before the limit is stated. */
.tried { margin: 22px 0 0; display: grid; gap: 18px; }
.tried dt { font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.tried dd { margin: 0; color: var(--muted); max-width: var(--measure); }

ul.plain { margin: 10px 0 16px; padding-left: 20px; color: var(--muted); }
ul.plain li { margin-bottom: 5px; }

/* ── Product panels ──────────────────────────────────────────────────────────
   Rendered rather than photographed, so they stay sharp, reflow on a phone and
   follow the reader's theme. They mirror the app's own surfaces; real captures
   and a short recording should replace them before launch. */
.showcase { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.showcase.alt { background: var(--bg); }
.shot {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; max-width: 42rem; margin: 0 auto;
}
.shot-label {
  text-transform: uppercase; letter-spacing: 0.07em; font-size: 11px;
  color: var(--muted); font-weight: 600;
}
.shot-sub { color: var(--muted); font-size: 0.9rem; margin: 6px 0 14px; }
.shot .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line-2);
}
.shot .row strong { display: block; color: var(--ink); font-weight: 500; }
.shot .row span { color: var(--muted); font-size: 0.9rem; }
.shot .row em { color: var(--muted); font-size: 0.82rem; font-style: normal; white-space: nowrap; }

.compose label {
  display: block; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 10px; color: var(--muted); margin: 12px 0 4px; font-weight: 600;
}
.compose .field {
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px;
  color: var(--ink-2); font-size: 0.94rem; background: var(--bg);
}
.compose .field.tall { min-height: 68px; }
.shot-actions { display: flex; gap: 8px; margin-top: 16px; }
.btn-mock {
  font-size: 13px; padding: 7px 15px; border-radius: 7px;
  background: var(--ink); color: var(--bg); font-weight: 500;
}
.btn-mock.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }

/* ── The two-axis map ────────────────────────────────────────────────────────
   Built from boxes rather than shipped as an image so the labels stay
   selectable, legible at any width, and correct in both themes. */
.axis { margin: 20px 0 18px; }
.axis-top, .axis-foot { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; }
.axis-top { text-align: center; margin-bottom: 8px; }
.axis-foot { display: flex; justify-content: space-between; margin-top: 8px; gap: 10px; }
.axis-foot span:nth-child(2) { text-align: center; }
.axis-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.axis-grid .q {
  padding: 16px; display: flex; flex-direction: column; gap: 5px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 0.9rem; color: var(--muted); min-height: 84px;
}
.axis-grid .q:nth-child(2n) { border-right: 0; }
.axis-grid .q:nth-child(n+3) { border-bottom: 0; }
.axis-grid .q.empty { color: var(--line); }
.axis-grid .q.here { background: var(--panel); }
.axis-grid .you { color: var(--ink); font-weight: 600; font-size: 1.05rem; }

/* FAQ. Closed by default: eight open answers is a wall, and someone with the
   question will look for it. */
#faq details { border-top: 1px solid var(--line-2); padding: 12px 0; }
#faq summary { cursor: pointer; color: var(--ink); font-weight: 500; }
#faq details p { margin: 8px 0 0; color: var(--muted); max-width: var(--measure); }

@media (max-width: 640px) {
  .hero h1 { max-width: none; }
  .axis-grid { grid-template-columns: 1fr; }
  .axis-grid .q { border-right: 0; border-bottom: 1px solid var(--line); }
  .axis-grid .q:last-child { border-bottom: 0; }
  .axis-foot { flex-direction: column; gap: 2px; }
  .axis-foot span { text-align: left !important; }
}