:root {
  color-scheme: light dark;

  --bg: #faf8f4;
  --bg2: #f1ece3;
  --ink: #14110c;
  --muted: rgba(20,17,12,.62);
  --card: rgba(255,252,247,.72);
  --card-border: rgba(120, 100, 70, .18);
  --shadow:
    0 2px 4px rgba(60, 45, 20, 0.03),
    0 12px 24px rgba(60, 45, 20, 0.06),
    0 35px 80px rgba(60, 45, 20, 0.12);

  --g1: #c6a75e;
  --g2: #e6d3a3;
  --g3: #9f8446;
  --g4: #f3ead2;

  --brand-grad: linear-gradient(115deg, var(--g4) 0%, var(--g2) 30%, var(--g1) 65%, var(--g3) 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0a08;
    --bg2: #15130f;
    --ink: #f4efe6;
    --muted: rgba(244,239,230,.66);
    --card: rgba(28, 24, 18, .55);
    --card-border: rgba(198, 167, 94, .25);
    --shadow:
      0 2px 4px rgba(0, 0, 0, 0.2),
      0 12px 24px rgba(0, 0, 0, 0.3),
      0 40px 90px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 15% 12%, color-mix(in oklab, var(--g2) 45%, transparent) 0%, transparent 60%),
    radial-gradient(1000px 700px at 85% 18%, color-mix(in oklab, var(--g1) 40%, transparent) 0%, transparent 62%),
    radial-gradient(900px 600px at 55% 95%, color-mix(in oklab, var(--g3) 35%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% 40%, rgba(0,0,0,.00) 0%, rgba(0,0,0,.14) 70%, rgba(0,0,0,.28) 100%);
  opacity: .35;
  mix-blend-mode: multiply;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .12;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 44px) 26px;
}

.hero {
  display: grid;
  place-items: center;
  text-align: center;
}

.plate {
  width: min(860px, 100%);
  padding: clamp(22px, 3.5vw, 44px);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent) 0%, color-mix(in oklab, var(--card) 70%, transparent) 100%);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}

.plate::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(700px 320px at 15% 18%, color-mix(in oklab, var(--g2) 50%, transparent) 0%, transparent 60%),
    radial-gradient(700px 320px at 88% 24%, color-mix(in oklab, var(--g1) 45%, transparent) 0%, transparent 60%),
    radial-gradient(700px 320px at 55% 110%, color-mix(in oklab, var(--g3) 40%, transparent) 0%, transparent 62%);
  opacity: .28;
  filter: saturate(1.05);
  pointer-events: none;
}

.plate > * { position: relative; }

.kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 65%, transparent);
  border: 1px solid color-mix(in oklab, var(--card-border) 75%, transparent);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  margin-bottom: 18px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-grad);
  filter: saturate(1.15);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--g2) 16%, transparent);
}

.brand {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: clamp(44px, 6.2vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0;
}

.brand .grad {
  display: inline-block;
  background: var(--brand-grad);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 14s ease-in-out infinite;
  filter: saturate(1.1) contrast(1.04);
}

.tagline {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--muted);
  font-weight: 400;
}

.tagline strong {
  font-weight: 600;
  color: color-mix(in oklab, var(--ink) 82%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all .25s ease;
  line-height: 1;
  margin-top: 24px;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 15%, transparent);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--ink) 25%, transparent);
}

footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: color-mix(in oklab, var(--muted) 88%, transparent);
}

footer a {
  color: color-mix(in oklab, var(--ink) 88%, transparent);
  text-decoration: none;
  position: relative;
  padding: 2px 0;
}

footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--brand-grad);
  opacity: .7;
  transform: scaleX(.75);
  transform-origin: center;
  transition: transform .25s ease, opacity .25s ease;
}

footer a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.sep {
  opacity: .55;
}

@keyframes gradShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand .grad { animation: none; }
}

@media (max-width: 520px) {
  .kicker { font-size: 12px; }
  .plate { border-radius: 22px; }
}

.policy-page .hero {
  place-items: start center;
}

.policy-page {
  background-attachment: fixed, fixed, fixed, fixed;
}

.policy-page .policy-plate {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  text-align: left;
  background: color-mix(in oklab, var(--card) 96%, var(--bg));
  box-shadow: 0 34px 90px color-mix(in oklab, var(--shadow) 84%, transparent);
}

.policy-page .policy-plate::before {
  opacity: .15;
}

.policy-page .policy-plate .kicker {
  justify-self: start;
  margin-bottom: 18px;
}

.policy-page .brand {
  grid-column: 1 / -1;
  font-size: clamp(40px, 5.4vw, 68px);
}

.policy-page .tagline {
  grid-column: 1 / -1;
  margin: 12px 0 28px;
  max-width: none;
}

.policy-text {
  color: color-mix(in oklab, var(--ink) 96%, transparent);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.72;
  max-width: 72ch;
}

.policy-text h2 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 36px 0 12px;
  color: color-mix(in oklab, var(--ink) 96%, transparent);
}

.policy-text p {
  margin: 0 0 14px;
}

.policy-text ul {
  margin: 0 0 16px;
  padding-left: 1.25rem;
}

.policy-text li {
  margin-bottom: 8px;
}

.policy-text a {
  color: color-mix(in oklab, var(--ink) 96%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .policy-page .hero {
    place-items: center;
  }

  .policy-text {
    max-width: none;
  }
}

.policy-page .policy-back {
  display: inline-flex;
  justify-self: end;
  align-self: start;
  align-items: center;
  gap: 8px;
  margin: 2px 0 18px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--card-border) 85%, transparent);
  background: color-mix(in oklab, var(--card) 50%, transparent);
  color: color-mix(in oklab, var(--ink) 90%, transparent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.policy-page .policy-text {
  grid-column: 1 / -1;
}

.policy-page .policy-back:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--g1) 45%, var(--card-border));
  background: color-mix(in oklab, var(--card) 88%, transparent);
}

.policy-page .policy-back:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--g2) 75%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .policy-page .policy-back {
    transition: none;
  }
}