/* ============================================
 * service-page-packages.css — pricing tiers
 *
 * Template module across all 6 service pages.
 * Built from Figma node 226:799 (Website service page).
 *
 * Layout:
 *   Mobile  — cards stack single-column, full width.
 *   Desktop — 3-column equal-width grid, equal-height cards.
 *
 * Featured card (middle tier, MOST POPULAR) gets a 4px pink
 * outline + badge.
 *
 * Flags (see build-context.md):
 *   DRIFT
 *     - Section padding-bottom: Figma 120, used established
 *       asymmetric pattern --space-2xl (60). Matches homepage
 *       body sections.
 *     - Card border colour: Figma uses #000836, established
 *       --color-border-card is rgba(navy, 0.24). Used token.
 *     - Description line-height: Figma 1.56, used --leading-relaxed
 *       (1.6). 2.6% drift.
 *   INCONSISTENCY
 *     - Card radius: Figma 12px, used --radius-lg (16) to match
 *       the established homepage card standard (testimonials,
 *       why-stats). 33% off.
 *     - "MOST POPULAR" badge gradient: Figma is a 4-stop dark→
 *       pink→pink→orange, used --gradient-accent (2-stop).
 *   MISSING TOKEN
 *     - Card title (H4 desktop) 32px: no --text-h4 token exists.
 *       Using --text-h2-mobile (same px) as fallback. Note
 *       semantic mismatch.
 *     - Badge text 12px: smaller than --text-sm (14). Using
 *       literal 12px.
 *     - Card title (H4) 32px and badge text 12px remain literal
 *       pending --text-h4 / --text-xs tokens.
 *
 *   Resolved 2026-05-20: featured-card pink now uses the
 *   --color-pink-stop token (promoted to tokens.css).
 * ============================================ */

.tlm-service-page-packages {
  background-color: var(--color-cream);
  /* Mobile: 40/40 — tighter stacked-section rhythm. Desktop bumps to 120. */
  padding-block: var(--space-section-y-mobile);
}

/* Background variants — opt-in per page. */
.tlm-service-page-packages--white {
  background-color: var(--color-white);
}

.tlm-service-page-packages__inner {
  display: flex;
  flex-direction: column;
  /* Per-child margins instead of flex gap so the intro→cards
     distance can stay generous (~72) while cards→alt-card is tight
     (24, matching the 3-col gap). Using gap would apply the same
     value to every transition. */
}

/* ============================================
 * Intro
 * ============================================ */

.tlm-service-page-packages__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);                   /* 24 between title and lead */
  margin-bottom: var(--space-lg);         /* 32 to "Each package includes" block (mobile) */
}

.tlm-service-page-packages__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);       /* 32 mobile */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
  text-wrap: balance;
}

.tlm-service-page-packages__lead {
  margin: 0;
  max-width: 48rem;                       /* keep lead readable, ~768px; matches __note */
  font-family: var(--font-sans);
  font-size: var(--text-base);            /* 16 mobile */
  line-height: var(--leading-normal);     /* 1.5 mobile */
  color: var(--color-text-on-light);
}

/* ============================================
 * "Each package includes" block — sits between intro and cards
 * ============================================ */

.tlm-service-page-packages__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);                   /* 48 between title and grid */
  margin-bottom: var(--space-3xl);        /* 72 to cards row (mobile) */
}

.tlm-service-page-packages__includes-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);             /* 24 mobile */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-align: center;
  color: var(--color-text-on-light);
}

/* Double-class selector to beat .__features (display: flex) on the same
   element. Without this, the .__features rule defined later in the file
   wins via source order and keeps everything stacked in one column. */
.tlm-service-page-packages__includes-grid.tlm-service-page-packages__features {
  display: grid;
  grid-template-columns: 1fr;             /* mobile: single column */
  gap: var(--space-sm);                   /* 16 between bullets */
}

@media (min-width: 768px) {
  .tlm-service-page-packages__includes-grid.tlm-service-page-packages__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* tablet: 2 cols */
    column-gap: var(--space-xl);          /* 48 between cols */
  }
}

@media (min-width: 1024px) {
  .tlm-service-page-packages__includes-grid.tlm-service-page-packages__features {
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* desktop: 4 cols */
    grid-template-rows: repeat(2, auto);               /* exactly 2 rows */
    grid-auto-flow: column;                            /* fill column-first: col 1 gets bullets 1+2, col 2 gets 3+4, etc. */
  }

  /* --cols-3 modifier: pages with fewer includes (e.g. 5 items) use a
     3-column desktop grid instead of the 4-column default. */
  .tlm-service-page-packages__includes-grid--cols-3.tlm-service-page-packages__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Includes-grid items only: bold lead on its own line, description beneath.
   Per-card feature lists keep the plain single-line form. */
.tlm-service-page-packages__feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tlm-service-page-packages__feature-lead {
  font-weight: 600;
  color: var(--color-navy);
}

/* ============================================
 * Mobile tab strip (hidden on desktop)
 *
 * Sits above the cards. Tap a tab to scroll the matching card into
 * view; native swipe drives the active tab via scroll position. Same
 * behaviour pattern as the referral-journey carousel but with pill
 * styling closer to the FAQ category list.
 * ============================================ */

.tlm-service-page-packages__tabs {
  display: flex;
  gap: var(--space-xs);                   /* 8 between pills */
  margin-bottom: var(--space-md);         /* 24 to the cards */
  /* Bleed to viewport edges so a third pill can flush to the edge if
     copy ever runs long. Same pattern as the FAQ mobile categories. */
  margin-inline: calc(var(--space-section-x-mobile) * -1);
  padding-inline: var(--space-section-x-mobile);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tlm-service-page-packages__tabs::-webkit-scrollbar {
  display: none;
}

.tlm-service-page-packages__tab {
  flex-shrink: 0;
  display: inline-block;
  padding: var(--space-xs) var(--space-md);  /* 8 vertical, 24 horizontal */
  background-color: transparent;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.tlm-service-page-packages__tab:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.tlm-service-page-packages__tab--active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-text-on-dark);
  font-weight: var(--weight-semibold);
}

/* ============================================
 * Cards grid
 *
 * Mobile: horizontal scroll-snap carousel — one card per snap point.
 * The cards UL is wider than the section (each card is the section's
 * content width); native swipe + tab clicks both scroll horizontally.
 *
 * Desktop: standard column layout (overridden below).
 * ============================================ */

.tlm-service-page-packages__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: var(--space-md);                   /* 24 between cards on the scroll track */
  /* Bleed the scroll track to viewport edges so cards can flush snap
     to viewport sides. Matches FAQ mobile categories pattern. */
  margin-inline: calc(var(--space-section-x-mobile) * -1);
  padding-inline: var(--space-section-x-mobile);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tlm-service-page-packages__cards::-webkit-scrollbar {
  display: none;
}

.tlm-service-page-packages__card {
  /* Width = viewport - section padding * 2, so one card fills the
     visible track between the bleeds. flex-shrink: 0 keeps the card
     from collapsing inside the flex track. */
  flex: 0 0 calc(100vw - var(--space-section-x-mobile) * 2);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);                   /* 32 between card sections */
  padding: var(--space-md);               /* 24 internal (mobile, per card standard) */
  background-color: var(--color-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);        /* 16 — homepage card standard */
  box-shadow: var(--shadow-lg);           /* matches homepage card standard for cards on light bg */
  transition: box-shadow 200ms ease;
}

/* Pricing-card hover — DELIBERATE EXCEPTION to the site-wide card
   hover pattern. Everywhere else (services, blog related) only the
   arrow/CTA circle reacts and the card stays put. Pricing cards are a
   decision surface: the whole card lifts with a pink ring so the
   choice the user is hovering reads as selectable. Intentional, not
   drift. Wrapped in @media (hover: hover) so touch taps don't leave
   the ring stuck on mobile. */
@media (hover: hover) {
  .tlm-service-page-packages__card:hover {
    border-color: var(--color-pink-stop); /* swap the 1px grey border to pink so the 2px ring sits flush on it */
    box-shadow:
      0 0 0 2px var(--color-pink-stop),
      var(--shadow-button-hover),
      var(--shadow-lg);
  }

  .tlm-service-page-packages__card:hover .tlm-service-page-packages__cta.tlm-button--ghost-on-light {
    background-color: var(--color-navy);
    color: var(--color-text-on-dark);
    border-color: var(--color-navy);
  }
}

/* ============================================
 * Card head — name, optional badge, price, summary
 * ============================================ */

.tlm-service-page-packages__card-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                   /* 24 between head items */
}

.tlm-service-page-packages__card-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tlm-service-page-packages__card-name {
  margin: 0;
  font-family: var(--font-serif);
  /* H4-level card title — 32px flat at all breakpoints (looked right
     on both mobile + desktop). Uses the --text-h4 token. */
  font-size: var(--text-h4);              /* 32 */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-service-page-packages__card-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) 12px;         /* 12px horizontal is a deliberate pill-chip value */
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  background-image: var(--gradient-accent);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.tlm-service-page-packages__card-price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3);              /* 40 mobile — scales up below */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

/* "From" prefix sits inline before the price number, in sans + small size
   so the number stays dominant. */
.tlm-service-page-packages__card-price-prefix {
  display: block;                         /* sit on its own line above the price */
  margin-bottom: var(--space-2xs);        /* 4 — tight to the dollar value */
  font-family: var(--font-sans);
  font-size: var(--text-base);            /* 16 */
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: 0;
  color: var(--color-text-on-light);
  opacity: 0.7;                           /* slightly de-emphasised */
}

/* "/ month" suffix sits beneath the price (mirror of the prefix) so the
   dollar value stays dominant. Used on recurring/retainer pricing. */
.tlm-service-page-packages__card-price-suffix {
  display: block;                         /* sit on its own line below the price */
  margin-top: var(--space-2xs);           /* 4 — tight to the dollar value */
  font-family: var(--font-sans);
  font-size: var(--text-base);            /* 16 */
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: 0;
  color: var(--color-text-on-light);
  opacity: 0.7;
}

.tlm-service-page-packages__card-summary {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);            /* 16 mobile */
  line-height: var(--leading-normal);     /* 1.5 mobile */
  color: var(--color-text-on-light);
}

/* ============================================
 * Divider
 * ============================================ */

.tlm-service-page-packages__card-divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-border-card);
  width: 100%;
}

/* ============================================
 * Card body — feature groups
 * ============================================ */

.tlm-service-page-packages__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);                   /* 32 between groups */
  flex-grow: 1;                           /* push CTA to bottom */
}

.tlm-service-page-packages__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                   /* 16 between label and content */
}

.tlm-service-page-packages__group-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);              /* 14 */
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-text-on-light);
}

.tlm-service-page-packages__group-value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

.tlm-service-page-packages__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                   /* 16 between feature items */
}

.tlm-service-page-packages__feature {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

/* Navy circle with white check, drawn in CSS rather than imported SVG */
.tlm-service-page-packages__feature::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background-color: var(--color-navy);
  /* check glyph as a centred mask */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 12 10 16 18 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  margin-top: 2px;                        /* optical centring with first text line */
}

/* ============================================
 * CTA — uses shared .tlm-button variant
 * ============================================ */

.tlm-service-page-packages__cta {
  align-self: stretch;                    /* full-width on all breakpoints (per mobile std + visual consistency at desktop card widths) */
  margin-top: auto;                       /* push to card bottom even when card stretches */
}

/* Inline group variant — label and value on one row (Timeline) */
.tlm-service-page-packages__group--inline {
  /* keep as flex column; visually compact, no horizontal layout
     change. Mobile keeps stack; desktop also stacked for vertical
     alignment across the 3 cards. */
}

/* "A note on the range" — a centred, borderless callout below the cards.
   Reads as commentary, not a card. */
.tlm-service-page-packages__note {
  margin: var(--space-xl) auto 0;           /* 48 above */
  max-width: 48rem;                         /* ~768px, narrower than card row */
  text-align: center;
}

.tlm-service-page-packages__note-title {
  margin: 0 0 var(--space-xs);              /* 8 below title */
  font-family: var(--font-serif);
  font-size: var(--text-xl);                /* 20 */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text-on-light);
}

.tlm-service-page-packages__note p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);              /* 16 */
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

/* Footnote-style disclaimer below all pricing — small, muted, body font, centred. */
.tlm-service-page-packages__disclaimer {
  margin: var(--space-md) 0 0;            /* 24 below the cards */
  font-family: var(--font-sans);
  font-size: var(--text-base);            /* 16 */
  line-height: var(--leading-normal);
  text-align: center;
  color: var(--color-text-on-light);
  opacity: 0.7;
}

/* ============================================
 * TABLET (>= 768px) — body p bumps to 18/1.6
 * ============================================ */

@media (min-width: 768px) {
  .tlm-service-page-packages__lead,
  .tlm-service-page-packages__card-summary,
  .tlm-service-page-packages__feature,
  .tlm-service-page-packages__group-value {
    font-size: var(--text-lg);            /* 18 */
    line-height: var(--leading-relaxed);  /* 1.6 */
    letter-spacing: var(--tracking-tight);
  }
}

/* ============================================
 * DESKTOP (>= 1024px) — 3-column grid, full-size type
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-service-page-packages {
    padding-block: var(--space-5xl);  /* 120 top + bottom — symmetric body rhythm */
  }

  .tlm-service-page-packages__intro {
    margin-bottom: var(--space-xl);       /* 48 to "Each package includes" block (desktop) */
  }

  .tlm-service-page-packages__includes {
    margin-bottom: var(--space-4xl);      /* 80 to cards row (desktop) */
  }

  .tlm-service-page-packages__title {
    font-size: var(--text-h2);            /* 56 desktop */
  }

  .tlm-service-page-packages__lead {
    max-width: 48rem;                     /* matches __note width */
  }

  /* Hide the mobile tab strip on desktop. */
  .tlm-service-page-packages__tabs {
    display: none;
  }

  .tlm-service-page-packages__cards {
    display: grid;
    /* 3-col main row + Single page card sits underneath spanning full width.
       Single page gets grid-column: 1 / -1 via [data-packages-card="single-page"] below. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 4 named rows shared across every card in the 3-col row: head / divider
       / body / cta. Each standard card is a subgrid spanning these rows, so
       the divider, the feature body, and the CTA all align across cards even
       when summary or feature-list lengths differ. The tallest card sizes
       each row; shorter cards just gain whitespace. */
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-md);                 /* 24 — column gap; row gap reset per-card below */
    align-items: stretch;
    /* Reset the mobile carousel rules so desktop is a clean grid. */
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .tlm-service-page-packages__card {
    /* Reset mobile-carousel sizing back to grid-cell-fills behaviour. */
    flex: initial;
    scroll-snap-align: none;
    padding: var(--space-xl) var(--space-lg);  /* 48 vertical, 32 horizontal — Figma */
    gap: var(--space-lg);
  }

  /* Standard cards (every card except the full-width Single page variant)
     become a subgrid: their head / divider / body / cta children land on
     the parent's 4 shared rows, so those horizontal lines align across the
     row. The wide card opts out — it has its own internal layout below. */
  .tlm-service-page-packages__card:not([data-packages-card="single-page"]) {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--space-lg);             /* 32 — preserves the card's internal rhythm */
  }

  /* ============================================
   * Single page card — desktop-only layout override
   *
   * Inherits the standard __card markup but on desktop reflows into the
   * old alt-card pattern: full-width row, head as a flex row (title-left,
   * price+CTA-right), smaller title (24) + price (40), 3-col feature
   * grid instead of stacked groups. Mobile stays as a standard card in
   * the carousel.
   * ============================================ */

  .tlm-service-page-packages__card[data-packages-card="single-page"] {
    grid-column: 1 / -1;                   /* span full row below the 3 tiers */
    flex-direction: column;
    gap: var(--space-md);                  /* 24 between head / divider / body / cta — tighter than 32 to keep the row compact */
  }

  /* Head row: title block left, price right. Price stacks above where
     the CTA would sit in the main cards (CTA stays inside __card-body
     for now — see below for placement). */
  .tlm-service-page-packages__card[data-packages-card="single-page"] .tlm-service-page-packages__card-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: var(--space-lg);
    row-gap: var(--space-sm);
  }

  /* Title smaller than main cards' 32 (alt-card pattern was 24). */
  .tlm-service-page-packages__card[data-packages-card="single-page"] .tlm-service-page-packages__card-name {
    font-size: var(--text-2xl);             /* 24 */
  }

  /* Summary occupies the left column under the title (spans only col 1). */
  .tlm-service-page-packages__card[data-packages-card="single-page"] .tlm-service-page-packages__card-summary {
    grid-column: 1;
  }

  /* Price right-aligned in column 2, smaller than main cards' 56. */
  .tlm-service-page-packages__card[data-packages-card="single-page"] .tlm-service-page-packages__card-price {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-h3);              /* 40 */
    text-align: right;
  }

  /* Body becomes a 3-col grid for the feature groups (vs stacked on
     standard cards). Matches the old alt-card-grid layout. */
  .tlm-service-page-packages__card[data-packages-card="single-page"] .tlm-service-page-packages__card-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);                   /* 48 between cols */
  }

  /* Single page CTA sits AFTER __card-body in source order, but on desktop
     we want it stacked under the price at top-right. CSS-only solution:
     make the whole __card a grid with 2 cols, place head spanning both
     cols, body in col 1 of row 2, CTA in col 2 of row 2 right-aligned.
     Cleaner alt: just give the CTA intrinsic width + right-align it below
     the body. Going with the simpler one — keeps source order natural. */
  .tlm-service-page-packages__card[data-packages-card="single-page"] .tlm-service-page-packages__cta {
    align-self: flex-end;                   /* right-align under body */
    margin-top: 0;
  }

  /* Price stays 40 through the tablet band; the full 56 min-content
     width ("$50,000") overflows the ~324px card cell between 1024-1300px.
     Bumps to 56 at wide desktop below where the cards have room. */
}

/* Wide desktop: full-size price once cards are wide enough for it. */
@media (min-width: 1360px) {
  .tlm-service-page-packages__card-price {
    font-size: var(--text-h2);            /* 56 desktop */
  }
}