/* Eva's Log · Support and Terms
   Shared by support.html and terms.html. Both are short on purpose
   (owner, 2026-10-03: no wall of words): Support's topics and the full
   terms fold, one row each, with the rows themselves in site.css. The header, footer, paper,
   notes, polaroids, section labels, lines, kicker and footnote all come
   from site.css; this file carries only what these two pages add. No
   box here takes an accent stripe on one edge: where a box needs an
   edge, it gets a hairline on all four sides. */

/* ---------- Hero ---------- */
.legal-hero { max-width: 720px; margin: 0 auto; padding: 72px 16px 28px; text-align: center; }
.legal-hero h1 {
  font: 400 clamp(38px, 8vw, 56px)/1.08 var(--font-serif-display);
  margin: 0 0 14px;
  animation: elReveal .8s .05s cubic-bezier(.22, 1, .36, 1) both;
}
.legal-hero p {
  font: var(--type-title3);
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
  /* Centered two-line lede: even lines rather than a long one and a stub. */
  text-wrap: balance;
  animation: elReveal .8s .15s cubic-bezier(.22, 1, .36, 1) both;
}
.legal-hero .effective {
  font: var(--type-editorial-caption);
  color: var(--text-tertiary);
  margin-top: 14px;
  animation: elReveal .8s .25s cubic-bezier(.22, 1, .36, 1) both;
}

/* ---------- Body copy shared by both pages ---------- */
.prose p {
  font: var(--type-subheadline);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 12px;
  max-width: 68ch;
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }
.prose b, .steps b, .lines b { font-weight: 600; color: var(--text-primary); }
.prose a, .lines a, .note a, .footnote a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- Support: contact ---------- */
.help-contact { max-width: 880px; margin: 0 auto; padding: 12px 16px 8px; }
.contact-sheet { padding: 32px 30px; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px;
  align-items: center;
}
.contact-address {
  display: inline-block;
  font: 400 clamp(26px, 5.5vw, 34px)/1.15 var(--font-serif-display);
  color: var(--primary);
  overflow-wrap: anywhere;
  margin: 2px 0 6px;
}
.contact-address:hover { color: var(--primary-dark); }
.contact-sheet .prose p { margin-top: 10px; }

/* The medical and emergency note: a filled card with a hairline on
   every side, never a stripe on one edge. */
.urgent {
  --card-shadow: var(--shadow-card);
  margin-top: 0;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--alert-accent) 40%, transparent);
  background: color-mix(in srgb, var(--alert-accent) 7%, var(--surface));
}
.urgent .title { font: var(--type-headline); margin: 0 0 8px; }
.urgent p { font: var(--type-subheadline); line-height: 1.55; color: var(--text-secondary); margin: 0 0 8px; }
.urgent p:last-child { margin-bottom: 0; }
.urgent a { text-decoration: underline; text-underline-offset: 2px; }

/* Numbered steps: a small numbered disc beside each one. */
.steps {
  --accent: var(--primary);
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: var(--type-subheadline);
  line-height: 1.55;
  color: var(--text-secondary);
}
.steps li { counter-increment: step; position: relative; padding-left: 42px; min-height: 28px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 13px/1 var(--font-sans);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Support: the folding topics ----------
   Two sheets of rows, How to and Quick answers, in the same 880 column as
   the contact card. A topic with a screenshot sets it beside the words from
   720 px; on a phone the picture follows them. */
.help-fold { max-width: 880px; margin: 0 auto; padding: 44px 16px 0; }
.help-fold .h2-serif { margin-bottom: 18px; text-wrap: balance; }
.help-fold .faq-a > * + * { margin-top: 12px; }
.help-fold .faq-a .steps { margin-top: 4px; }
.help-fold .faq-a .lines li { line-height: 1.5; }
.help-fold .faq-a p, .help-fold .faq-a .lines, .help-fold .faq-a .steps { max-width: 60ch; }
.fold-a-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.fold-a-grid > div > * + * { margin-top: 12px; }
@media (min-width: 720px) { .fold-a-grid { grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; } }

/* ---------- Support: closing ---------- */
.help-close { max-width: 720px; margin: 0 auto; padding: 56px 16px 96px; text-align: center; }
.help-close .polaroid { width: fit-content; margin: 0 auto 24px; }
.help-close .polaroid img { width: 120px; height: 120px; }
.help-close h2 { font: 400 clamp(30px, 6vw, 40px)/1.12 var(--font-serif-display); margin: 0 0 12px; }
.help-close p { font: var(--type-subheadline); line-height: 1.55; color: var(--text-secondary); margin: 0 auto; max-width: 56ch; }
/* Links set in running text are underlined, as in the prose above, so
   they don't rely on color alone. */
.help-close p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- Terms ---------- */
/* The full terms: the shared folded document (site.css), a little below
   the summary. Section 5's subheads sit inside its row. */
.terms-doc { margin-top: 36px; }
.terms-doc .num { color: var(--text-tertiary); margin-right: 6px; }
.terms-doc .faq-a h4 { font: var(--type-subheadline-emphasized); color: var(--text-primary); margin: 16px 0 6px; }
.terms-doc .faq-a h4 + p { margin-top: 0; }
/* The summary's text column: 33em (about 76 characters of 16px text)
   centered on its sheet; on a phone the margin falls back to 26px. */
.terms-body {
  --terms-margin: max(clamp(26px, 5vw, 46px), calc((100% - 33em) / 2));
  max-width: 800px;
  margin: 0 auto;
  padding: 8px 16px 96px;
}
.terms-summary { padding: 30px var(--terms-margin) 26px; }
.terms-summary .h2-serif { text-wrap: balance; }
.terms-summary .lines { gap: 10px; }
.terms-summary .lines li { line-height: 1.5; }
/* The house footnote gray is 2.6:1 on the paper by day and 3.5:1 at
   night, at 13px. This one says the terms below are what apply, so it
   takes Support's darker quiet ink (5.1:1 by day). */
.terms-summary .footnote { color: color-mix(in srgb, var(--text-tertiary) 75%, var(--text-secondary)); }

/* The effective date at the top: tertiary on the ground is 4.1:1; this
   is 4.7:1. (Support's hero has no date line, so this reaches Terms
   only.) The same date at the foot, .terms-end below, takes the same ink. */
.legal-hero .effective { color: color-mix(in srgb, var(--text-tertiary) 75%, var(--text-secondary)); }

.terms-end { text-align: center; margin-top: 40px; }
.terms-end p { font: var(--type-editorial-caption); color: color-mix(in srgb, var(--text-tertiary) 75%, var(--text-secondary)); margin: 0 0 6px; }