/* Shared by privacy.html, terms.html and contact.html. Standalone rather than
   auth.css: that sheet flex-centres a short card in the viewport, which a long
   document cannot use. Palette, type and brand mark match it. */

@import url("./tokens.css");

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-body);
  background-color: var(--color-page);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(197, 231, 255, 0.28), transparent 62%);
  background-repeat: no-repeat;
  background-size: 100% 620px;
}

/* Matches the app's --color-selection (the accent, mixed low so it reads as a neutral grey band).
   No color override: forcing dark text here read fine on light sections but
   put dark text on the tint over dark buttons too, which is unreadable.
   Leaving color unset keeps each element's own already-contrast-correct text
   color under the highlight. */
::selection { background-color: color-mix(in srgb, var(--color-accent) 28%, transparent); }
::-moz-selection { background-color: color-mix(in srgb, var(--color-accent) 28%, transparent); }

/* The same grain the marketing pages carry (site.css). Fixed and at z-index -1:
   body's own background propagates to the canvas, so this paints over that and
   under every element on the page. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23grain)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; cursor: pointer; }
.link { color: var(--accent-deep); font-weight: 500; }
.link:hover { text-decoration: underline; }

.wrap { max-width: 720px; margin: 0 auto; padding: 40px 24px 96px; }

.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.025em; color: var(--color-ink);
  margin-bottom: 56px;
}

h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--color-ink); margin: 0 0 12px;
}
.updated { font-size: 13.5px; color: var(--color-faint); margin: 0 0 48px; }

h2 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35;
  color: var(--color-ink); margin: 56px 0 16px; scroll-margin-top: 24px;
}
h3 {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--color-ink); margin: 36px 0 12px;
}

p { margin: 0 0 18px; }
strong { color: var(--color-ink); font-weight: 600; }
ul { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

.rule { height: 1px; background-color: var(--color-hairline); border: 0; margin: 56px 0; }

.lede { font-size: 15px; }
.short { color: var(--color-muted); }

ol.toc { margin: 0; padding-left: 22px; }
ol.toc li { margin-bottom: 6px; }


.foot {
  margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--color-hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 12px; color: var(--color-dim);
}
.foot a { position: relative; display: inline-block; color: var(--color-faint); transition: color 200ms ease; }
.foot a:hover { color: var(--color-hover-ink); }
/* Matches the marketing pages' .navlink: two origins, so the bar wipes in from
   the left and leaves to the right instead of retracting the way it came. */
.foot a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background-color: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.foot a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .foot a, .foot a::after { transition: none; }
}

@media (max-width: 560px) {
  .wrap { padding: 32px 20px 72px; }
  h1 { font-size: 31px; }
  .brand { margin-bottom: 40px; }
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* contact.html only. Field and button shapes mirror auth.css so the form reads
   as the same product as /login. */

.form { display: flex; flex-direction: column; gap: 18px; margin: 0 0 8px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 13.5px; font-weight: 600; color: var(--color-ink); }

.field input,
.field select,
.field textarea {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 15px; line-height: 1.55; color: var(--color-ink);
  background-color: var(--color-white); border: var(--border-width-standard) solid var(--color-line); border-radius: var(--radius-control);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { resize: vertical; min-height: 150px; }
.field select { appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C887F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field ::placeholder { color: var(--color-dim); }
.field :focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Gated on data-fresh: a form.reset() after a successful send empties fields
   the visitor has already touched, and browsers differ on whether that clears
   the user-interacted flag -- ungated, a sent message repaints every field red. */
.form:not([data-fresh]) .field :user-invalid { border-color: var(--color-danger); }

.cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background-color: var(--color-navy); color: var(--color-white); border: var(--border-width-standard) solid var(--color-navy); border-radius: 9999px;
  font-family: inherit; font-weight: 500; font-size: 15px; padding: 13px 30px; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.cta:hover { background-color: var(--color-navy-lift); border-color: var(--color-navy-lift); }

.status { font-size: 14px; line-height: 1.6; margin: 0; }
.status[data-state="ok"] { color: var(--accent-deep); font-weight: 500; }
.status[data-state="error"] { color: var(--color-danger); }

.card {
  background-color: var(--color-white); border: var(--border-width-standard) solid var(--color-hairline); border-radius: var(--radius-feature);
  padding: 24px 26px; margin: 0 0 40px;
}
.card p:last-child { margin-bottom: 0; }
.card .addr {
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--accent-deep);
}

@media (max-width: 560px) {
  .cta { align-self: stretch; }
}