/* Package value framing for standardized Vell Designs launch packages. */

.package-best-for {
  margin: -.15rem 0 1rem;
  color: #bbb8c7;
  font-size: .9rem;
  line-height: 1.55;
}

.package-best-for strong {
  color: #f7f5ff;
}

.package-value-line {
  margin: 0 0 .2rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  color: #d9d7e3;
  font-size: .9rem;
  line-height: 1.55;
}

.package-value-line strong {
  color: var(--studio-acid);
}

.package-value-details {
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.package-value-details summary {
  position: relative;
  padding: .9rem 1.5rem .9rem 0;
  cursor: pointer;
  list-style: none;
  color: #f7f5ff;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.4;
}

.package-value-details summary::-webkit-details-marker {
  display: none;
}

.package-value-details summary::after {
  content: "+";
  position: absolute;
  right: .1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--studio-cyan);
  font-size: 1.25rem;
  font-weight: 500;
}

.package-value-details[open] summary::after {
  content: "−";
}

.package-value-details summary:focus-visible {
  outline: 2px solid var(--studio-acid);
  outline-offset: 3px;
  border-radius: 4px;
}

.package-value-details p {
  margin: 0;
  padding: 0 0 1rem;
  color: #c9c6d4;
  font-size: .88rem;
  line-height: 1.65;
}

.package-pricing-context {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1rem 2rem;
  margin-top: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
  border: 1px solid rgba(92, 225, 230, .22);
  border-radius: 20px;
  background: rgba(12, 17, 27, .42);
}

.package-pricing-context .package-label {
  margin-bottom: .4rem;
}

.package-pricing-context h3 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.1;
}

.package-pricing-context p {
  margin: 0;
  color: #cbc9d8;
  line-height: 1.7;
}

.package-pricing-context strong {
  color: #fff;
}

.package-print-note {
  margin-top: .75rem;
  color: #aaa6ba;
  font-size: .82rem;
  line-height: 1.55;
}

@media screen and (max-width: 768px) {
  .package-pricing-context {
    grid-template-columns: 1fr;
  }

  .package-value-details summary {
    padding-block: 1rem;
  }

  .package-card .button {
    min-height: 44px;
  }
}

@media (forced-colors: active) {
  .package-value-line,
  .package-pricing-context {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}