/* ==========================================================================
   CrysMed — Corporate Healthcare page
   Extends version2's tokens + main.css. Reuses .page-header / .page-searchzone
   / .plan-grid / .process-band / .process-track / .stat-panel / .support-band
   from main.css.
   ========================================================================== */

.primary-nav a.is-current { color: var(--ink-900); border-color: var(--brand-700); }
.page-searchzone--notrow .hero__trustrow { margin-bottom: 0; }

/* Programme cards here show a headcount range + description instead of a
   price — reuse .plan-card's shape, just relabel visually via these hooks. */
.plan-card__price { font-size: var(--fs-sm); }
.plan-card--solid .link-go.plan-card__link--onSolid { color: var(--white); }
.plan-card--solid .link-go.plan-card__link--onSolid:hover { color: rgba(255,255,255,.8); }

/* .tick-grid base now lives in main.css — shared with Home Healthcare
   (no longer used on this page — replaced by .network-grid below). */

/* ---------------------------------------------------------------------
   Hero badge (floating card over the hero photo)
   --------------------------------------------------------------------- */

.page-header__media { position: relative; }
.hero-badge {
  position: absolute;
  right: var(--sp-4);
  bottom: calc(-1 * var(--sp-4));
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.hero-badge__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-badge__icon svg { width: 18px; height: 18px; }
.hero-badge b { font-size: .75rem; font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); }

/* ---------------------------------------------------------------------
   Trust strip
   --------------------------------------------------------------------- */

.corp-trust-strip { border-bottom: 1px solid var(--line); }
.corp-trust-strip .container { padding-block: var(--sp-5) var(--sp-4); }
.corp-trust-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.corp-trust-strip__grid > div { display: flex; align-items: center; gap: var(--sp-3); }
.corp-trust-strip__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.corp-trust-strip__icon svg { width: 19px; height: 19px; }
.corp-trust-strip__grid b { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); }

@media (max-width: 720px) {
  .corp-trust-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Pricing tier icon stepper
   --------------------------------------------------------------------- */

.tier-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--sp-4); }
.tier-stepper__step { display: flex; justify-content: center; position: relative; }
.tier-stepper__step::before {
  content: "";
  position: absolute;
  top: 50%; left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
}
.tier-stepper__step:first-child::before { display: none; }
.tier-stepper__icon {
  position: relative;
  z-index: 1;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tier-stepper__icon svg { width: 19px; height: 19px; }

@media (max-width: 720px) {
  .tier-stepper { display: none; }
}

/* ---------------------------------------------------------------------
   One coordinated corporate healthcare network
   --------------------------------------------------------------------- */

.network-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.network-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.network-card:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.network-card img { width: 38%; flex-shrink: 0; aspect-ratio: 1 / 1; object-fit: cover; }
.network-card > div { padding: var(--sp-3); display: flex; flex-direction: column; justify-content: center; }
.network-card b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); margin-bottom: 4px; }
.network-card span { font-size: .75rem; color: var(--ink-500); line-height: var(--lh-snug); }

@media (max-width: 900px) {
  .network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .network-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .network-grid::-webkit-scrollbar { display: none; }
  .network-grid > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* ---------------------------------------------------------------------
   Corporate healthcare providers (ported from providers.css's .provcard —
   the site's established provider-card component)
   --------------------------------------------------------------------- */

.prov-grid--6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.provcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.provcard:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.provcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface); }
.provcard__media .placeholder-img { font-size: .625rem; }
.provcard__ribbon {
  position: absolute;
  top: var(--sp-2); left: var(--sp-2);
  z-index: 1;
  background: var(--accent-500);
  color: var(--white);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.provcard__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; gap: 2px; }
.provcard__verified { display: inline-flex; align-items: center; gap: 4px; font-size: .625rem; font-weight: var(--fw-bold); color: var(--success); margin-bottom: var(--sp-1); }
.provcard__verified svg { width: 11px; height: 11px; flex-shrink: 0; }
.provcard__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); line-height: var(--lh-snug); }
.provcard__meta { font-size: .6875rem; color: var(--ink-500); margin-bottom: var(--sp-3); }
.provcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.provcard__tags li { font-size: .625rem; font-weight: var(--fw-medium); color: var(--ink-700); background: var(--surface-2); padding: 3px 8px; border-radius: var(--r-sm); }
.provcard__link { font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-900); margin-top: auto; }
.provcard__link:hover { color: var(--brand-700); }

/* CrysMed's own card — visually distinct so it reads as the "recommended
   default" among third-party partner providers */
.provcard--crysmed { border-color: var(--brand-700); box-shadow: 0 0 0 1px var(--brand-700); }
.provcard--crysmed .provcard__ribbon { background: var(--brand-700); }

.prov-suggest {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  flex-wrap: wrap;
}
.prov-suggest > svg { width: 34px; height: 34px; color: var(--brand-700); flex-shrink: 0; }
.prov-suggest > div { flex: 1; min-width: 220px; }
.prov-suggest b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); }
.prov-suggest span { font-size: .75rem; color: var(--ink-500); }

@media (max-width: 1180px) {
  .prov-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .prov-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .prov-grid--6 {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prov-grid--6::-webkit-scrollbar { display: none; }
  .prov-grid--6 > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* ---------------------------------------------------------------------
   From requirement to measurable outcome
   --------------------------------------------------------------------- */

.outcome-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.outcome-main h2 { margin-bottom: var(--sp-4); }
.outcome-track { display: flex; flex-direction: column; }
.outcome-track li { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-3); position: relative; }
.outcome-track li:last-child { padding-bottom: 0; }
.outcome-track__num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--white);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.outcome-track li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 26px; left: 13px;
  width: 2px;
  height: calc(100% - 26px);
  background: var(--line-strong);
}
.outcome-track b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); }
.outcome-track span { font-size: .75rem; color: var(--ink-500); }
.outcome-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }

@media (max-width: 900px) {
  .outcome-layout { grid-template-columns: minmax(0, 1fr); }
  .outcome-media { order: -1; }
}

/* ---------------------------------------------------------------------
   Reporting that supports better decisions
   --------------------------------------------------------------------- */

.reporting-band { background: var(--surface); border-block: 1px solid var(--line); }
.reporting-band .container { padding-block: var(--sp-5); }
.reporting-layout { display: grid; grid-template-columns: .75fr 2fr; gap: var(--sp-5); align-items: start; }
.reporting-intro h2 { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin-bottom: var(--sp-2); line-height: var(--lh-snug); }
.reporting-intro p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); margin-bottom: var(--sp-3); }
.reporting-confidential {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}
.reporting-confidential svg { width: 18px; height: 18px; color: var(--brand-700); flex-shrink: 0; }

.reporting-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.reporting-stats > div { background: var(--white); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.reporting-stats span { display: block; font-size: .6875rem; color: var(--ink-500); margin-bottom: 2px; }
.reporting-stats b { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); }

.reporting-charts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }
.chart-card { background: var(--white); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.chart-card > b { display: block; font-size: .75rem; font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: var(--sp-2); }

.line-chart { width: 100%; height: auto; color: var(--brand-700); }
.line-chart__grid { stroke: var(--line); stroke-width: 1; }
.line-chart__axis { fill: var(--ink-500); font-size: 9px; font-family: var(--font); }
.line-chart__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.line-chart__dot { fill: var(--white); stroke: currentColor; stroke-width: 2; }

.dept-bars { display: flex; flex-direction: column; gap: 7px; }
.dept-bar { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: var(--sp-2); }
.dept-bar span { font-size: .6875rem; color: var(--ink-700); }
.dept-bar__track { height: 7px; border-radius: var(--r-full); background: var(--surface); overflow: hidden; }
.dept-bar__fill { height: 100%; border-radius: var(--r-full); background: var(--brand-700); }
.dept-bar em { font-style: normal; font-size: .6875rem; font-weight: var(--fw-bold); color: var(--ink-900); text-align: right; }

.chart-card--download { display: flex; flex-direction: column; }
.download-item { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.download-item__icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--brand-tint);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.download-item__icon svg { width: 16px; height: 16px; }
.download-item div b { display: block; font-size: .6875rem; font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); }
.download-item div span { font-size: .625rem; color: var(--ink-500); }
.download-link { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-900); margin-top: auto; }
.download-link svg { width: 15px; height: 15px; }
.download-link:hover { color: var(--brand-700); }

@media (max-width: 1080px) {
  .reporting-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .reporting-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reporting-charts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Programmes shaped by your sector
   --------------------------------------------------------------------- */

.sector-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
.sector-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sector-card__icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.sector-card__icon svg { width: 20px; height: 20px; }
.sector-card b { font-size: .75rem; font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); }
.sector-card span { font-size: .6875rem; color: var(--ink-500); line-height: var(--lh-snug); }

@media (max-width: 980px) {
  .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Why CrysMed
   --------------------------------------------------------------------- */

.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.why-item span { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--brand-500); letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-1); }
.why-item b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: 2px; }
.why-item p { font-size: .75rem; color: var(--ink-500); line-height: var(--lh-relaxed); }

@media (max-width: 720px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* ---------------------------------------------------------------------
   Lead-gen form
   --------------------------------------------------------------------- */

.lead-band { background: var(--ink-900); }
.lead-band .container { padding-block: var(--sp-6); }
.lead-band__grid { display: grid; grid-template-columns: .8fr 1.3fr; gap: var(--sp-6); align-items: start; }
.lead-band__copy h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--white); margin-bottom: var(--sp-3); }
.lead-band__copy ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.lead-band__copy li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: rgba(255,255,255,.85); }
.lead-band__copy svg { width: 17px; height: 17px; color: var(--brand-500); flex-shrink: 0; }

.lead-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.lead-form__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.lead-form__objectives { grid-column: span 3; }
.lead-form .field { color: var(--white); }
.lead-form__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-1); }
.lead-form__fine { display: flex; align-items: center; gap: 6px; font-size: .6875rem; color: rgba(255,255,255,.55); }
.lead-form__fine svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 1080px) {
  .lead-band__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lead-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-form__objectives { grid-column: span 2; }
}
@media (max-width: 560px) {
  .lead-form__fields { grid-template-columns: minmax(0, 1fr); }
  .lead-form__objectives { grid-column: span 1; }
}