/* ── Demos page — header overrides ── */

/* Mobile: hero bg is white, so brand must be dark + header fixed */
@media (max-width: 1023px) {
  body.demos-body .site-header {
    position: fixed;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 18px 16px;
  }

  body.demos-body .site-header .header-group {
    position: static;
    transform: none;
    margin: 0;
  }

  body.demos-body .site-header .brand {
    color: var(--color-fg);
    text-decoration: none;
  }


}

/* Desktop: brand is a link now */
@media (min-width: 1024px) {
  .demos-body .brand {
    text-decoration: none;
  }
}

/* ── Page ── */

.dp-page {
  min-height: 100vh;
  background: white;
}

/* ── Hero ── */

.dp-hero {
  padding: clamp(100px, 16vh, 180px) clamp(24px, 5vw, 80px) clamp(60px, 8vw, 100px);
}

.dp-hero__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 4vw, 5rem);
  font-weight: 200;
  line-height: 0.95;
  background: linear-gradient(90deg, #0a0a0a 30%, #888 50%, #0a0a0a 70%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dp-shimmer 12s ease-in-out infinite;
}

@keyframes dp-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.dp-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3.5rem, 9vw, 11rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  text-transform: uppercase;
}

.dp-hero__sub {
  margin-top: clamp(20px, 3vw, 36px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 200;
  color: rgba(0, 0, 0, 0.45);
  max-width: 480px;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

/* ── Demo tabs ── */

.dp-tabs {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dp-tabs::-webkit-scrollbar { display: none; }

.dp-tabs__track {
  display: flex;
  padding: 0 clamp(24px, 5vw, 80px);
  min-width: max-content;
}

.dp-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  margin-right: 48px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.3);
  transition: color var(--transition), border-color var(--transition);
}

.dp-tab--active {
  border-bottom-color: #0a0a0a;
  color: #0a0a0a;
}

.dp-tab__num {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

.dp-tab__name {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dp-tab__badge {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

/* ── Demo panel ── */

.dp-demo {
  padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 80px);
}

.dp-demo__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 80px);
  max-width: 1200px;
}

@media (min-width: 1024px) {
  .dp-demo__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Context */

.dp-demo__meta {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.5rem, 0.62vw, 0.6rem);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.dp-demo__concern {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: -0.02em;
  line-height: 1.35;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  padding-left: 18px;
  margin-bottom: clamp(8px, 1vw, 12px);
}

.dp-demo__attribution {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.6rem, 0.75vw, 0.72rem);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.3);
  text-decoration: none;
  letter-spacing: 0.06em;
  padding-left: 20px;
  display: inline-block;
  margin-bottom: clamp(20px, 3vw, 36px);
  transition: color 0.2s ease;
}

.dp-demo__attribution:hover {
  color: rgba(0, 0, 0, 0.65);
}

.dp-demo__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5vw, 6rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: clamp(24px, 3.5vw, 48px);
}

.dp-demo__body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.875rem, 1.05vw, 0.975rem);
  font-weight: 200;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.7;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.dp-demo__rule {
  width: clamp(40px, 5.5vw, 64px);
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin: clamp(28px, 4vw, 52px) 0;
}

.dp-demo__how-label {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.5rem, 0.62vw, 0.6rem);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 20px;
}

.dp-demo__how-list {
  list-style: none;
  counter-reset: how;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

.dp-demo__how-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  counter-increment: how;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.83rem, 0.98vw, 0.92rem);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.dp-demo__how-list li::before {
  content: "0" counter(how);
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  color: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  padding-top: 4px;
}

/* Interactive */

.dp-demo__interactive {
  position: sticky;
  top: clamp(80px, 10vw, 120px);
}

.dp-demo__note {
  margin-top: 14px;
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  color: rgba(0, 0, 0, 0.25);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ── Companion app card ── */

.dp-app {
  background: #0a0a0a;
  padding: clamp(28px, 4vw, 44px);
}

.dp-app__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.dp-app__brand {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 0.85vw, 0.8rem);
  font-weight: 900;
  color: white;
  letter-spacing: 0.12em;
}

.dp-app__sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.62rem, 0.75vw, 0.7rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: -0.01em;
  margin-top: 3px;
}

.dp-app__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
  animation: dp-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes dp-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.dp-app__section {
  padding: 0;
}

.dp-app__label {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.48rem, 0.58vw, 0.56rem);
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}

.dp-app__hint {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.72rem, 0.88vw, 0.82rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin-bottom: clamp(16px, 2.5vw, 24px);
}

.dp-app__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: clamp(20px, 3vw, 32px) 0;
}

/* ── Sliders ── */

.dp-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dp-slider__name {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.46rem, 0.56vw, 0.54rem);
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dp-slider__val {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.7rem, 0.85vw, 0.82rem);
  color: white;
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}

.dp-slider__val--danger { color: #f87171; }

.dp-slider__input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 1.5px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    white var(--fill, 30%),
    rgba(255, 255, 255, 0.1) var(--fill, 30%)
  );
  border-radius: 0;
  padding: 0;
}

.dp-slider__input--battery.dp-slider__input--danger {
  background: linear-gradient(
    to right,
    #f87171 var(--fill, 30%),
    rgba(255, 255, 255, 0.1) var(--fill, 30%)
  );
}

.dp-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  cursor: grab;
  border: none;
  transition: transform 0.15s ease;
}

.dp-slider__input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.25);
}

.dp-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  cursor: grab;
  border: none;
}

.dp-slider__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.48rem;
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.06em;
}

/* ── Status indicator ── */

.dp-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.4s ease;
}

.dp-status--disabled {
  background: rgba(248, 113, 113, 0.07);
}

.dp-status__icon--charge,
.dp-status__icon--wire {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dp-status--charging  .dp-status__icon--charge { display: flex; color: white; }
.dp-status--charging  .dp-status__icon--wire   { display: none; }
.dp-status--disabled  .dp-status__icon--charge { display: none; }
.dp-status--disabled  .dp-status__icon--wire   { display: flex; color: #f87171; }

.dp-status__state {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.5rem, 0.62vw, 0.6rem);
  letter-spacing: 0.12em;
  margin-bottom: 5px;
  transition: color 0.35s ease;
}

.dp-status--charging .dp-status__state { color: white; }
.dp-status--disabled .dp-status__state { color: #f87171; }

.dp-status__detail {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.68rem, 0.82vw, 0.76rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: -0.01em;
}

/* ── Comments ── */

.dp-comments {
  background: #f6f6f4;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 80px) clamp(80px, 10vw, 140px);
}

.dp-comments__inner {
  max-width: 680px;
}

.dp-comments__eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.5rem, 0.62vw, 0.6rem);
  color: rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}

.dp-comments__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  font-weight: 200;
  color: #0a0a0a;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}

.dp-comments__sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 0.95vw, 0.88rem);
  font-weight: 200;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: -0.01em;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.dp-comments__empty {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 1vw, 0.92rem);
  font-weight: 200;
  color: rgba(0, 0, 0, 0.28);
  letter-spacing: -0.01em;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: clamp(36px, 5vw, 56px);
}

.dp-comment-item {
  padding: clamp(18px, 2.5vw, 26px) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.dp-comment-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.dp-comment-item__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.dp-comment-item__name {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.56rem, 0.68vw, 0.64rem);
  color: #0a0a0a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dp-comment-item__date {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.48rem, 0.58vw, 0.55rem);
  color: rgba(0, 0, 0, 0.28);
  letter-spacing: 0.06em;
}

.dp-comment-item__text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.88rem, 1.05vw, 0.96rem);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.65;
  letter-spacing: -0.01em;
}

/* Comment form */

.dp-comment-form {
  margin-top: clamp(36px, 5vw, 56px);
}

.dp-comment-form__fields {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 44px);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.dp-comment-form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-comment-form__label {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.48rem, 0.58vw, 0.56rem);
  color: rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.dp-comment-form__input,
.dp-comment-form__textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #0a0a0a;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  padding: 10px 0;
  outline: none;
  resize: none;
  width: 100%;
  -webkit-appearance: none;
  transition: border-color var(--transition);
}

.dp-comment-form__input:focus,
.dp-comment-form__textarea:focus {
  border-bottom-color: rgba(0, 0, 0, 0.45);
}

.dp-comment-form__footer {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.dp-comment-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  background: #0a0a0a;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 0.88rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  cursor: pointer;
  -webkit-appearance: none;
  transition: transform 0.15s ease;
}

.dp-comment-form__submit:hover .btn-arrow { transform: translateX(6px); }
.dp-comment-form__submit:active { transform: scale(0.97); }
.dp-comment-form__submit:disabled { opacity: 0.5; cursor: default; }

.dp-comment-form__status {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.5rem, 0.6vw, 0.58rem);
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.1em;
}