/* shared styles for inner pages (support, privacy) on top of landing.css */
.page-main { max-width: 780px; margin: 0 auto; padding: 120px clamp(16px, 4vw, 48px) 80px; }
.page-main section { padding: 0 0 clamp(40px, 6vh, 64px); border: none; }
.page-main h1 { margin-bottom: 6px; }
.page-updated { font-size: 13px; color: var(--muted); margin-top: 0; }

.mail { font-family: "JetBrains Mono", monospace; }
.mail a { color: var(--amber); }

.policy-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0; }
.policy-cards article { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px 20px; }
.policy-cards h3 { margin: 0 0 6px; font-size: 15px; }
.policy-cards p { margin: 0; font-size: 14px; color: var(--muted); }
.policy-copy p { color: var(--muted); font-size: 15px; max-width: 64ch; }
.policy-copy b { color: var(--ink); }

/* Feedback form. It posts to /api/feedback, a Cloudflare Pages Function that
   hands the message to Resend; the visitor's mail app is never opened. With
   JavaScript off the same form submits natively and the endpoint answers with
   a page of its own, so nothing here depends on the script running. */
.contact-form { display: grid; gap: 14px; max-width: 560px; margin: 20px 0 12px; }
.contact-form label { display: grid; gap: 6px; font-size: 14px; }
.contact-form label em { font-style: normal; color: var(--muted); }
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 12px 14px;
}
.contact-form input[type="email"]::placeholder,
.contact-form textarea::placeholder { color: var(--muted); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input[type="file"] { font-size: 14px; color: var(--muted); }
.contact-form input[type="file"]::file-selector-button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 8px 16px; margin-right: 12px; cursor: pointer;
}
.contact-form input[type="email"]:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.contact-form input[type="file"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* The honeypot: off-screen, unreachable by keyboard, invisible to a reader.
   Anything typed into it came from something that does not read pages. */
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-send {
  justify-self: start; display: inline-block; text-decoration: none;
  font: inherit; font-weight: 600; font-size: 15px; color: #0b0b0b;
  background: var(--amber); border: 0; border-radius: 999px;
  padding: 12px 22px; cursor: pointer;
}
.contact-send[disabled] { opacity: 0.6; cursor: progress; }
.contact-status { margin: 0; font-size: 14px; color: var(--muted); min-height: 1.2em; }
.contact-status[data-state="ok"] { color: var(--amber); }
.contact-status[data-state="error"] { color: #FF8B7A; }

.contact-note { font-size: 13.5px; color: var(--muted); max-width: 560px; }
.contact-note a { color: var(--amber); }