/*
 * The three plan cards in the homepage pricing section (#pricing).
 *
 * Plain CSS rather than Tailwind utilities, so the cards are styled as one unit and the compiled tailwind.css does not
 * have to be rebuilt for them. Colours are the Tailwind palette the rest of the page uses: indigo-600 #4f46e5,
 * purple-600 #9333ea, gray-50 #f9fafb ... gray-900 #111827.
 *
 * What differs between plans (the price and the three limits) is the loudest thing on each card. What is the same on
 * every plan (the inclusions) is small and quiet. Growth is lifted and outlined in the brand gradient as a visual
 * anchor only: it carries no "most popular" claim, because nothing measures that.
 */

/* The list of plans. Room below it for the note that follows; Growth overhangs its row on wide screens, so the
   visible gap under the tallest card is 0.75rem less than this. */
.plan-grid {
  margin-bottom: 2.5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .plan-grid {
    margin-bottom: 4.25rem;
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 28px -14px rgba(17, 24, 39, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.plan:hover {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05), 0 22px 44px -18px rgba(79, 70, 229, 0.3);
}

/* The brand gradient as the border: a transparent border with the gradient painted under it (border-box) and a white
   fill painted over everything inside it (padding-box). Keeps the rounded corners, unlike border-image. */
.plan--featured {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #4f46e5 0%, #9333ea 100%) border-box;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.08), 0 26px 52px -22px rgba(99, 102, 241, 0.5);
}

.plan--featured:hover {
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.1), 0 32px 60px -22px rgba(99, 102, 241, 0.6);
}

/* Header: tier icon beside the name and a one-line description. */
.plan__header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.875rem;
  align-items: center;
}

.plan__icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: #f3f4f6;
  color: #4b5563;
}

.plan__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.plan__icon--growth {
  background: #eef2ff;
  color: #4f46e5;
}

.plan__icon--scale {
  background: #faf5ff;
  color: #9333ea;
}

.plan--featured .plan__icon {
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(79, 70, 229, 0.8);
}

.plan__name {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  color: #111827;
}

.plan__blurb {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #6b7280;
}

/* Price. */
.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.375rem;
  margin: 1.5rem 0 0;
}

.plan__amount {
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111827;
}

.plan--featured .plan__amount {
  background: linear-gradient(90deg, #4f46e5, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #4f46e5; /* shown where background-clip: text is not supported */
}

.plan__period {
  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
}

.plan__per {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

/* The three limits: the numbers that tell the plans apart, in a tinted panel so they are read first and line up
   from one card to the next. */
.plan__limits {
  margin: 1.5rem 0 1.25rem;
  padding: 0.25rem 1rem;
  background: #f9fafb;
  border: 1px solid #f1f2f4;
  border-radius: 0.875rem;
}

.plan--featured .plan__limits {
  background: #eef2ff;
  border-color: #e0e7ff;
}

/* Section labels are sentence case like everything else on the card: no capitals other than a first letter and names. */
.plan__limits-title,
.plan__includes-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #374151;
}

.plan__limits-title {
  padding-top: 0.75rem;
}

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

.plan__limit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
  font-size: 0.875rem;
}

.plan__limit + .plan__limit {
  border-top: 1px dashed rgba(107, 114, 128, 0.28);
}

.plan__limit-label {
  color: #4b5563;
}

.plan__limit-value {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #111827;
}

/* What every plan includes: small and quiet, because it does not help anyone choose. */
.plan__includes-title {
  margin-bottom: 0.75rem;
}

.plan__includes {
  display: grid;
  gap: 0.625rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #374151;
}

.plan__includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.plan__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
}

.plan__check svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Call to action. Growth is the only filled button, so it is the one that draws the eye; the others are outlines. */
.plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.8125rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.plan__cta svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s ease;
}

.plan__cta:hover svg {
  transform: translateX(3px);
}

.plan__cta:focus-visible {
  outline: 3px solid #a5b4fc;
  outline-offset: 2px;
}

.plan__cta--secondary {
  background: #fff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.plan__cta--secondary:hover {
  background: #eef2ff;
  border-color: #818cf8;
  color: #3730a3;
}

.plan__cta--primary {
  background: linear-gradient(90deg, #4f46e5, #9333ea);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 10px 22px -10px rgba(79, 70, 229, 0.75);
}

.plan__cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(79, 70, 229, 0.85);
  filter: brightness(1.06);
}

/* Three columns from 768px. Growth grows beyond the row by 0.75rem at the top and the bottom (negative margins on a
   stretched grid item enlarge it), and its padding grows to match, so its content lines up with the other two. */
@media (min-width: 768px) {
  .plan--featured {
    margin-block: -0.75rem;
    padding-block: 2.75rem 2.5rem;
  }
}

/* Narrow three-column widths (tablets and small laptops, 768 to 1099px), where each card is only about 220 to 320px
   wide: tighter padding and type keep "£229/month" and every limit on one line, and the button says "Get started"
   because the card already names the plan (the link keeps its full accessible name through aria-label). The full
   "Get started with Growth" needs a card about 315px wide; Growth is the first to wrap, as its border is thicker. */
@media (min-width: 768px) and (max-width: 1099px) {
  .plan {
    padding-inline: 1rem;
  }

  /* The description drops under the icon and name so it has the card's full width: beside the icon it would wrap to a
     second line on the longer ones, and the three cards would stop lining up. */
  .plan__header {
    row-gap: 0.5rem;
  }

  .plan__icon {
    grid-row: auto;
    width: 2.5rem;
    height: 2.5rem;
  }

  .plan__blurb {
    grid-column: 1 / -1;
  }

  .plan__amount {
    font-size: 2.5rem;
  }

  .plan__limits {
    padding-inline: 0.5rem;
  }

  .plan__limit {
    gap: 0.5rem;
    font-size: 0.8125rem;
  }

  .plan__limit-value {
    font-size: 0.9375rem;
  }

  .plan__cta-plan {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan,
  .plan__cta,
  .plan__cta svg {
    transition: none;
  }

  .plan:hover,
  .plan__cta--primary:hover,
  .plan__cta:hover svg {
    transform: none;
  }
}