/* Light theme is the base; dark applies when the system prefers it (unless the
   visitor chose light) or when the visitor chose dark. See js/theme.js. */
:root {
  color-scheme: light;
  --bg: #f4f4f4;
  --surface: #ffffff;
  --surface-muted: #efefef;
  --border: #e2e2e2;
  --fg: #181818;
  --fg-muted: #555555;
  --accent: #262626;
  --on-accent: #ffffff;
  --accent-soft: #ececec;
  --flag-opacity: 0.14;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 16px rgb(0 0 0 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0f0f;
    --surface: #181818;
    --surface-muted: #202020;
    --border: #2f2f2f;
    --fg: #ededed;
    --fg-muted: #a3a3a3;
    --accent: #e5e5e5;
    --on-accent: #0f0f0f;
    --accent-soft: #2a2a2a;
    --flag-opacity: 0.1;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0f;
  --surface: #181818;
  --surface-muted: #202020;
  --border: #2f2f2f;
  --fg: #ededed;
  --fg-muted: #a3a3a3;
  --accent: #e5e5e5;
  --on-accent: #0f0f0f;
  --accent-soft: #2a2a2a;
  --flag-opacity: 0.1;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
}

a { color: var(--accent); }

.container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--fg);
  text-decoration: none;
}

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
}

.brand-shield { fill: var(--accent); }

.brand-glyph {
  fill: var(--on-accent);
  stroke: var(--on-accent);
}

/* One button: a moon in light mode, a sun in dark mode (see js/theme.js). */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--accent-soft);
  color: var(--fg);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle .icon-sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.theme-toggle svg,
.icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cards */

/* main.container, not main: .container's padding shorthand would override it.
   Top padding matches the card grid gap. */
main.container {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
}

/* Faded waving flag behind the hero text, animated unless the visitor asks
   for reduced motion. The artwork fades out toward the left so the copy stays
   readable. Source: tools/brand/flag.py. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/images/flag-animated.svg") right -2rem center / auto 118% no-repeat;
  opacity: var(--flag-opacity);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { background-image: url("/images/flag.svg"); }
}

/* Homepage hero: copy on the left, call-to-action buttons on the right;
   the buttons drop below the copy on narrow screens. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem 3rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 13rem;
}

@media (max-width: 48rem) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
    justify-self: start;
  }
}

/* Buttons. One light and one dark look, the same in both site themes, styled
   as frosted glass: a translucent fill over a blurred, saturated backdrop, a
   bright inner top edge and a soft shadow. The text stays opaque. */

.button {
  --button-light-bg: rgb(255 255 255 / 0.5);
  --button-light-fg: #181818;
  --button-light-border: rgb(0 0 0 / 0.08);
  --button-light-shine: rgb(255 255 255 / 0.85);
  --button-dark-bg: rgb(24 24 24 / 0.6);
  --button-dark-fg: #ffffff;
  --button-dark-border: rgb(255 255 255 / 0.14);
  --button-dark-shine: rgb(255 255 255 / 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
}

.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hero: the hovered button is light and the other is dark. At rest "Start
   your PAC" (primary) is the light one, so hovering "See the Demo" moves the
   light look onto it and hovering "Start your PAC" keeps it there. The change
   is instant. */
.button-primary,
.button-secondary:hover {
  background: var(--button-light-bg);
  border-color: var(--button-light-border);
  color: var(--button-light-fg);
  box-shadow: inset 0 1px 0 var(--button-light-shine), 0 4px 16px rgb(0 0 0 / 0.08);
}

.button-secondary,
.hero-actions:has(.button-secondary:hover) .button-primary {
  background: var(--button-dark-bg);
  border-color: var(--button-dark-border);
  color: var(--button-dark-fg);
  box-shadow: inset 0 1px 0 var(--button-dark-shine), 0 4px 16px rgb(0 0 0 / 0.2);
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  margin: 0 0 1rem;
  max-width: 22ch;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede {
  margin: 0;
  max-width: 60ch;
  font-size: 1.125rem;
  color: var(--fg-muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.feature h2 {
  margin: 1rem 0 0.5rem;
  font-size: 1.125rem;
}

.feature p {
  margin: 0;
  color: var(--fg-muted);
}

.icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--accent-soft);
  color: var(--accent);
}

.icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* Legal pages (terms, privacy): an intro card, then one card per section, in
   a narrower centered column so lines stay short. */

main.legal-page {
  display: grid;
  gap: 1.5rem;
  max-width: 50rem;
}

.legal-intro { padding: clamp(1.5rem, 5vw, 2.5rem); }

.legal-intro h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
}

.legal-meta {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.legal-intro p:last-child { margin-bottom: 0; }

.legal-section h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

/* Section number, styled like the capability card icons. */
.legal-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.875rem;
}

.legal-page p,
.legal-page li { color: var(--fg-muted); }

.legal-page p { margin: 0 0 0.75rem; }

.legal-page ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

.legal-page li + li { margin-top: 0.375rem; }

.legal-section > :last-child { margin-bottom: 0; }

.legal-page strong { color: var(--fg); }

.legal-page a { color: var(--fg); }

/* Footer */

.site-footer {
  padding: 1.5rem 0 2.5rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* Copyright on the left, nonpartisan note in the center, ownership notice on
   the right; stacks, centered, when narrow. */
.site-footer .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.site-footer p { margin: 0; }
/* The side notes stay on one line; the center note wraps if space runs short. */
.site-footer p:nth-child(1),
.site-footer p:nth-child(3) { white-space: nowrap; }
.site-footer p:nth-child(2) { text-align: center; text-wrap: balance; }
.site-footer p:nth-child(3) { text-align: right; }

@media (max-width: 60rem) {
  .site-footer .container { grid-template-columns: minmax(0, 1fr); }
  .site-footer p,
  .site-footer p:nth-child(3) {
    text-align: center;
    white-space: normal;
  }
}

.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--fg); }