/* CC thematic branding — TWF (twf) */
:root {
  --cc-accent: #e11d48;
  --cc-accent-dark: #be123c;
  --cc-accent-rgb: 225, 29, 72;
}
html[data-cc-theme="twf"] {
  scroll-behavior: smooth;
}
body {
  font-family: 'Outfit', sans-serif !important;
  position: relative;
}
body > * {
  position: relative;
  z-index: 1;
}
h1, h2, h3, .brand, .wordmark {
  font-family: 'Outfit', sans-serif !important;
}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,rgba(var(--cc-accent-rgb),.06),transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--cc-accent-rgb),.08), transparent 40%);
}

header{
  background:color-mix(in srgb, var(--cc-accent) 4%, rgba(255,255,255,.88)) !important;
  border-bottom-color:rgba(var(--cc-accent-rgb),.18) !important;
  backdrop-filter:blur(14px) saturate(1.3) !important;
}
::selection {
  background: rgba(225, 29, 72, 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(225, 29, 72, 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: #140a10 !important;
  border-color: rgba(225, 29, 72, 0.22) !important;
}
.cc-waitlist-label {
  color: rgba(225, 29, 72, 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(225, 29, 72, 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;
  }
}