/*
 * Sayshort — marketing site.
 *
 * The visual language is the app's, not a separate "web brand": pale blue wave
 * bands covering the whole page, hard-edged offset slabs instead of soft
 * shadows, Rubik for everything you read, and no red anywhere. Display lines —
 * h1, h2, the wordmark — are Instrument Serif in capitals, and appear nowhere
 * inside a sentence. Colours come from
 * `tokens.css`, which is generated from the app's own tokens.
 *
 * No framework. The site is four pages; a build step here would only add ways
 * for it to be broken.
 */

@import url('tokens.css');

/* Both faces, self-hosted. These pages must be set in the same type as the
 * landing page — a privacy policy in a different typeface from the page that
 * linked to it reads as a different company's, which is precisely the
 * impression the one URL App Store review actually opens should not give.
 *
 * Local files, both. Nothing here reaches a font CDN, which is why
 * `privacy.html` can go on claiming this site makes no third-party request. */
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Rubik-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Rubik-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/Rubik-ExtraBold.woff2') format('woff2');
}

:root {
  --display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'Rubik', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* THE TYPE SCALE, DUPLICATED FROM `index.html` ON PURPOSE — keep them equal.
     The landing page carries its own inline stylesheet and these two pages
     carry only this one, which is the architecture rather than an accident:
     the pages App Store review actually opens should have no way to fail, and
     that means not depending on a 230KB file they do not use. `@font-face` is
     already duplicated across the two sheets for the same reason.

     The cost of the duplication is drift, and it had already happened three
     times before this pass: these pages had NO `body` font-size at all and so
     rendered at the browser's 16px against the landing page's 17px; their
     h1/h2 leading was 0.95 against 0.92; and `.wordmark` declared
     `letter-spacing` twice, so it was tracked NEGATIVELY here and positively
     there. All three are corrected below. If you change the scale, change it
     in both places in the same commit. */
  --t-h2:   clamp(1.45rem, 3.2vw, 2.35rem);
  --t-h3:   clamp(0.95rem, 1.6vw, 1.08rem);
  --t-lead: clamp(0.98rem, 1.35vw, 1.12rem);
  --t-body: 0.96rem;
  --t-small: 0.85rem;
  --t-cap:  0.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  /* Stated, not inherited from the browser's 16px default. Without this the
     two pages read a size the landing page does not. */
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.55;
  /* The wave ladder covers the entire page, exactly as it does in the app —
     never a band at the top with plain canvas beneath it.

     Radial, not linear. Three flat linear-gradient bands gave hard horizontal
     edges straight across the page, which at this scale reads as colour banding
     in the display rather than as a pattern in the design. Very wide, very
     shallow ellipses carry the curve a crest needs. */
  background-image:
    radial-gradient(120% 16% at 38% 10%, var(--band-1) 0%, transparent 100%),
    radial-gradient(130% 15% at 76% 38%, var(--band-2) 0%, transparent 100%),
    radial-gradient(125% 17% at 24% 66%, var(--band-3) 0%, transparent 100%),
    radial-gradient(120% 14% at 64% 90%, var(--band-2) 0%, transparent 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

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

.prose { max-width: 42rem; }

section { padding: 4.5rem 0; }

/* ── Type ───────────────────────────────────────────────────────────────── */

/* Capitals in the serif for the two display sizes, and the sans for h3 — the
   same split index.html uses, and for the same reason: a serif at subhead size
   beside sans body copy reads as a font that failed to load. */
h1, h2 {
  font-family: var(--display); font-weight: 400;
  /* Matched to index.html's, which opened when the scale came down: capitals
     pack, and the smaller they are set the more of the space lowercase would
     have provided has to be put back. */
  text-transform: uppercase; letter-spacing: 0.012em;
  line-height: 0.95; margin: 0 0 0.5em;
}
/* h1 keeps a size of its own — it is the page title on a document with no
   drawn headline, so it should outrank h2 rather than match it. Both stay
   clear of the ~1.4rem floor `fonts/README.md` puts under the display face. */
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
h2 { font-size: var(--t-h2); }
h3 {
  font-weight: 600; font-size: var(--t-h3);
  text-transform: uppercase; letter-spacing: 0.1em;
  line-height: 1.3; margin: 0 0 0.6em;
}

p { margin: 0 0 1.1em; }

.lead {
  font-size: var(--t-lead);
  max-width: 34rem;
}

.muted { opacity: 0.78; }

a { color: var(--accent-text); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-pressed); }

/* ── The slab, the app's signature ──────────────────────────────────────── */

/*
 * A hard offset block behind the element — never a blurred shadow. In the app
 * this is a real sibling view rendered before the pressable, because a child
 * with `z-index: -1` can never sit behind its own parent's background. On the
 * web `::before` gives the same result honestly.
 */
.raised {
  position: relative;
  background: var(--surface);
  border: var(--raise-border) solid var(--outline);
  border-radius: 18px;
}

.raised::before {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--raise-border) solid var(--outline);
  border-radius: 18px;
  background: var(--accent-soft);
  transform: translate(var(--raise-offset), var(--raise-offset));
  z-index: -1;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: var(--raise-border) solid var(--outline);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: var(--t-body);
  text-decoration: none;
  box-shadow: var(--raise-offset) var(--raise-offset) 0 var(--outline);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.btn:hover { background: var(--accent-pressed); color: var(--on-accent); }

/* Pressing moves the element onto its own slab. */
.btn:active {
  transform: translate(var(--raise-offset), var(--raise-offset));
  box-shadow: 0 0 0 var(--outline);
}

.btn-quiet {
  background: var(--surface);
  color: var(--accent-text);
}

.btn-quiet:hover { background: var(--accent-soft); color: var(--accent-text); }

/* ── Header ─────────────────────────────────────────────────────────────── */

header.site {
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ONE `letter-spacing`, AND IT IS POSITIVE. This rule declared it twice — a
   correct 0.02em followed a line later by -0.02em, so the later one won and the
   wordmark on these two pages was tracked NEGATIVELY while the identical
   wordmark on the landing page was tracked open. Capitals in a display serif
   pack on their own; closing them further is the one thing this face cannot
   take. 1.42rem to match index.html, and because `fonts/README.md` floors the
   display face at about 1.4rem — 1.35 was under it. */
.wordmark {
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.42rem;
  text-decoration: none;
  color: var(--ink);
}

nav.site a {
  margin-left: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}

nav.site a:hover { color: var(--accent-text); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: 3rem 0 4rem; }

.hero .cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  align-items: center;
}

/* ── The NOW card: a real render of the product's one screen ────────────── */

.now-card {
  padding: 1.75rem; max-width: 24rem;
}

.now-label {
  font-size: var(--t-cap);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.5rem;
}

.now-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.25rem; }
.now-detail { margin: 0 0 1.25rem; opacity: 0.75; }

.now-next {
  border-top: 1px solid color-mix(in srgb, var(--outline) 18%, transparent);
  padding-top: 0.9rem;
  margin-top: 1.25rem;
  font-size: var(--t-small);
  opacity: 0.8;
}

/* ── Feature grid ───────────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.25rem;
}

.grid .raised { padding: 1.5rem; }

/* ── Split ──────────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 52rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer.site {
  border-top: 1.5px solid var(--outline);
  padding: 2.5rem 0 3.5rem;
  margin-top: 3rem;
  font-size: var(--t-small);
}

footer.site nav a { margin-right: 1.4rem; }

/* ── Long-form pages ────────────────────────────────────────────────────── */

.doc { padding: 2rem 0 4rem; }
.doc h2 { margin-top: 2.5rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.5rem; }

.callout {
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}