/*
  HN Path Cards
  ============================================================================
  Structural styles only. Brand colour comes from service-pages.css tokens
  (this is a non-Universal module, so plain var(--token) with no hex fallback).
  White overlays (rgba(255,255,255,x)) and navy shadows (rgba(0,32,91,x)) are
  structural devices per the design system, not brand-colour literals.

  Alignment: the cards row is a CSS grid with five shared rows; each card is a
  subgrid spanning all five so head, description, tiles, reassurance and footer
  line up across cards. Stacked (<=1024px or no subgrid support) falls back to a
  flex column and hides the empty description / reassurance spacers.
*/

.hn-path-cards {
  padding: 70px 0;
}

/* Section background */
.hn-path-cards--bg-none  { background: transparent; }
.hn-path-cards--bg-white { background: var(--white); }
.hn-path-cards--bg-cream { background: var(--bg-cream); }
.hn-path-cards--bg-grey  { background: var(--bg); }

/* Vertical spacing (overrides the base 70px shorthand above) */
.hn-path-cards--pt-none    { padding-top: 0; }
.hn-path-cards--pt-tight   { padding-top: 40px; }
.hn-path-cards--pt-default { padding-top: 70px; }
.hn-path-cards--pt-loose   { padding-top: 110px; }
.hn-path-cards--pb-none    { padding-bottom: 0; }
.hn-path-cards--pb-tight   { padding-bottom: 40px; }
.hn-path-cards--pb-default { padding-bottom: 70px; }
.hn-path-cards--pb-loose   { padding-bottom: 110px; }

/* ── Section head ── */
.hn-path-cards__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 36px;
}
.hn-path-cards__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ruby);
  margin-bottom: 12px;
}
.hn-path-cards__heading {
  font-size: var(--hn-path-cards-heading-size, 40px);
  color: var(--navy);
  margin-bottom: 12px;
}
.hn-path-cards__subhead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

/* ── Cards grid (subgrid) ── */
.hn-path-cards__grid {
  display: grid;
  column-gap: 24px;
  row-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
}
.hn-path-cards__grid--cols-1 { grid-template-columns: 1fr; }
.hn-path-cards__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.hn-path-cards__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

.hn-path-cards__card {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  border-radius: 24px;
  padding: 32px 34px 30px;
}
.hn-path-cards__card > * {
  align-self: start;
  min-width: 0;
}

/* Card backgrounds */
.hn-path-cards__card--white {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 32, 91, 0.06);
}
.hn-path-cards__card--cream {
  background: var(--bg-cream);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 32, 91, 0.06);
}
.hn-path-cards__card--dark-navy {
  background: var(--navy);
  box-shadow: 0 16px 44px rgba(0, 26, 74, 0.22);
}
.hn-path-cards__card--dark-grey {
  background: var(--dark-grey);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}
.hn-path-cards__card--dark-orange {
  background: var(--tiger-deep);
  box-shadow: 0 16px 44px rgba(0, 32, 91, 0.18);
}

/* ── Card head ── */
.hn-path-cards__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hn-path-cards__card-title {
  font-size: 30px;
  line-height: 1;
  color: var(--navy);
}
.is-dark .hn-path-cards__card-title {
  color: var(--white);
}
.hn-path-cards__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 30px;
  white-space: nowrap;
  background: var(--bg-tint-green);
  color: var(--green-deep);
}
.hn-path-cards__pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--green-deep);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.is-dark .hn-path-cards__pill {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}
.is-dark .hn-path-cards__pill svg {
  stroke: var(--white);
}

/* ── Description ── */
.hn-path-cards__desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 94%;
}
.is-dark .hn-path-cards__desc {
  color: var(--muted-on-dark-body);
}

/* ── Tiles ── */
.hn-path-cards__tiles {
  align-self: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
.hn-path-cards__tiles--1 { grid-template-columns: 1fr; }
.hn-path-cards__tiles--2 { grid-template-columns: repeat(2, 1fr); }
.hn-path-cards__tiles--3 { grid-template-columns: repeat(3, 1fr); }

.hn-path-cards__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  padding: 22px;
  text-decoration: none;
  transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
/* Light-card tiles */
.hn-path-cards__card:not(.is-dark) .hn-path-cards__tile {
  background: var(--white);
  border: 1.5px solid var(--border);
}
a.hn-path-cards__tile:hover {
  transform: translateY(-2px);
}
.hn-path-cards__card:not(.is-dark) a.hn-path-cards__tile:hover {
  border-color: var(--border-strong);
}
/* Dark-card tiles */
.is-dark .hn-path-cards__tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.is-dark a.hn-path-cards__tile:hover {
  border-color: rgba(255, 255, 255, 0.34);
}

/* Primary tile: fuchsia accent on light, yellow accent on dark */
.hn-path-cards__card:not(.is-dark) .hn-path-cards__tile--primary {
  border: 2px solid var(--fuchsia);
  box-shadow: 0 8px 24px rgba(228, 93, 191, 0.14);
}
.is-dark .hn-path-cards__tile--primary {
  border: 2px solid var(--yellow);
}

/* Add-on tile: quieter, muted price */
.hn-path-cards__card:not(.is-dark) .hn-path-cards__tile--addon {
  background: var(--white);
  border: 1.5px solid var(--border);
}

/* Tile flag (primary accent pill; add-on / standard muted badge).
   Sits astride the tile's top border rather than inside the tile. */
.hn-path-cards__tile-flag {
  position: absolute;
  top: -11px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  /* default (standard / add-on) = muted badge */
  background: var(--bg);
  color: var(--muted);
}
.is-dark .hn-path-cards__tile-flag {
  background: rgba(255, 255, 255, 0.12);
  color: var(--muted-on-dark-strong);
}
/* primary flag = accent fill */
.hn-path-cards__card:not(.is-dark) .hn-path-cards__tile--primary .hn-path-cards__tile-flag {
  background: var(--fuchsia);
  color: var(--white);
}
.is-dark .hn-path-cards__tile--primary .hn-path-cards__tile-flag {
  background: var(--yellow);
  color: var(--navy);
}

.hn-path-cards__tile-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--navy);
}
.is-dark .hn-path-cards__tile-name {
  color: var(--white);
}
.hn-path-cards__tile-price {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--navy);
}
/* Shrink the leading currency symbol so the heavy face is not oversized (Decision 069) */
.hn-path-cards__currency {
  font-size: 0.6em;
}
.is-dark .hn-path-cards__tile-price {
  color: var(--white);
}
/* Add-on price reads muted */
.hn-path-cards__tile--addon .hn-path-cards__tile-price {
  color: var(--muted);
}
.is-dark .hn-path-cards__tile--addon .hn-path-cards__tile-price {
  color: var(--muted-on-dark-body);
}
.hn-path-cards__tile-unit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 6px;
  color: var(--muted);
}
.is-dark .hn-path-cards__tile-unit {
  color: var(--muted-on-dark-body);
}
.hn-path-cards__tile-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.is-dark .hn-path-cards__tile-desc {
  color: var(--muted-on-dark-body);
}
.hn-path-cards__tile-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 16px;
  color: var(--ruby);
}
.is-dark .hn-path-cards__tile-more {
  color: var(--white);
}
.hn-path-cards__tile-more svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
a.hn-path-cards__tile:hover .hn-path-cards__tile-more svg {
  transform: translateX(3px);
}

/* ── Reassurance (rich text) ── */
.hn-path-cards__reassure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.is-dark .hn-path-cards__reassure {
  color: var(--muted-on-dark-body);
}
.hn-path-cards__reassure svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Rich-text body: strip default paragraph margins, tint the bolded run */
.hn-path-cards__reassure-text > :first-child { margin-top: 0; }
.hn-path-cards__reassure-text > :last-child { margin-bottom: 0; }
.hn-path-cards__reassure-text b,
.hn-path-cards__reassure-text strong {
  font-weight: 700;
  color: var(--navy);
}
.is-dark .hn-path-cards__reassure-text b,
.is-dark .hn-path-cards__reassure-text strong {
  color: var(--white);
}

/* ── Footer ── */
.hn-path-cards__foot {
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Highlights toggle */
.hn-path-cards__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}
.hn-path-cards__toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Leading affordance icon (info / star): quiet, sits before the label */
.hn-path-cards__toggle-icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
}
/* Chevron: only this icon rotates when the drawer opens */
.hn-path-cards__toggle-chevron {
  width: 15px;
  height: 15px;
  transition: transform 0.25s;
}
.hn-path-cards__toggle[aria-expanded="true"] .hn-path-cards__toggle-chevron {
  transform: rotate(180deg);
}
/* Link style */
.hn-path-cards__toggle--link {
  background: transparent;
  border: none;
  padding: 6px 2px;
  color: var(--ruby);
}
.is-dark .hn-path-cards__toggle--link {
  color: var(--yellow);
}
/* Button (outline) style */
.hn-path-cards__toggle--button {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 30px;
  padding: 9px 18px;
  color: var(--navy);
}
.is-dark .hn-path-cards__toggle--button {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

/* ── CTA button ── */
/* min-width equalises the two cards' CTAs so a short label ("Enquire") carries
   the same weight as a longer one ("Sign up free"); text is centred within it.
   The link CTA is an <a> and the modal CTA is a <button>, so the box model is
   normalised (box-sizing, line-height, appearance, margin) to keep both the
   same height. */
.hn-path-cards__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-width: 168px;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 30px;
  padding: 13px 30px;
  text-decoration: none;
  border: 2px solid transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: filter 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.hn-path-cards__cta:hover {
  filter: brightness(1.1);
}
/* Fill variants */
.hn-path-cards__cta--fill.hn-path-cards__cta--navy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.hn-path-cards__cta--fill.hn-path-cards__cta--fuchsia {
  background: var(--fuchsia);
  border-color: var(--fuchsia);
  color: var(--white);
}
.hn-path-cards__cta--fill.hn-path-cards__cta--ruby {
  background: var(--ruby);
  border-color: var(--ruby);
  color: var(--white);
}
.hn-path-cards__cta--fill.hn-path-cards__cta--white {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
/* Outline variants */
.hn-path-cards__cta--outline {
  background: transparent;
}
.hn-path-cards__cta--outline.hn-path-cards__cta--navy {
  border-color: var(--navy);
  color: var(--navy);
}
.hn-path-cards__cta--outline.hn-path-cards__cta--fuchsia {
  border-color: var(--fuchsia);
  color: var(--fuchsia);
}
.hn-path-cards__cta--outline.hn-path-cards__cta--ruby {
  border-color: var(--ruby);
  color: var(--ruby);
}
.hn-path-cards__cta--outline.hn-path-cards__cta--white {
  border-color: var(--white);
  color: var(--white);
}

/* ── Highlights drawer ── */
.hn-path-cards__drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.hn-path-cards__drawer.is-open {
  max-height: 1000px;
}
.hn-path-cards__hl {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
  border-radius: 24px;
  padding: 32px 36px;
}
.hn-path-cards__hl[hidden] {
  display: none;
}
/* Drawer adopts the triggering card's exact background */
.hn-path-cards__hl--white {
  background: var(--white);
  border: 1px solid var(--border);
}
.hn-path-cards__hl--cream {
  background: var(--bg-cream);
  border: 1px solid var(--border);
}
.hn-path-cards__hl--dark-navy   { background: var(--navy); }
.hn-path-cards__hl--dark-grey   { background: var(--dark-grey); }
.hn-path-cards__hl--dark-orange { background: var(--tiger-deep); }

.hn-path-cards__hl-text {
  flex: 1;
  min-width: 260px;
  max-width: 380px;
}
.hn-path-cards__hl-intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.hn-path-cards__hl.is-dark .hn-path-cards__hl-intro {
  color: var(--muted-on-dark-body);
}
.hn-path-cards__hl-intro p { margin: 0 0 8px; }
.hn-path-cards__hl-intro p:last-child { margin-bottom: 0; }

.hn-path-cards__hl-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--bg-tint-green);
  color: var(--navy);
}
.hn-path-cards__hl-note svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--green-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hn-path-cards__hl.is-dark .hn-path-cards__hl-note {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-on-dark-strong);
}
.hn-path-cards__hl.is-dark .hn-path-cards__hl-note svg {
  stroke: var(--yellow);
}

.hn-path-cards__hl-stats {
  flex: 2;
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
}
.hn-path-cards__hl-stat {
  min-width: 118px;
}
/* Auto stat colour: ruby on light cards, yellow on dark cards */
.hn-path-cards__hl-stat-value {
  display: block;
  font-size: 42px;
  line-height: 1;
  color: var(--ruby);
}
.hn-path-cards__hl.is-dark .hn-path-cards__hl-stat-value {
  color: var(--yellow);
}
/* Editor-chosen stat number colour. The doubled block class raises specificity
   to (0,3,0) so it ties the is-dark auto rule and, being later, wins. */
.hn-path-cards__hl.hn-path-cards__hl--stat-ruby    .hn-path-cards__hl-stat-value { color: var(--ruby); }
.hn-path-cards__hl.hn-path-cards__hl--stat-fuchsia .hn-path-cards__hl-stat-value { color: var(--fuchsia); }
.hn-path-cards__hl.hn-path-cards__hl--stat-violet  .hn-path-cards__hl-stat-value { color: var(--violet); }
.hn-path-cards__hl.hn-path-cards__hl--stat-green   .hn-path-cards__hl-stat-value { color: var(--green); }
.hn-path-cards__hl.hn-path-cards__hl--stat-tiger   .hn-path-cards__hl-stat-value { color: var(--tiger); }
.hn-path-cards__hl.hn-path-cards__hl--stat-yellow  .hn-path-cards__hl-stat-value { color: var(--yellow); }
.hn-path-cards__hl.hn-path-cards__hl--stat-navy    .hn-path-cards__hl-stat-value { color: var(--navy); }
.hn-path-cards__hl.hn-path-cards__hl--stat-white   .hn-path-cards__hl-stat-value { color: var(--white); }

.hn-path-cards__hl-stat-label {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
  max-width: 160px;
  color: var(--navy);
}
.hn-path-cards__hl.is-dark .hn-path-cards__hl-stat-label {
  color: var(--muted-on-dark-strong);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hn-path-cards__heading { font-size: 32px; }

  .hn-path-cards__grid,
  .hn-path-cards__grid--cols-1,
  .hn-path-cards__grid--cols-2,
  .hn-path-cards__grid--cols-3 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .hn-path-cards__card {
    grid-row: auto;
    grid-template-rows: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .hn-path-cards__is-empty { display: none; }
  .hn-path-cards__foot { align-self: auto; }

  /* Mobile: module.js moves each highlights panel out of the shared drawer to
     sit directly after its own card inside the grid, so it reveals in place
     rather than below the last card. As a grid child the panel already gets the
     grid row-gap, so its own top margin is dropped to avoid a doubled gap. */
  .hn-path-cards__grid > .hn-path-cards__hl {
    margin-top: 0;
  }
}

/* Subgrid fallback for browsers without subgrid support */
@supports not (grid-template-rows: subgrid) {
  .hn-path-cards__grid { grid-template-rows: none; }
  .hn-path-cards__card {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .hn-path-cards__is-empty { display: none; }
}

@media (max-width: 680px) {
  .hn-path-cards--pt-default { padding-top: 48px; }
  .hn-path-cards--pt-loose   { padding-top: 68px; }
  .hn-path-cards--pb-default { padding-bottom: 48px; }
  .hn-path-cards--pb-loose   { padding-bottom: 68px; }
  .hn-path-cards__heading { font-size: 28px; }
  .hn-path-cards__tiles,
  .hn-path-cards__tiles--2,
  .hn-path-cards__tiles--3 {
    grid-template-columns: 1fr;
  }
  .hn-path-cards__foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }
  .hn-path-cards__cta { width: 100%; }
  .hn-path-cards__toggle { justify-content: center; }
  .hn-path-cards__hl {
    gap: 24px;
    padding: 24px;
  }
  .hn-path-cards__hl-stats { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-path-cards__drawer,
  .hn-path-cards__toggle svg,
  .hn-path-cards__tile,
  .hn-path-cards__tile-more svg {
    transition: none;
  }
}