/* Typography */
.originlink-home {
  color: var(--bs-body-color);
  transition:
    background-color var(--ol-transition),
    color var(--ol-transition);
}

.originlink-home :is(.display-1, .display-2) {
  font-family: var(--ol-font-display);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .94;
}

.originlink-home .display-1 {
  max-width: 12ch;
  font-size: clamp(3.35rem, 6.7vw, 6.4rem);
}

.originlink-home .display-2 {
  font-size: clamp(2.65rem, 5vw, 4.6rem);
}

.originlink-home .lead {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.eyebrow {
  color: var(--bs-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Page composition */
.hero {
  min-height: min(54rem, calc(100vh - 5rem));
}

.proof-grid > * {
  min-height: 5.5rem;
}

.product-visual {
  min-height: 32rem;
  isolation: isolate;
}

.product-visual::before {
  position: absolute;
  z-index: -1;
  inset: 8% 2% 0 10%;
  content: "";
  background:
    radial-gradient(
      circle,
      rgba(var(--bs-primary-rgb), .22),
      transparent 66%
    );
}

.product-image {
  width: min(100%, 53rem);
  height: auto;
  filter: drop-shadow(0 2rem 2.5rem rgba(19, 27, 23, .2));
  transform: rotate(-1deg) scale(1.05);
}

[data-bs-theme="dark"] .product-image {
  filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, .38));
}

.material-label {
  --bs-card-bg:
    color-mix(
      in srgb,
      var(--bs-tertiary-bg),
      transparent 8%
    );

  z-index: 2;
  max-width: min(19rem, 70%);
  padding: .7rem .8rem;
  font-size: .78rem;
  line-height: 1.35;
  box-shadow: 0 .8rem 2rem rgba(19, 27, 23, .08);
}

.material-label-oak {
  inset: 5% 2% auto auto;
}

.material-label-spruce {
  inset: auto auto 6% 2%;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 1rem;
  padding-block: .85rem;
}

.timeline-item:not(:last-child)::after {
  position: absolute;
  top: 2.55rem;
  left: .96rem;
  width: var(--bs-border-width);
  height: calc(100% - 1.65rem);
  content: "";
  background: var(--bs-border-color);
}

.timeline-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--bs-primary);
  background: var(--bs-secondary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 50%;
}

#demo .card {
  --bs-card-border-radius: var(--bs-border-radius-lg);

  background:
    linear-gradient(
      120deg,
      rgba(var(--bs-primary-rgb), .14),
      transparent 55%
    ),
    var(--ol-success-card-bg);
}

/* Sections */
section.content {
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

section.primary,
section.secondary {
  color: var(--bs-body-color);
}

section.primary {
  background: var(--bs-tertiary-bg);
}

section.secondary {
  background: var(--bs-secondary-bg);
}

section.secondary .card {
  --bs-card-bg: var(--ol-secondary-card-bg);
}

section.success {
  --bs-heading-color: var(--bs-success-text-emphasis);

  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
}

section.danger {
  --bs-heading-color: var(--bs-danger-text-emphasis);

  color: var(--bs-danger-text-emphasis);
  background: var(--bs-danger-bg-subtle);
}

section.success .card {
  --bs-card-bg: var(--ol-success-card-bg);
  --bs-card-color: var(--bs-success-text-emphasis);
  --bs-card-border-color: var(--bs-success-border-subtle);
}

section.danger .card {
  --bs-card-bg: var(--ol-danger-card-bg);
  --bs-card-color: var(--bs-danger-text-emphasis);
  --bs-card-border-color: var(--bs-danger-border-subtle);
}

section.success .text-body-secondary {
  color: var(--ol-success-muted) !important;
}

section.danger .text-body-secondary {
  color: var(--ol-danger-muted) !important;
}

section.success .eyebrow {
  color: var(--bs-success-text-emphasis);
}

section.danger .eyebrow {
  color: var(--bs-danger-text-emphasis);
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: 1.25rem;
  }

  .proof-grid > * + * {
    border-left:
      var(--bs-border-width)
      solid
      var(--bs-border-color);
  }
}

@media (min-width: 992px) {
  .btn {
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: 2rem;
  }
}

@media (max-width: 991.98px) {
  .hero {
    min-height: 0;
    padding-top: 4rem;
  }

  .originlink-home .display-1 {
    max-width: 11ch;
  }

  .product-visual {
    min-height: 25rem;
    margin-top: 3rem;
  }

  .material-label-oak {
    right: 4%;
  }
}

@media (max-width: 767.98px) {
  .site-header {
    inset: 0 0 auto;
    padding-inline: 0;
  }

  .header-stick {
    padding: .6rem 1rem;
    border: 0;
    border-bottom:
      var(--bs-border-width)
      solid
      var(--bs-border-color);
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 575.98px) {
  .originlink-home .display-1 {
    font-size: clamp(3rem, 16vw, 4.3rem);
  }

  .product-visual {
    min-height: 18rem;
  }

  .product-image {
    transform: rotate(-1deg) scale(1.14);
  }

  .material-label {
    max-width: 75%;
    padding: .5rem .6rem;
    font-size: .68rem;
  }

  .material-label-oak {
    inset: -4% 0 auto auto;
  }

  .material-label-spruce {
    inset: auto auto -2% 0;
  }

  .timeline-item {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .timeline-item > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .originlink-home *,
  .originlink-home *::before,
  .originlink-home *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}