/* Buttons — mono, uppercase, tracked out like the site's schematic labels
   and badges, instead of a generic body-font button, so the technical
   identity carries through into every interactive element too. */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: #6ba6d6; text-decoration: none; }
.btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-accent); text-decoration: none; }
.btn[disabled], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Schematic meta-badge */
.badge-schematic {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 12px;
  background: var(--color-bg);
}
.badge-schematic--explorator { color: var(--color-accent-explorator); }
.badge-schematic--expert { color: var(--color-accent-expert); }
.badge-schematic--plain { border: none; background: none; padding: 0; }

/* The product page's specimen name — e.g. "EXPLORATOR FORMICIDAE" — doubles
   as the link back to that specimen's chat on Home, replacing the old
   breadcrumb. Sized up from the standard 10px eyebrow badge since it now
   carries real commercial weight (a Home->product cross-link) rather than
   being a small decorative tag. */
.badge-schematic--specimen-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-decoration: none;
  cursor: pointer;
}
.badge-schematic--specimen-link:hover { text-decoration: underline; }

/* Specimen dossier card */
.specimen-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.specimen-card__image { width: 96px; filter: drop-shadow(0 0 12px rgba(79, 144, 201, 0.35)); }
.specimen-card__label { margin-bottom: var(--space-1); }
.specimen-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; }

/* Specimen dossier — a lab/museum-style data sheet under each product's
   name, framing it as a species Q-Fábrica "discovered." Every field pairs
   a real trait of the animal with the matching technical fact about the
   product, so it reads as characterization, not filler. */
/* Semi-transparent on purpose — it sits over the species-bg-gif on the
   product hero, and a fully opaque surface hid that motion completely.
   backdrop-filter keeps the text legible against whatever's moving
   behind it instead of just lowering contrast across the board. */
.specimen-dossier {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(15, 20, 29, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  max-width: 760px;
}
.specimen-dossier__head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-label);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.specimen-dossier__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-2) var(--space-3);
}
.specimen-dossier__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.specimen-dossier__value { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.4; margin: 0; }
.specimen-dossier--explorator .specimen-dossier__label { color: var(--color-accent-explorator); }
.specimen-dossier--expert .specimen-dossier__label { color: var(--color-accent-expert); }

/* Testimonial card */
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.testimonial-card__quote { font-style: italic; color: var(--color-text); margin-bottom: var(--space-2); }
.testimonial-card__author { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-label); }

/* Windows device frame (for Q-Explorator screenshots/videos) */
.device-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #f4f4f4;
}
.device-frame__titlebar {
  background: #e2e2e2;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #cfcfcf;
}
.device-frame__dot { width: 10px; height: 10px; border-radius: 50%; background: #c7c7c7; }
.device-frame__dot--close { background: #e0605a; }
.device-frame__title { font-family: var(--font-body); font-size: 12px; color: #555; margin-left: 8px; }
.device-frame__body { width: 100%; display: block; }
.device-frame__body img, .device-frame__body video { width: 100%; display: block; }
/* The frame's own chrome mimics a light Windows title bar on purpose, but
   that same light background was bleeding through behind/around playing
   video (letterboxing, the moment before the first frame paints) — clashing
   hard with the site's dark theme. Videos get an explicit black backing. */
.device-frame__body video { background: #000; object-fit: contain; }
.device-frame__placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; color: #888; font-family: var(--font-body); font-size: 13px;
  background: repeating-linear-gradient(45deg, #ececec, #ececec 10px, #f4f4f4 10px, #f4f4f4 20px);
}

/* Pricing card */
.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  flex: 1;
}
.pricing-card__price { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin: var(--space-2) 0; }
.pricing-card--coming-soon .pricing-card__price { color: var(--color-text-label); font-size: 20px; text-transform: uppercase; }
.pricing-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: 13px; }
.pricing-card li { padding: 4px 0; border-bottom: 1px solid var(--color-border); }

/* Term-based pricing grid (Q-Explorator: Free card + one Premium card
   holding all 5 subscription lengths in a table) — a wider row than the
   fixed 3-up .grid-3 used for Q-Expert's simpler Free/Pro/Team. */
.pricing-grid-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.pricing-grid-terms .pricing-card { display: flex; flex-direction: column; }
.pricing-grid-terms .pricing-card > .btn { margin-top: auto; }
.pricing-card__term { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-label); }
.pricing-card__note { font-size: 12.5px; color: var(--color-text-secondary); margin: 0 0 var(--space-2); }
.pricing-card--best-value { border-color: var(--color-accent-explorator); }

/* Small inline tag marking a feature as Premium-only — used on both the
   feature accordion and the guide, so "restricted vs enabled" reads
   consistently wherever a feature is mentioned. */
.premium-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0b0e14;
  background: var(--color-accent-explorator);
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Free vs Premium feature comparison table */
.compare-table-wrap { overflow-x: auto; margin-top: var(--space-3); }
table.compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.compare-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-label);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px;
}
table.compare-table th:not(:first-child) { text-align: center; color: var(--color-accent-explorator); }
table.compare-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
table.compare-table td:not(:first-child) { text-align: center; }
table.compare-table tr:last-child td { border-bottom: none; }
.compare-yes { color: var(--color-accent-explorator); }
.compare-no { color: var(--color-text-label); }

/* Specimen Scan — signature reveal-on-scroll system */
.scan-reveal {
  position: relative;
  opacity: 0;
}
.scan-reveal.is-visible { opacity: 1; }
.scan-reveal.is-scanning {
  animation: specimen-scan-fade 0.4s ease forwards;
}
.scan-reveal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0;
  transform: translateY(0);
}
.scan-reveal.is-scanning::after {
  opacity: 1;
  animation: specimen-scan-line 0.4s linear forwards;
}
.scan-reveal__hud {
  position: absolute;
  top: 6px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent);
  opacity: 0;
  pointer-events: none;
}
.scan-reveal.is-scanning .scan-reveal__hud {
  animation: hud-flash 0.6s ease forwards;
}
@keyframes specimen-scan-line {
  from { transform: translateY(0); }
  to { transform: translateY(var(--scan-distance, 200px)); }
}
@keyframes specimen-scan-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hud-flash { 0% { opacity: 0; } 30% { opacity: .8; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .scan-reveal { transition: opacity .3s ease; }
  .scan-reveal.is-scanning::after,
  .scan-reveal.is-scanning .scan-reveal__hud { display: none; }
}

/* Button hover pulse — circuit-motif light sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-100%);
  pointer-events: none;
}
.btn-primary:hover::after { animation: btn-pulse 0.9s ease; }
@keyframes btn-pulse { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::after { animation: none; }
}

/* Pull-quote treatment for the first testimonial in a .testimonials-layout */
.testimonial-card--feature { padding: var(--space-4); }
.testimonial-card--feature::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--color-accent);
  opacity: .3;
  margin-bottom: -12px;
}
.testimonial-card--feature .testimonial-card__quote {
  font-size: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  text-transform: none;
}

/* Stat callout badge */
.stat-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-top: var(--space-2);
}
.stat-badge__value { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--color-accent-explorator); }
.stat-badge__label { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-label); text-transform: uppercase; letter-spacing: 1px; max-width: 160px; }

/* Feature card icon */
.feature-card__icon { display: block; margin-bottom: var(--space-1); color: var(--color-accent-explorator); }

/* Feature accordion (feature + embedded video per card) */
.accordion { display: flex; flex-direction: column; gap: 10px; }
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: none;
  border: none;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.accordion-header:hover { background: rgba(255, 255, 255, 0.03); }
.accordion-header__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accordion-header__title { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: -0.2px; }
.accordion-header__body { font-family: var(--font-body); font-size: 13px; color: var(--color-text-secondary); }
.accordion-chevron { flex-shrink: 0; color: var(--color-text-secondary); transition: transform 0.25s ease; }
.accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-item.is-open .accordion-panel { max-height: 640px; }
.accordion-panel__inner { padding: 0 18px 18px; }
.accordion-panel .device-frame { margin: 0; }
.accordion-panel .device-frame__body video { max-height: 480px; }