@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("/assets/SortsMillGoudy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("/assets/SortsMillGoudy-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --text: #0a0a0a;
  --muted: #2c2c2c;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.24) 54%, rgba(255, 255, 255, 0.18) 100%);
  --glass-2: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.22) 56%, rgba(255, 255, 255, 0.14) 100%);
  --border: rgba(255, 255, 255, 0.52);
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  --pad-x: 38px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: "Sorts Mill Goudy", serif;
  color: var(--text);
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.93) 28%,
      rgba(255, 255, 255, 0.78) 60%,
      rgba(255, 255, 255, 0.58) 100%
    ),
    url("/assets/bg.png") center / cover no-repeat fixed;
}

a { color: inherit; }

header {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img { height: 34px; width: auto; display: block; }
.brand span { font-size: 18px; opacity: 0.9; }

.nav-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill, .btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: transform .08s ease, background .18s ease;
}

.pill {
  padding: 10px 13px;
  font-size: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.36) 100%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  min-width: 180px;
  font-size: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.34) 100%);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
}

.btn.primary {
  color: rgba(255, 255, 255, 0.97);
  background: rgba(17, 17, 17, 0.96);
  border-color: rgba(17, 17, 17, 0.96);
}

.pill:hover, .btn:hover { transform: translateY(-1px); }

main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 40px var(--pad-x) 72px;
}

.hero, .card {
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 34px 32px;
  border-radius: 0;
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
}

.hero { text-align: center; margin-bottom: 22px; }
.card { margin-bottom: 18px; }

h1 { margin: 0 0 12px; font-size: 58px; line-height: 1.02; }
h2 { margin: 0 0 10px; font-size: 38px; line-height: 1.08; }
h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.15; }

.lead {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 22px;
  line-height: 1.45;
  color: var(--muted);
}

.body-copy {
  margin: 0;
  font-size: 20px;
  line-height: 1.48;
  color: var(--muted);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tile {
  border: 1px solid rgba(255, 255, 255, 0.44);
  background: var(--glass-2);
  padding: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11), 0 6px 20px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.tile p { margin: 0; font-size: 19px; line-height: 1.44; color: var(--muted); }

.link-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.link-list li { margin: 8px 0; }
.link-list a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.breadcrumb {
  margin: 0 0 14px;
  font-size: 16px;
  color: #333;
}

.breadcrumb a { text-decoration: underline; text-underline-offset: 2px; }

.faq-item {
  border-top: 1px solid rgba(0,0,0,0.14);
  padding-top: 14px;
  margin-top: 14px;
}

footer {
  text-align: center;
  font-size: 14px;
  opacity: 0.68;
  padding: 26px 10px 30px;
}

@media (max-width: 980px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --pad-x: 18px; }
  .brand span { display: none; }
  main { padding-top: 28px; }
  .hero, .card { padding: 24px 18px; }
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  .lead, .body-copy, .tile p { font-size: 18px; }
  .btn { min-width: 100%; }
}