/* Crowd.Shots public commercial layer
   ------------------------------------------------------------
   Scope:
   - homepage
   - pricing
   - checkout
   - thank-you/payment status
   - public partner acquisition pages

   This file intentionally builds on Bootstrap 5 and the Crowd.Shots
   foundation styles. Keep it small, component-based and accessible.
 */

:root {
  --cs-commercial-surface: var(--cs-color-surface);
  --cs-commercial-muted: var(--cs-color-surface-muted);
  --cs-commercial-soft: var(--cs-color-primary-soft);
  --cs-commercial-soft-strong: var(--cs-color-accent-soft);
  --cs-commercial-border: var(--cs-color-border);
  --cs-commercial-shadow: var(--cs-shadow-md);
  --cs-commercial-shadow-sm: var(--cs-shadow-sm);
  --cs-commercial-radius: var(--cs-radius-xl);
  --cs-commercial-radius-sm: var(--cs-radius-lg);
}

.cs-commercial-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, var(--cs-commercial-soft), transparent 34rem),
    linear-gradient(180deg, var(--cs-commercial-surface), var(--cs-commercial-muted));
}

.cs-commercial-section {
  position: relative;
}

/* Public/editorial homepage patterns.
   These patterns deliberately avoid card soup and decorative hover motion. */

.cs-public-hero__copy {
  max-width: 42rem;
}

.cs-public-proof-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 0;
  list-style: none;
  border-block: 1px solid var(--cs-commercial-border);
}

.cs-public-proof-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}

.cs-public-proof-list i {
  margin-top: .2rem;
  color: var(--cs-color-primary);
}

.cs-public-proof-list strong,
.cs-public-proof-list small {
  display: block;
}

.cs-public-proof-list small {
  margin-top: .15rem;
  color: var(--cs-color-text-muted);
}

.cs-public-starter {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cs-commercial-border);
  border-radius: var(--cs-commercial-radius);
  background:
    linear-gradient(180deg, var(--cs-commercial-surface), var(--cs-commercial-muted));
  box-shadow: var(--cs-commercial-shadow);
}

.cs-public-starter::before {
  position: absolute;
  inset: 0 0 auto;
  height: .25rem;
  content: "";
  background: var(--cs-color-accent);
}

.cs-public-starter__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.cs-public-starter__icon {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--cs-commercial-border);
  border-radius: var(--cs-radius-lg);
  color: var(--cs-color-primary);
  background: var(--cs-commercial-soft);
}

.cs-public-section-intro {
  max-width: 48rem;
}

.cs-public-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--cs-commercial-border);
}

.cs-public-timeline__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--cs-commercial-border);
}

.cs-public-timeline__step {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  color: var(--cs-primary-contrast);
  font-weight: 700;
  background: var(--cs-color-primary);
}

.cs-public-use-cases {
  background: var(--cs-commercial-muted);
}

.cs-public-use-case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cs-commercial-border);
}

.cs-public-use-case-list li {
  min-width: 0;
  padding: 1.5rem;
  border-bottom: 1px solid var(--cs-commercial-border);
}

.cs-public-use-case-list li:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid var(--cs-commercial-border);
}

.cs-public-use-case-list li:nth-child(even) {
  padding-right: 0;
}

/* Pricing/commerce choice patterns.
   Context is quiet; only actual group and plan choices receive a surface. */

.cs-pricing-intro {
  background: var(--cs-commercial-muted);
}

.cs-pricing-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(16rem, .75fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.cs-pricing-intro__copy {
  max-width: 52rem;
}

.cs-pricing-context {
  min-width: 0;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--cs-commercial-border);
}

.cs-pricing-summary {
  margin: 0;
}

.cs-pricing-summary > div {
  display: grid;
  grid-template-columns: minmax(5rem, .65fr) minmax(0, 1.35fr);
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px solid var(--cs-commercial-border);
}

.cs-pricing-summary > div:last-child {
  border-bottom: 1px solid var(--cs-commercial-border);
}

.cs-pricing-summary dt {
  color: var(--cs-color-text-muted);
  font-weight: 500;
}

.cs-pricing-summary dd {
  min-width: 0;
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cs-pricing-trust-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-pricing-trust-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}

.cs-pricing-trust-list li::before {
  color: var(--cs-status-success);
  font-weight: 700;
  content: "✓";
}

.cs-pricing-options {
  background: var(--cs-color-page);
}

.cs-pricing-choice-list,
.cs-pricing-plan-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.cs-pricing-choice-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cs-pricing-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cs-pricing-choice {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--cs-commercial-border);
  border-radius: var(--cs-commercial-radius);
  background: var(--cs-commercial-surface);
  box-shadow: var(--cs-shadow-xs);
}

.cs-pricing-choice__header {
  min-width: 0;
}

.cs-pricing-choice__meta,
.cs-pricing-recommendation {
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cs-pricing-recommendation {
  color: var(--cs-color-primary);
}

.cs-pricing-choice__price {
  display: grid;
  gap: .25rem;
  margin: 1.5rem 0;
  padding: 1.25rem 0;
  border-block: 1px solid var(--cs-commercial-border);
}

.cs-pricing-choice__price-label {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.cs-pricing-choice__price small {
  color: var(--cs-color-text-muted);
}

.cs-pricing-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--cs-commercial-border);
}

.cs-pricing-facts > div {
  min-width: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--cs-commercial-border);
}

.cs-pricing-facts > div:nth-child(odd) {
  padding-right: 1rem;
}

.cs-pricing-facts > div:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--cs-commercial-border);
}

.cs-pricing-facts dt {
  margin-bottom: .25rem;
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.cs-pricing-facts dd {
  margin: 0;
  font-weight: 650;
}

.cs-pricing-facts dd small {
  display: block;
  margin-top: .25rem;
  color: var(--cs-color-text-muted);
  font-weight: 400;
}

.cs-pricing-choice__plans,
.cs-pricing-choice__features {
  margin-bottom: 1.5rem;
}

.cs-pricing-choice__plans ul,
.cs-pricing-feature-list,
.cs-pricing-related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-pricing-choice__plans li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: .85rem 0;
  border-top: 1px solid var(--cs-commercial-border);
}

.cs-pricing-choice__plans li:last-child {
  border-bottom: 1px solid var(--cs-commercial-border);
}

.cs-pricing-choice__plans li > span:first-child,
.cs-pricing-choice__plans small {
  display: block;
  min-width: 0;
}

.cs-pricing-choice__plans small {
  margin-top: .15rem;
  color: var(--cs-color-text-muted);
}

.cs-pricing-feature-list {
  display: grid;
  gap: .65rem;
}

.cs-pricing-feature-list li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-sm);
}

.cs-pricing-feature-list__marker {
  color: var(--cs-color-primary);
  font-weight: 800;
}

.cs-pricing-choice__action {
  display: grid;
  margin-top: auto;
}

.cs-pricing-choice__action .btn {
  min-height: var(--cs-target-min);
}

.cs-pricing-plan-card--featured {
  position: relative;
  border-color: var(--cs-color-primary);
  box-shadow: var(--cs-shadow-sm);
}

.cs-pricing-plan-card--featured::before {
  position: absolute;
  inset: 0 0 auto;
  height: .25rem;
  border-radius: var(--cs-commercial-radius) var(--cs-commercial-radius) 0 0;
  content: "";
  background: var(--cs-color-primary);
}

.cs-pricing-related-groups {
  background: var(--cs-commercial-muted);
}

.cs-pricing-related-groups__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 5rem);
}

.cs-pricing-related-list {
  border-top: 1px solid var(--cs-commercial-border);
}

.cs-pricing-related-list a {
  display: flex;
  min-height: var(--cs-target-min);
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--cs-commercial-border);
  color: var(--cs-color-text);
  text-decoration: none;
}

.cs-pricing-related-list a:hover {
  color: var(--cs-color-primary);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cs-pricing-related-list small {
  flex: 0 0 auto;
  color: var(--cs-color-text-muted);
}

.cs-pricing-spec-table th,
.cs-pricing-spec-table td {
  padding-block: .75rem;
  border-color: var(--cs-commercial-border);
}

.cs-pricing-spec-table th {
  color: var(--cs-color-text-muted);
  font-weight: 600;
}

/* Legacy commercial choice surfaces retained for unmigrated partner consumers. */

.cs-commercial-card {
  border: 1px solid var(--cs-commercial-border) !important;
  box-shadow: var(--cs-commercial-shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cs-commercial-card:hover,
.cs-commercial-card:focus-within {
  border-color: var(--cs-commercial-border) !important;
  box-shadow: var(--cs-commercial-shadow) !important;
}

@media (hover: hover) and (pointer: fine) {
  .cs-commercial-card:hover {
    transform: translateY(-.15rem);
  }
}

.cs-checkout-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cs-checkout-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6rem;
  top: -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: var(--cs-commercial-soft-strong);
}

.cs-commercial-checkout .card {
  border-radius: var(--cs-commercial-radius);
}

.cs-form-error-summary {
  border-radius: 1rem;
}

.cs-form-error-summary:focus {
  outline: var(--cs-focus);
  outline-offset: .25rem;
}

.cs-commercial-status-page .card {
  border: 1px solid var(--cs-commercial-border);
  border-radius: var(--cs-commercial-radius);
  box-shadow: var(--cs-commercial-shadow-sm);
}

.cs-commercial-empty-state {
  border: 1px solid var(--cs-commercial-border);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, var(--cs-commercial-surface), var(--cs-commercial-muted));
}

.cs-commercial-empty-state::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: .25rem;
  margin-bottom: .75rem;
  border-radius: 999px;
  background: var(--cs-color-primary);
}

.cs-commercial-card .btn,
.cs-commercial-checkout .btn,
.cs-commercial-status-page .btn,
.cs-public-starter .btn {
  min-height: 2.75rem;
}

.cs-commercial-card .badge,
.cs-checkout-hero .badge {
  border-radius: 999px;
  padding-inline: .7rem;
  padding-block: .42rem;
}

@media (max-width: 1199.98px) {
  .cs-pricing-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .cs-pricing-intro__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cs-pricing-context {
    padding-top: 1.5rem;
    padding-left: 0;
    border-top: 1px solid var(--cs-commercial-border);
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .cs-public-proof-list,
  .cs-public-use-case-list,
  .cs-pricing-choice-list,
  .cs-pricing-plan-grid,
  .cs-pricing-related-groups__grid {
    grid-template-columns: 1fr;
  }

  .cs-public-use-case-list li,
  .cs-public-use-case-list li:nth-child(odd),
  .cs-public-use-case-list li:nth-child(even) {
    padding-inline: 0;
    border-right: 0;
  }
}

@media (max-width: 575.98px) {
  .cs-commercial-hero .display-5,
  .cs-commercial-hero .display-6,
  .cs-pricing-intro .display-6 {
    font-size: clamp(2rem, 11vw, 2.6rem);
  }

  .cs-commercial-card,
  .cs-public-starter,
  .cs-pricing-choice {
    border-radius: var(--cs-commercial-radius-sm) !important;
  }

  .cs-pricing-plan-card--featured::before {
    border-radius: var(--cs-commercial-radius-sm) var(--cs-commercial-radius-sm) 0 0;
  }

  .cs-public-timeline__item {
    gap: .9rem;
  }

  .cs-pricing-facts {
    grid-template-columns: 1fr;
  }

  .cs-pricing-facts > div:nth-child(odd),
  .cs-pricing-facts > div:nth-child(even) {
    padding-inline: 0;
    border-left: 0;
  }

  .cs-pricing-related-list a {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-commercial-card {
    transition: none;
    transform: none !important;
  }
}