/* Kobotrail Brand Kit v2 tokens (provisional colours), applied over the marketing styles. */
:root {
  --forest: #092c20; --forest-2: #003b28; --ivory: #faf9f5; --ink: #242a26; --sage: #dce5d9; --gold: #e5a400; --gold-2: #f3bc2e;
  --serif: "DM Serif Display", Georgia, serif; --sans: Geist, Inter, sans-serif;
}
h2, .band h2 { line-height: 1.1; letter-spacing: 0; }
.hero h1 { letter-spacing: -.005em; line-height: 1.04; }
.hero { background: radial-gradient(90% 70% at 72% 30%, #0b4a35 0%, transparent 62%), var(--forest); }
.band { background: radial-gradient(70% 140% at 10% 50%, #0b4a35, transparent 70%), var(--forest); }
.sp.tint { background: #e4ebe2; }
/* The approved logo has a light background, so the header must match it exactly. */
.nav, .nav.solid { background: #fefbf8; color: #242a26; backdrop-filter: none; box-shadow: 0 1px 0 var(--sage); }
.brand { display: block; line-height: 0; }
.brand img { display: block; height: 52px; width: auto; }
.pill { background: rgb(0 59 40 / .08); box-shadow: inset 0 0 0 1px rgb(0 59 40 / .08); }
.coin-glare { -webkit-mask-image: url(/coin-v3.webp); mask-image: url(/coin-v3.webp); }
/* Closing banner: the spiral from the approved logo replaces the beaded one. */
.spiral svg { display: none; }
.spiral { width: 120px; height: 120px; background: url(/kt-spiral.webp) center / contain no-repeat; animation: spin 36s linear infinite; }
@media (max-width: 900px) { .spiral { width: 88px; height: 88px; } }
@media (max-width: 400px) {
  .nav-row { padding-left: 12px; padding-right: 16px; }
  .brand img { height: 40px; }
  .nav-right { gap: 12px; }
  .nav-right .btn { padding: 9px 12px; font-size: 13px; }
}