/* AfterNote — the public site.
 *
 * The token block below is copied verbatim from frontend/src/styles.css, which is the source of
 * truth. Duplicated rather than imported because this page is one static file in its own bucket
 * with no build step, and wiring a bundler to share eleven custom properties would cost more
 * than keeping them in step. If they drift, the app is right and this is wrong.
 */

:root {
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #1f2328;
  --ink-soft: #3c4043;
  --muted: #6f6a62;
  --line: #e8e6e1;
  --line-strong: #e4e1da;
  --surface-warm: #fffdf9;
  --ok: #1a7f37;
  --warn: #b26a00;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  /* Two steps above the app's scale. A page read once, by someone deciding whether to care,
     can open larger than a screen read every evening by someone who already does. */
  --text-2xl: 34px;
  --text-3xl: 46px;

  --label-size: var(--text-xs);
  --label-tracking: 0.06em;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --s9: 112px;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-md: 8px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--text-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

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

/* ------------------------------------------------------------------ masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0;
}

/* The lockup is one drawing now — the spacing between the word and the mark, and the mark's seat
   on the baseline, are baked into the artwork. The type rules that used to be here went with the
   live text they styled. Matches the app's styles.css. */
.wordmark {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.masthead a.sign-in {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}

.masthead a.sign-in:hover { color: var(--ink); }

/* ------------------------------------------------------------------ sections */

section { padding: var(--s8) 0; }
section + section { border-top: 1px solid var(--line); }

h1 {
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s5);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s5);
  text-wrap: balance;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0 0 var(--s2);
}

p { margin: 0 0 var(--s4); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink-soft);
}

.label {
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 var(--s3);
}

.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }

/* ------------------------------------------------------------------ hero */

.hero { padding-top: var(--s7); }

.hero h1 { margin-bottom: var(--s4); }

/* Centred, and stacked. The button and the line beside it were competing for the same
   horizontal band, which made neither the obvious thing to do next; a centred column puts the
   one action on its own and the supporting line underneath, where it belongs. */
.cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
  text-align: center;
}

.cta {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 13px var(--s5);
  border-radius: var(--radius-md);
  min-height: 44px;
}

.cta:hover { background: #000; }

/* ------------------------------------------------------------------ the steps
 *
 * Numbered because the content genuinely is a sequence — each step only happens once the one
 * before it has. Anywhere else on this page a number would be decoration.
 */

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  margin: 0;
  padding: 0;
  counter-reset: step;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s4);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--muted);
  padding-top: 0.35rem;
}

/* ------------------------------------------------------------------ the email */

.email {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--s5);
}

.email-head {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line-strong);
  padding: var(--s3) var(--s4);
  font-size: var(--text-xs);
  color: var(--muted);
}

.email-body { padding: var(--s5); }

.email-body .studio {
  font-size: var(--text-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.email-body h4 {
  margin: 0 0 var(--s4);
  font-size: var(--text-lg);
}

.email-body p { font-size: var(--text-sm); margin-bottom: var(--s3); }

.email-note { margin-top: var(--s4); }

/* ------------------------------------------------------------------ the two halves
 *
 * Deliberately quieter than the email above it. That one is the product's output and should
 * look like a real message; this is a glimpse of a screen, and a second full-dress mockup would
 * compete with the thing worth looking at. */

.halves {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
}

.half {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--s4);
  background: var(--card);
}

.half.private {
  background: var(--bg);
}

.half .who {
  font-size: var(--text-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.half p {
  font-size: var(--text-sm);
  margin: 0;
}

@media (min-width: 640px) {
  .halves { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ footer */

footer {
  border-top: 1px solid var(--line);
  padding: var(--s6) 0 var(--s8);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------------ the phone */

@media (max-width: 520px) {
  :root {
    --text-3xl: 34px;
    --text-2xl: 26px;
  }

  .wrap { padding: 0 var(--s4); }
  section { padding: var(--s7) 0; }
  .steps li { grid-template-columns: 1.5rem 1fr; gap: var(--s3); }
}

/* ------------------------------------------------------------------ legal pages
 *
 * Privacy and terms. Set narrower than the marketing sections and with more air between
 * headings than between paragraphs, because these are read by someone looking for one specific
 * answer rather than skimmed top to bottom.
 */

.legal {
  padding: var(--s6) 0 var(--s8);
  max-width: 62ch;
}

.legal h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--s2);
}

.legal .effective {
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--s5);
}

.legal .lede {
  margin-bottom: var(--s6);
}

.legal h2 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin: var(--s7) 0 var(--s3);
}

.legal h3 {
  font-size: var(--text-base);
  margin: var(--s5) 0 var(--s2);
}

.legal p,
.legal li {
  color: var(--ink-soft);
}

.legal ul {
  margin: 0 0 var(--s4);
  padding-left: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.legal code {
  font-size: var(--text-sm);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  /* Scope names are long and must not push the page sideways on a phone. */
  overflow-wrap: anywhere;
}

/* The sub-processor table. Its own scroll container so a narrow screen scrolls the table
   rather than the whole page. */
.proc {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--s4);
  font-size: var(--text-sm);
}

.proc th,
.proc td {
  text-align: left;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.proc th {
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

.proc td {
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ footer links */

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}