/*
Pricing page page-specific styles
Loaded via the layout's content_for :page_stylesheet hook
see app/views/marketing/README.md
Plan tints are the legacy brand pastels:
mint (Basic), pink (Pro), gray-purple (Enterprise).
*/

.plan-card {
  position: relative;
  height: 100%;
  padding: 4.5rem 1.5rem 2rem;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--bs-box-shadow-sm);
  text-align: center;
}

/*
The divider between the price tiles takes the plan's accent.
The vr keeps its own low opacity, so it reads as a soft plan-colored line.
*/
.plan-card .vr {
  color: var(--plan-accent);
}

/*
Each plan carries its accent and tile tint as custom properties,
so the title, price tiles, and captions all key off the card class.
*/
.plan-card-basic {
  background-color: var(--tt-mint-50);
  --plan-accent:    var(--tt-teal-500);
  --plan-tile-bg:   var(--tt-mint-100);
}

.plan-card-pro {
  background-color: var(--tt-raspberry-50);
  --plan-accent:    var(--tt-raspberry-700);
  --plan-tile-bg:   var(--tt-raspberry-100);
}

.plan-card-enterprise {
  background-color: var(--tt-lavender-50);
  --plan-accent:    var(--tt-lavender-900);
  --plan-tile-bg:   var(--tt-lavender-300);
}

.plan-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
}

.plan-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--plan-accent);
  font-size: 2rem;
}

.price-tile {
  flex: 1 1 0;
  max-width: 10rem;
  padding: 1rem 0.75rem;
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--plan-tile-bg);
  color: var(--plan-accent);
}

.price-tile .amount {
  font-family: var(--tt-font-display);
  font-size: 1.75rem;
  font-weight: 700;
}

.price-tile .billing-cycle {
  font-size: 0.75rem;
  line-height: 1;
}

.plan-persona {
  min-height: 3em;
}

.price-tile .amount::before {
  content: "$";
  margin-right: 0.125rem;
}

.plan-card li {
  color: var(--tt-lavender-400);
  margin-bottom: 0.5rem;
}

/* Feature chart (collapse-revealed comparison table). */
.price-table {
  max-width: 64rem;
  margin-inline: auto;
  border-collapse: collapse;
  background-color: #fff;
  text-align: left;
}

.price-table th,
.price-table td {
  border: 1px solid #cecece;
  padding: 0.5rem 1rem;
}

.price-table .plan-header {
  text-align: center;
  vertical-align: bottom;
  min-width: 11rem;
}

.feature-cell {
  max-width: 280px;
  font-weight: 400;
}

.plan-cell {
  text-align: center;
  vertical-align: middle;
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 9rem;
}

.plan-cell-basic.filled      { background-color: #edfef7; color: var(--tt-teal-500); }
.plan-cell-pro.filled        { background-color: #fff0f7; color: var(--tt-pink); }
.plan-cell-enterprise.filled { background-color: #ecebef; color: #2e294e; }

.plan-header.filled {
  color: var(--tt-ink);
}

/* Testimonial quote cards */
.quote-card {
  padding: 3rem;
  border-radius: 3rem;
}

.quote-card-1 { background-color: var(--tt-mint-25);  }
.quote-card-2 { background-color: var(--tt-teal-100); }
.quote-card-3 { background-color: var(--tt-mint-400); }

.quote-person {
  font-family: var(--tt-font-display);
  font-weight: 700;
  font-size: 1.75rem;
}

.quote-role {
  color: var(--tt-teal-700);
}

/* FAQ cards: generously rounded, with one hard corner each alternating
   sides down the grid (cards 1, 4, 5 bottom-right; 2 and 3 bottom-left). */
.faq-card {
  padding: 2rem;
  border-radius: 2.5rem;
}

/* Both sides of the hero handoff are white on this page, so the curve is
   invisible and its reserved overlap is dead space — drop it and cut the
   hero-to-plans gap to about half. */
.marketing-hero-curve {
  display: none;
}

.marketing-hero-curve + .marketing-section {
  padding-block-start: 3rem;
}

/*
The designer's cones, painted onto the section's top-right; anchored there
they stay put when the feature chart expands below. The image URL itself
lives in a style attribute on the section tag (the view has asset_path;
plain css doesn't), so below lg the !important is what wins over that
inline style to keep the cones from colliding with the heading.
*/
#feature-chart-section {
  background-repeat: no-repeat;
  background-position: top right;
  /* The svg viewBox is 980 units tall so the third cone is complete in the
     file; 40.25rem keeps the same on-screen cone scale as 34rem did at the
     old 828-unit crop. The collapsed section clips the third cone; toggling
     the chart open reveals it whole. */
  background-size: auto 40.25rem;
}

@media (max-width: 991.98px) {
  #feature-chart-section {
    background-image: none !important;
  }
}