/*
  Component stylesheet for reusable interface pieces.
  Use this file for buttons, cards, navigation, forms, and shared UI components.
  Do not store customer data, CRM data, emails, secrets, or private company records here.
*/

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  line-height: 1;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.brand span {
  white-space: nowrap;
}

.nav {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.nav a {
  text-decoration: none;
}

.button {
  --button-bg: transparent;
  --button-color: currentColor;
  --button-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--button-border);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-color);
  text-decoration: none;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button.solid {
  --button-bg: var(--orange-shine);
  --button-color: var(--white);
  --button-border: rgba(168, 77, 22, 0.24);
  box-shadow: var(--shadow-button), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.button.ghost,
.button.glass,
.button.outline {
  --button-color: var(--ink);
  --button-border: var(--line);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.button:hover {
  transform: translateY(-1px);
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.value-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.value-badges span,
.demo-label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(216, 114, 36, 0.28);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
}

.value-badges span::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
  line-height: 1.45;
}

.check-list li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--orange);
  clip-path: polygon(42% 72%, 18% 48%, 28% 38%, 42% 52%, 72% 20%, 82% 30%);
}

.price-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 12px;
  width: min(100%, 560px);
  margin-top: 28px;
}

.price-strip > div {
  min-height: 82px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--shine);
  box-shadow: 0 18px 44px rgba(48, 35, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.price-strip span,
.technical-highlight span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.price-strip strong,
.technical-highlight strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.price-strip p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.note-strip {
  margin: 16px 0 0;
  padding: 18px 20px;
  border: 1px solid rgba(216, 114, 36, 0.3);
  border-radius: 8px;
  background: rgba(255, 247, 237, 0.92);
  color: var(--ink);
  font-weight: 900;
}

details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

summary {
  min-height: 72px;
  padding: 24px 28px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

details p {
  margin: 0;
  padding: 0 28px 28px;
  color: var(--muted);
  line-height: 1.6;
}