/* CC thematic branding — Hermes (hermes) */
:root {
  --cc-accent: #d9480f;
  --cc-accent-dark: #c2410c;
  --cc-accent-rgb: 217, 72, 15;
}
html[data-cc-theme="hermes"] {
  scroll-behavior: smooth;
}
body {
  font-family: 'Barlow', sans-serif !important;
  position: relative;
}
body > * {
  position: relative;
  z-index: 1;
}
h1, h2, h3, .brand, .wordmark {
  font-family: 'Barlow', sans-serif !important;
}

.hero{position:relative;overflow:hidden}
.hero::after{
  content:'';position:absolute;right:-10%;top:20%;width:45%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cc-accent),transparent);
  opacity:.35;transform:rotate(-8deg);pointer-events:none;
}

header{
  border-top:3px solid var(--cc-accent) !important;
  background:rgba(255,255,255,.92) !important;
}
::selection {
  background: rgba(217, 72, 15, 0.18) !important;
}
input[type=email]:focus, input[type=text]:focus, textarea:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 3px rgba(217, 72, 15, 0.14) !important;
}
.kicker, .kick, .pre, .sec-label, .hero .tag, .hero .over, .cat-no span,
.status-line, .badge {
  color: var(--cc-accent) !important;
}
.hero {
  position: relative;
}
section.alt, .tier {
  background: color-mix(in srgb, var(--cc-accent) 3%, transparent) !important;
}
.cc-waitlist {
  background: #1a0f0a !important;
  border-color: rgba(217, 72, 15, 0.22) !important;
}
.cc-waitlist-label {
  color: rgba(217, 72, 15, 0.85) !important;
}
.cc-waitlist-title {
  color: #f3f4f6 !important;
}
.cc-waitlist-btn {
  background: var(--cc-accent) !important;
  border-color: color-mix(in srgb, var(--cc-accent) 70%, white) !important;
}
.cc-waitlist-btn:hover {
  background: var(--cc-accent-dark) !important;
}
.cc-waitlist-form input:focus {
  outline-color: var(--cc-accent) !important;
}
footer {
  border-top: 1px solid rgba(217, 72, 15, 0.12);
}
footer a:hover {
  color: var(--cc-accent) !important;
}
@media (max-width: 720px) {
  header .bar {
    flex-wrap: nowrap !important;
    gap: 8px 10px !important;
  }
  header .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  header .bar nav {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }
  header .bar > .btn,
  header .bar > a.btn,
  header .bar-actions .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 44px !important;
  }
  .hero::before, .hero::after {
    display: none;
  }
}