/* ============================================================
   Crew-size rate cards (.m4y-rate-*)
   ------------------------------------------------------------
   Markup is generated by src-website-builder/gen-pricing.mjs from
   data/pricing.json, between <!-- M4Y:PRICING --> sentinels. It reuses
   Webflow's .card.plan skeleton and the packages-page .m4y-pkg-*
   helpers; only the rules below are new.

   This lives in its own file rather than m4y-overrides.css purely so a
   price change never collides with unrelated work in that 3,000-line
   stylesheet. Loaded after m4y-overrides.css on the pages that use it.
   ============================================================ */

.m4y-rate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Webflow's .card.plan carries height:100%, and .card-plan-content
   min-height:100%. Inside a grid item that is a circular percentage
   height: the inner flex column gets under-sized, so the CTA's
   margin-top:auto lands it on top of the last bullet. Grid stretch
   already equalises the columns, so opt out of both. */
.m4y-rate-grid > .card.plan { height: auto; position: relative; display: flex; }
.m4y-rate-grid .card-plan-content { min-height: 0; flex: 1; }

/* Webflow's .card.plan.popular is sky blue (#76b5ff), but the
   .on-dark / .white / .color-neutral-100 classes the cards use are all
   designed for a dark surface — on sky blue they fail contrast. */
.m4y-rate-grid > .card.plan.popular { background-color: var(--accent--primary-1); }

/* ...and .btn-primary is navy too, so it would vanish on that card. */
.m4y-rate-grid > .card.plan.popular .btn-primary {
  background-color: var(--neutral--100);
  border-color: var(--neutral--100);
  color: var(--accent--primary-1);
}
.m4y-rate-grid > .card.plan.popular .btn-primary:hover {
  background-color: var(--secondary--color-1);
  border-color: var(--secondary--color-1);
  color: var(--accent--primary-1);
}

/* Top-align the check so it sits with the first line of a wrapped bullet. */
.m4y-rate-grid .card-plan-icon-list-item { align-items: flex-start; }
.m4y-rate-grid .card-plan-icon-list-item .text-200 { min-width: 0; }

/* m4y-overrides.css sets .m4y-pkg-list{margin:0}, which beats
   .mg-bottom-40px at equal specificity and leaves the CTA flush against
   the last bullet. Put the gap back. */
.m4y-rate-grid .m4y-pkg-list.mg-bottom-40px { margin-bottom: 40px; }

/* The "/hr" rides with the figure but stays visibly secondary to it. */
.m4y-rate-per {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 2px;
  vertical-align: baseline;
}

/* Tiny line noting the flat truck & travel charge. Deliberately quiet, but
   on the card rather than only in the note — it is part of the price. */
.m4y-rate-fee {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.7;
  margin-top: 2px;
  line-height: 1.4;
}

/* Unit + minimum, under the hourly headline */
.m4y-rate-unit {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.75;
  margin-top: 6px;
  line-height: 1.45;
}

/* The mandatory disclaimer beneath the grid (CLAUDE.md §6) */
.m4y-rate-note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--neutral--600);
  max-width: 1180px;
  margin: 28px auto 0;
}
.m4y-rate-note a { text-decoration: underline; }

.m4y-rate-intro { max-width: 720px; }

@media (max-width: 991px) {
  .m4y-rate-grid { grid-template-columns: 1fr; }
}