/* Stylesheet for the public pages written by frontend/marketing/build/render.mjs.
 *
 * The colour tokens below are copied from frontend/src/styles/index.css (the :root and .dark blocks,
 * which are the single source of truth for the application's colour), so the public pages and the
 * application look like one product. They are copied, not imported, because these pages are plain
 * HTML and load no application code. When the application's tokens change, change them here too.
 *
 * No web font is requested: the pages use the system font stack, so nothing loads from another
 * origin and the first paint does not wait on one. The CSP allows only 'self' for scripts and
 * connections. Dark mode follows the visitor's system setting (the application toggles a .dark class,
 * which a static page has no way to read before it paints).
 */
:root {
  --radius: 0.625rem;
  --background: oklch(0.9842 0.0034 247.7997);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --success-bg: oklch(0.97 0.03 150);
  --success-border: oklch(0.88 0.08 150);
  --success-text: oklch(0.38 0.1 150);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --ring: oklch(0.556 0 0);
    --success-bg: oklch(0.27 0.05 150);
    --success-border: oklch(0.4 0.08 150);
    --success-text: oklch(0.85 0.1 150);
  }
}

*,
*::before,
*::after { box-sizing: border-box; border-color: var(--border); }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--card); padding: 0.5rem 1rem; z-index: 50; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

.wrap { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.narrow { max-width: 48rem; }
@media (min-width: 640px) { .wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }

.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter: blur(8px);
}
.header-row { min-height: 4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
/* THE LOGO KEEPS ITS SHAPE AT EVERY WIDTH. The global `img { max-width: 100% }` plus a flex item that may
   shrink squashed it to 30 by 36 at 390 wide (a 273 by 120 image). The link does not shrink, the image has
   an explicit ratio, and it is never limited by its container. Fix for the browser QA of #1972. */
.brand { display: flex; align-items: center; flex: none; min-height: 44px; }
.brand img { height: 2.25rem; width: auto; max-width: none; aspect-ratio: 273 / 120; object-fit: contain; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
/* Hit areas are at least 44px high (the QA found 38, 36 and 22 at 390 wide). Padding grows the target, the
   look stays close to what it was. */
.site-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 0.75rem; border-radius: 0.5rem; text-decoration: none;
  font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
}
.site-nav a:not(.btn):hover { color: var(--foreground); background: var(--muted); }
.site-nav a[aria-current="page"] { color: var(--foreground); background: var(--muted); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: 1px solid transparent;
  font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer;
  line-height: 1.25; min-height: 44px;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { border-color: var(--border); color: var(--foreground); background: transparent; }
.btn-outline:hover { background: var(--muted); }
.btn-small { padding: 0 1rem; margin-left: 0.25rem; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* home */
.hero { padding-top: 4rem; padding-bottom: 3rem; text-align: center; }
@media (min-width: 640px) { .hero { padding-top: 6rem; padding-bottom: 4rem; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}
.eyebrow-plain { background: none; border: 0; padding: 0; font-size: 0.875rem; }
.hero h1 { margin: 1.25rem auto 0; max-width: 48rem; font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.02em; }
@media (min-width: 640px) { .hero h1 { font-size: 3rem; } }
.lead { margin: 1.25rem auto 0; max-width: 42rem; font-size: 1.125rem; color: var(--muted-foreground); }
.cta-row { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
.cards-section { padding-bottom: 5rem; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { border: 1px solid var(--border); border-radius: 0.875rem; background: var(--card); padding: 1.25rem; }
.card h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.card p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }
.card-icon {
  width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.closing { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.closing .wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; text-align: center; }
.closing h2 { margin: 0; font-size: 1.5rem; }
.closing p { margin: 0.75rem 0 0; color: var(--muted-foreground); }
.closing .cta-row { margin-top: 1.5rem; }

/* articles and utility pages */
.article { padding-top: 3rem; padding-bottom: 4rem; }
.article h1 { margin: 0.5rem 0 0; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 640px) { .article h1 { font-size: 2.25rem; } }
.prose { margin-top: 1.5rem; color: var(--muted-foreground); }
.prose h2 { margin: 2rem 0 0.5rem; font-size: 1.25rem; color: var(--foreground); line-height: 1.3; }
.prose h3 { margin: 1.5rem 0 0.5rem; font-size: 1.0625rem; color: var(--foreground); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.25rem; }
.prose li { margin-bottom: 0.375rem; }
.prose a { color: var(--foreground); text-underline-offset: 2px; }
.crumbs { display: flex; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.crumbs { align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.actions { justify-content: flex-start; }
.updated { margin-top: 2rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.reviewer, .notice {
  margin-top: 2rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: 0.625rem;
  background: var(--card); font-size: 0.875rem;
}
.reviewer p, .notice p { margin: 0; }
.notice-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.notice-success p + p { margin-top: 0.25rem; }
.related { margin-top: 2.5rem; }
.related-title { margin: 0 0 0.5rem; font-size: 1rem; }
.related ul { margin: 0; padding-left: 1.25rem; }

/* contact form */
.contact-form { margin-top: 2rem; display: grid; gap: 1rem; position: relative; }
.contact-form .field label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 500; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem;
  background: var(--card); color: var(--card-foreground); font: inherit; font-size: 0.875rem; min-height: 44px;
}
.contact-form textarea { resize: vertical; }
.contact-form .btn { justify-self: start; padding: 0.625rem 1.25rem; }
.form-error {
  margin: 0; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem;
  color: var(--destructive); border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
}
/* Honeypot: off screen rather than display none, so a bot that skips hidden fields still fills it. */
.hp { position: absolute; left: -9999px; top: auto; width: 0; height: 0; overflow: hidden; }

/* footer */
.site-footer { border-top: 1px solid var(--border); background: var(--card); }
.footer-row {
  padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-direction: column; align-items: center;
  gap: 1rem; font-size: 0.875rem; color: var(--muted-foreground); text-align: center;
}
@media (min-width: 640px) { .footer-row { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-row p { margin: 0; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; }
.footer-brand img { height: 1.75rem; width: auto; }
.footer-brand span { font-weight: 600; color: var(--foreground); }
.footer-links { display: flex; gap: 0.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; text-decoration: none; }
.footer-links a:hover { color: var(--foreground); }