:root {
  --kegel-bg: #f4f6f8;
  --kegel-surface: #ffffff;
  --kegel-tone: #e65100;
  --kegel-tone-hover: #bf360c;
  --kegel-ink: #1f2937;
  --kegel-review-bg: #eceff1;
  --kegel-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  background-color: var(--kegel-bg);
  color: var(--kegel-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, .app-brand-caption, .headline-pro-label {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Preset B: Side thumbnails with highlight border */
.thumb-trigger-label {
  border-color: #cbd5e1;
  transition: all 0.2s ease-in-out;
}

.thumb-trigger-label:hover {
  border-color: var(--kegel-tone);
}

/* Pure CSS Slides Switcher */
.hidden-ctrl-input {
  display: none;
}

.screen-frame-pane {
  display: none;
}

#media-view-1:checked ~ .main-stage-holder .pane-1,
#media-view-2:checked ~ .main-stage-holder .pane-2,
#media-view-3:checked ~ .main-stage-holder .pane-3,
#media-view-4:checked ~ .main-stage-holder .pane-4 {
  display: block;
}

#media-view-1:checked ~ .side-thumb-stack label[for="media-view-1"],
#media-view-2:checked ~ .side-thumb-stack label[for="media-view-2"],
#media-view-3:checked ~ .side-thumb-stack label[for="media-view-3"],
#media-view-4:checked ~ .side-thumb-stack label[for="media-view-4"] {
  border-color: var(--kegel-tone);
  box-shadow: 0 0 0 2px var(--kegel-tone);
}

/* Preset B CTA Button: Rectangular with prominent deep shadow */
.cta-direct-link {
  box-shadow: 0 10px 25px -5px rgba(230, 81, 0, 0.4), 0 8px 10px -6px rgba(230, 81, 0, 0.3);
  text-decoration: none;
}

.cta-direct-link:hover {
  background-color: var(--kegel-tone-hover) !important;
  box-shadow: 0 14px 28px -4px rgba(230, 81, 0, 0.5), 0 10px 12px -5px rgba(230, 81, 0, 0.4);
  transform: translateY(-2px);
}

/* Preset B Review Styling */
.single-feedback-entry {
  transition: transform 0.2s ease;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
}

.single-feedback-entry:hover {
  transform: translateY(-1px);
}