/*
 * Ariya brand refinements for the landing/front pages.
 * The primary gold (#b0893a) is applied through the SCSS theme; this file only
 * layers a few luxury touches on top and can be extended as the brand evolves.
 */

:root {
  --ariya-gold: #b0893a;
  --ariya-gold-light: #d4b36a;
  --ariya-gold-dark: #8f6e2c;
  --ariya-charcoal: #221f1c;
  --ariya-bone: #f3eee6;
}

/* Warm, subtle gradient behind the hero to echo the brand's luxury feel */
.landing-hero {
  background-image: linear-gradient(180deg, rgba(176, 137, 58, 0.06) 0%, rgba(176, 137, 58, 0) 60%);
}

/* Big product name in the hero; underline comes from the shared
   .section-title brush icon (like the other section headings). */
.hero-brand {
  color: var(--ariya-gold);
  line-height: 1.4;
}
.hero-brand .section-title {
  padding-bottom: 0.5rem;
}

/* Gold gradient sweep on primary call-to-action buttons */
.landing-navbar .btn-primary,
.landing-hero-btn .btn-primary,
.landing-cta .btn-primary {
  background-image: linear-gradient(135deg, var(--ariya-gold-light) 0%, var(--ariya-gold) 48%, var(--ariya-gold-dark) 100%);
  border-color: var(--ariya-gold-dark);
}

/* Slightly stronger emphasis for the active/featured pricing card border */
.landing-pricing .card.border-primary,
.pricing-plans .card.border-primary {
  box-shadow: 0 12px 32px -8px rgba(176, 137, 58, 0.18);
}

.pricing-plans .card.border-primary {
  background-color: rgba(176, 137, 58, 0.08);
}

.dark-style .pricing-plans .card.border-primary {
  background-color: rgba(176, 137, 58, 0.14);
}

.ariya-price-was {
  color: var(--ariya-charcoal);
  opacity: 0.55;
}

.dark-style .ariya-price-was {
  color: #d8d2c8;
  opacity: 0.7;
}

/* Wide comparison tables stay inside the page on small screens.
   In RTL, a scrollable table still stretches the document unless the
   page itself clips that leftover overflow. clip does not turn the
   other axis into a scroll container. */
html {
  overflow-x: clip;
}

.row:has(> .col-12 > .table-responsive) {
  min-width: 0;
}

.row:has(> .col-12 > .table-responsive) > .col-12 {
  min-width: 0;
  max-width: 100%;
}