/* ==========================================================================
   HTIP - Healthcare Technology Intelligence Platform
   Public website stylesheet

   Token architecture: primitive -> semantic -> component.
   No raw hex values appear below the primitive layer.

   FONT NOTE: the product uses DM Sans. Loading it from Google Fonts is an
   external connection and is NOT enabled by default. To enable it, uncomment
   the @import on the next line. The site renders correctly either way.
   ========================================================================== */

/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap'); */

/* --------------------------------------------------------------------------
   1. PRIMITIVE TOKENS - raw values, referenced only by the semantic layer
   -------------------------------------------------------------------------- */
:root {
  /* Approved HTIP identity colours */
  --navy-900: #07182D;
  --blue-600: #245BDB;
  --blue-700: #1C49B0;
  --teal-600: #1296A8;

  /* Derived neutrals, tuned for contrast against white */
  --navy-800: #0F2340;
  --navy-700: #1B3357;
  --slate-700: #3D4A5C;
  --slate-600: #566274;
  --slate-400: #8A93A0;
  --slate-200: #D8DDE4;
  --slate-100: #EDF0F4;
  --slate-050: #F6F8FA;
  --white: #FFFFFF;

  /* Type */
  --font-stack: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Modular type scale, 1.25 ratio, 16px base */
  --size-xs: 0.875rem;    /* 14px - eyebrows, meta */
  --size-sm: 1rem;        /* 16px - captions */
  --size-base: 1.1875rem; /* 19px - body */
  --size-md: 1.375rem;    /* 22px - lead */
  --size-lg: 1.625rem;    /* 26px - h3 */
  --size-xl: 2.25rem;     /* 36px - h2 */
  --size-2xl: 2.75rem;    /* 44px - h1 */

  /* Spacing, 8px base */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --measure: 40rem;       /* readable line length */
  --page-max: 58rem;
  --radius: 4px;
}

/* --------------------------------------------------------------------------
   2. SEMANTIC TOKENS - purpose, not appearance
   -------------------------------------------------------------------------- */
:root {
  --color-ink: var(--navy-900);
  --color-ink-muted: var(--slate-700);
  --color-ink-faint: var(--slate-600);
  --color-accent: var(--blue-600);
  --color-accent-strong: var(--blue-700);
  --color-accent-quiet: var(--teal-600);   /* large text / rules / graphics ONLY - 3.53:1 on white */
  --color-surface: var(--white);
  --color-surface-alt: var(--slate-050);
  --color-surface-inverse: var(--navy-900);
  --color-ink-inverse: var(--white);
  --color-rule: var(--slate-200);
  --color-rule-quiet: var(--slate-100);

  --font-body: var(--font-stack);
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  --focus-ring: 3px solid var(--blue-600);
  --focus-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. COMPONENT TOKENS
   -------------------------------------------------------------------------- */
:root {
  --header-height: 4.5rem;
  --cta-bg: var(--color-accent);
  --cta-ink: var(--color-ink-inverse);
  --cta-bg-hover: var(--color-accent-strong);
  --card-border: var(--color-rule);
  --badge-ink: var(--color-ink-faint);
  --badge-bg: var(--color-surface-alt);
}

/* --------------------------------------------------------------------------
   4. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Suppressing transition duration alone does not prevent a transform from
     being applied - it only removes its animation. Movement and scale are
     therefore disabled explicitly. Border, shadow and background emphasis
     are retained so the interaction still reads. */
  .modcard:hover, .modcard:focus-within {
      transform: none !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  color: var(--color-ink);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--size-2xl); }
h2 { font-size: var(--size-xl); }
h3 { font-size: var(--size-lg); letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-2); max-width: var(--measure); }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cta-bg-hover); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface-inverse);
  color: var(--color-ink-inverse);
  padding: var(--space-1) var(--space-2);
  z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-1); }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section--alt { background: var(--color-surface-alt); }
.section--inverse {
  background: var(--color-surface-inverse);
  color: var(--color-ink-inverse);
}
.section--inverse h1,
.section--inverse h2,
.section--inverse h3 { color: var(--color-ink-inverse); }
.section--inverse p { color: rgba(255,255,255,0.82); }

.lead {
  font-size: var(--size-md);
  color: var(--color-ink-muted);
  line-height: var(--leading-snug);
}

.eyebrow {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-1);
}

/* --------------------------------------------------------------------------
   6. SIGNATURE ELEMENT
   The three-segment rule. Its proportions and colours are taken directly
   from the wordmark: navy H, blue T, teal I. It is the only decorative
   device on the site, and it is derived from the identity rather than
   invented for it.
   -------------------------------------------------------------------------- */
.rule {
  display: flex;
  width: 88px;
  height: 4px;
  margin: 0 0 var(--space-3);
  border-radius: 2px;
  overflow: hidden;
}
.rule span:nth-child(1) { flex: 3; background: var(--navy-900); }
.rule span:nth-child(2) { flex: 2; background: var(--blue-600); }
.rule span:nth-child(3) { flex: 1; background: var(--teal-600); }

.section--inverse .rule span:nth-child(1) { background: var(--white); }

/* --------------------------------------------------------------------------
   7. HEADER AND FOOTER
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--color-rule-quiet);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-height);
}
.site-header__logo img { width: 104px; }

.nav ul {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}
.nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--size-sm);
  font-weight: 500;
  padding: var(--space-1) 0;
  display: inline-block;
  min-height: 44px;
  line-height: 2.2;
}
.nav a:hover { color: var(--color-accent); }
.nav a[aria-current="page"] {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.site-footer {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-4);
  font-size: var(--size-sm);
  color: var(--color-ink-faint);
}
.site-footer p { max-width: none; }
.site-footer strong { color: var(--color-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--space-5) var(--space-5); }
.hero__mark { width: min(280px, 70vw); margin-bottom: var(--space-3); }
.hero h1 {
  /* Hero sizing is independent of the global type scale so the tablet size is
     not cut short by the 56rem scale breakpoint. Mobile 30px, tablet 34px,
     desktop 42px - the desktop value sits mid-band (40-44px approved) and
     holds the headline on two lines in the 627px hero text column. */
  font-size: 1.875rem;
  max-width: 30ch;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
.hero__positioning {
  /* 19px, inside the approved 18-20px band. Set explicitly rather than via
     --size-md so the rest of the site's lead type is unaffected. */
  font-size: 1.1875rem;
  color: var(--color-ink-muted);
  max-width: 46ch;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.hero__tagline {
  font-size: var(--size-base);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   9. CTA
   -------------------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-3);
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-weight: 600;
  font-size: var(--size-base);
  text-decoration: none;
  border-radius: var(--radius);
  border: 2px solid var(--cta-bg);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.cta:hover { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); color: var(--cta-ink); }

.cta--ghost {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-rule);
}
.cta--ghost:hover { background: var(--color-surface-alt); color: var(--cta-bg-hover); border-color: var(--color-accent); }

.section--inverse .cta {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--white);
}
.section--inverse .cta:hover { background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88); color: var(--navy-900); }

/* --------------------------------------------------------------------------
   10. FRAGMENT LIST - the problem section
   Sources are set as separated fragments to reflect what the copy says.
   Structure encoding content, not decoration.
   -------------------------------------------------------------------------- */
.fragments {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  max-width: var(--measure);
}
.fragments li {
  font-size: var(--size-sm);
  color: var(--color-ink-faint);
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-rule);
}

/* --------------------------------------------------------------------------
   11. CONSEQUENCE LIST
   -------------------------------------------------------------------------- */
.stack {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}
.stack li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule-quiet);
  color: var(--color-ink);
}
.stack li:first-child { border-top: 1px solid var(--color-rule-quiet); }

.section--inverse .stack li {
  color: var(--color-ink-inverse);
  border-color: rgba(255,255,255,0.16);
}
.section--inverse .stack li:first-child { border-top-color: rgba(255,255,255,0.16); }

/* --------------------------------------------------------------------------
   12. MODULE CARDS
   -------------------------------------------------------------------------- */
.pillar { margin-bottom: var(--space-5); }
.pillar__label {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-rule);
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--color-surface);
}
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}
.card h3 { margin: 0; font-size: var(--size-md); }
.card p { margin: 0; font-size: var(--size-sm); color: var(--color-ink-muted); }
.card__name { font-size: var(--size-sm); color: var(--color-ink-faint); font-weight: 500; }

.badge {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--badge-ink);
  background: var(--badge-bg);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* Maturity variants. The four modules are at different stages and must not
   read as equally mature. Differentiation uses ink weight, fill and border
   STYLE - not colour alone - so the distinction survives greyscale and
   colour-vision deficiency. Teal is never used as badge text. */
.badge--working {
  color: var(--blue-700);            /* 7.36:1 on white */
  background: rgba(36, 91, 219, 0.07);
  border-color: rgba(36, 91, 219, 0.38);
  font-weight: 700;
}
.badge--dev {
  color: var(--slate-700);           /* 8.79:1 on slate-050 */
  background: var(--color-surface-alt);
  border-color: var(--color-rule);
  font-weight: 600;
}
.badge--preview {
  color: var(--slate-600);           /* 5.92:1 on white */
  background: transparent;
  border-style: dashed;
  border-color: var(--slate-400);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   13. MODULE DETAIL BLOCKS - platform page
   -------------------------------------------------------------------------- */
.module {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.module:first-of-type { border-top: none; padding-top: var(--space-3); }
.module__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}
.module h2 { margin: 0; }
.module__claim {
  font-size: var(--size-md);
  color: var(--color-ink);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  max-width: 40ch;
}
.module__for {
  font-size: var(--size-sm);
  color: var(--color-ink-faint);
  border-left: 3px solid var(--color-rule);
  padding-left: var(--space-2);
  margin-top: var(--space-3);
}
.module__for strong { color: var(--color-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. VALUE LIST
   -------------------------------------------------------------------------- */
.values {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: grid;
  gap: var(--space-1);
  max-width: 44rem;
}
.values li {
  padding-left: var(--space-3);
  position: relative;
  color: var(--color-ink);
}
.values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 2px;
  background: var(--color-accent);
}

.qualifier {
  font-size: var(--size-sm);
  color: var(--color-ink-faint);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-2);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   15. NOTICE - pre-launch contact state
   -------------------------------------------------------------------------- */
.notice {
  border: 1px solid var(--color-rule);
  border-left: 4px solid var(--color-accent-quiet);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  padding: var(--space-3);
  max-width: var(--measure);
  margin-bottom: var(--space-3);
}
.notice__title {
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
.notice p:last-child { margin-bottom: 0; color: var(--color-ink-muted); }

/* --------------------------------------------------------------------------
   16. RESPONSIVE - mobile first, widening upward
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) {
  .hero h1 { font-size: 2.125rem; }
}

/* The hero splits into two columns from 56rem, so its text column stays narrow
   through the 1024px band. The 46px desktop size is therefore held back until
   76rem, where the column can carry the headline on two lines. Between 40rem
   and 76rem the tablet size applies, which is the approved band for that range. */
@media (min-width: 76rem) {
  .hero h1 { font-size: 2.625rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-4); }
}

@media (min-width: 56rem) {
  :root {
    --size-2xl: 3rem;
  }
  .wrap { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-7); }
}

@media (max-width: 34rem) {
  :root {
    --size-2xl: 2rem;
    --size-xl: 1.625rem;
  }
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-block: var(--space-2); }
  .nav ul { gap: var(--space-2); }
  .hero { padding-block: var(--space-5) var(--space-4); }
}

@media print {
  .site-header, .nav, .cta { display: none; }
  body { color: #000; }
}

/* ==========================================================================
   V2 ADDITIONS
   Hero composition, abstract intelligence panels, outcome blocks,
   pillar/module structure, partnership band.
   ========================================================================== */

/* --- Hero: two-column composition at wide widths ------------------------- */
:root { --page-max-wide: 86rem; }

.wrap--wide { max-width: var(--page-max-wide); margin-inline: auto; padding-inline: var(--space-3); }

/* Section introductions sit inside the 74rem wide container while paragraphs
   are capped at the 34rem reading measure, which leaves an unintended void to
   the right at desktop width. A slightly wider measure is used for intro
   copy only - still within a comfortable reading line, but no longer reading
   as an unfinished column. Body copy elsewhere keeps the 34rem measure.
   .prose-wide applies the same correction to the narrower .wrap pages. */
.intro-wide p,
.prose-wide p { max-width: 52rem; }
.intro-wide .lead,
.prose-wide .lead { max-width: 58rem; }
.prose-wide .stack { max-width: 46rem; }

/* A page-head section carries only an eyebrow, rule and title. Its own bottom
   padding plus the following section's top padding compounds into an
   oversized gap, so the head sheds most of its lower padding. The section
   that follows still supplies its full top padding, keeping the rhythm. */
.section--head { padding-block: var(--space-5) var(--space-2); }
.section--head + .section--tight { padding-top: var(--space-4); }

/* Prose pages carry short sections of running text rather than components.
   The default tight rhythm compounds into large voids between them, so these
   sections use a closer block padding. Mobile is unaffected in feel because
   the sections are full width and the copy reflows to fill them. */
.section--prose { padding-block: var(--space-4); }

.hero--split { padding-block: var(--space-6) var(--space-6); }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; }
.hero__copy .hero__mark { width: min(280px, 70vw); margin-bottom: var(--space-3); }

/* --- Abstract intelligence panels ---------------------------------------
   Brand illustration only. Non-functional, non-confidential, no values,
   no product interface. Generic labels. Marked "Illustrative" in the UI.
   ------------------------------------------------------------------------ */
.panels { position: relative; }
.panels svg { width: 100%; height: auto; display: block; }
/* Hero illustration. Decorative, so it carries an empty alt and is hidden from
   assistive technology. width/height attributes are set in the markup so the
   browser reserves space and the hero does not shift as it loads. */
.panels__image { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.panels__caption {
  font-size: var(--size-xs);
  color: var(--color-ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  text-align: right;
}

/* --- Outcome blocks ------------------------------------------------------ */
.outcomes { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.outcome { border-top: 2px solid var(--color-rule); padding-top: var(--space-2); }
.outcome h3 { font-size: var(--size-md); margin-bottom: var(--space-1); }
.outcome p { font-size: var(--size-sm); margin: 0; color: var(--color-ink-muted); max-width: none; }

/* --- Pillar / module structure (Platform) -------------------------------- */
/* Platform pillar headings introduce the two module sections beneath them. */
.pillar-head { border-top: 3px solid var(--color-accent); padding-bottom: var(--space-2); }
.pillar-head--ops { border-top-color: var(--color-accent-quiet); }
.pillar-head__label {
  font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-1); max-width: none;
}
.pillar-head__lede { font-size: var(--size-md); color: var(--color-ink); line-height: var(--leading-snug); max-width: 52rem; margin: 0; }
.pillar-band__label {
  font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-1);
}
.pillar-band__lede { font-size: var(--size-md); color: var(--color-ink); line-height: var(--leading-snug); max-width: 44ch; margin-bottom: var(--space-3); }


/* --- Partnership band ---------------------------------------------------- */
.band { padding-block: var(--space-5); }
.band__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
.band h2 { margin-bottom: var(--space-2); }
.band p { max-width: 44ch; }

/* --- Responsive ---------------------------------------------------------- */
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .outcomes { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); }
    .band__grid { grid-template-columns: 3fr 2fr; gap: var(--space-6); }
}

/* --------------------------------------------------------------------------
   17. PILLAR PANELS AND MODULE CARDS - home page
   The four modules are never presented as an unrelated catalogue. Each
   module sits inside its pillar panel, so the platform relationship is
   carried by the structure rather than by a repeated label on each card.
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.pillar-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}
.pillar-panel--ops { border-top-color: var(--color-accent-quiet); }

.pillar-panel__label {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
  max-width: none;
}
/* Teal measures 3.53:1 and is never used for text. The operational pillar is
   distinguished by its rule and tint, and its label stays on accent blue. */
.pillar-panel__lede {
  font-size: var(--size-base);
  color: var(--color-ink-muted);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
  max-width: 46ch;
}

.modgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

/* --- Module card --------------------------------------------------------- */
.modcard {
  background: var(--color-surface);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* Restrained elevation. Duration sits inside the 180-220ms band. The
     transition is declared on the base state so the card eases out as well
     as in, which is what makes the movement read as controlled. */
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease,
    background-color 200ms ease;
  will-change: transform;
}
.modcard--ops { border-left-color: var(--color-accent-quiet); }

.modcard__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-2);
}
.modcard__mark { width: 40px; height: 40px; flex: none; margin: 0; }
.modcard__ident { min-width: 0; }
.modcard h3 { font-size: var(--size-lg); margin: 0; line-height: var(--leading-tight); }
.modcard__full {
  font-size: var(--size-sm);
  color: var(--color-ink-muted);
  font-weight: 500;
  margin: 2px 0 0;
  max-width: none;
}
.modcard__rule {
  width: 100%;
  height: 1px;
  background: var(--color-rule);
  margin: 0 0 var(--space-2);
}
.modcard p.modcard__desc {
  font-size: var(--size-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-3);
  max-width: none;
  flex: 1;
}
.modcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: 100%;
}
.modcard__link {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.modcard__link:hover { color: var(--color-accent-strong); }

/* --- Emphasis ------------------------------------------------------------
   Split deliberately into two layers.

   LAYER 1 - border, tint and shadow - is applied with NO media query at all.
   Pointer media queries proved unreliable: a Windows machine with a
   touchscreen can report its pointer as coarse even when a mouse is attached,
   which suppressed the whole effect on that hardware. This layer therefore
   always works. It carries no movement, so a touch device that momentarily
   matches :hover on tap sees only a colour change, never a jump.

   LAYER 2 - movement and scale - is gated on (any-hover: hover), which asks
   whether ANY available input can hover. A mouse on a touch-enabled machine
   qualifies; a touch-only device does not and gets no transform.

   The card scales as a whole, so text and contents enlarge together and
   nothing reflows. z-index lifts it above its neighbours. Nothing essential
   is revealed on hover - the emphasis is reinforcement only. */
.modcard:hover,
.modcard:focus-within {
  z-index: 2;
  border-color: var(--color-accent);
  border-left-color: var(--color-accent-strong);
  background-color: rgba(36, 91, 219, 0.06);
  box-shadow: 0 16px 36px rgba(7, 24, 45, 0.18), 0 3px 8px rgba(7, 24, 45, 0.10);
}
.modcard--ops:hover,
.modcard--ops:focus-within {
  border-color: var(--color-accent-quiet);
  border-left-color: var(--color-accent-quiet);
  background-color: rgba(18, 150, 168, 0.075);
}

@media (any-hover: hover) {
  .modcard:hover,
  .modcard:focus-within {
    transform: translateY(-6px) scale(1.025);
  }
}

@media (min-width: 40rem) {
  .modgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  /* Two pillar panels side by side, each module card stacked within its
     panel. Panels stretch to equal height and each panel's grid uses equal
     rows, so all FOUR cards finish the same height. The lede is given a
     matching min-height so the two grids start on the same line. */
  .pillars { grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: stretch; }
  .pillar-panel { padding: var(--space-4); height: 100%; }
  .pillar-panel__lede { min-height: 3.2em; }
  .modgrid { grid-template-columns: 1fr; gap: var(--space-3); flex: 1; grid-auto-rows: 1fr; }
}

/* --------------------------------------------------------------------------
   18. MODULE DETAIL SECTIONS - platform page
   Concise overview cards on Home lead here via Explore links. Each module
   gets a full-width section with room to read: identity and status in a
   narrow aside, long-form copy in a wide column. Sections are NOT forced to
   equal height - their content legitimately differs.
   -------------------------------------------------------------------------- */
.modsec { padding-block: var(--space-5); border-top: 1px solid var(--color-rule-quiet); }
.modsec--alt { background: var(--color-surface-alt); }
/* Anchor targets must clear the header when an Explore link lands. */
.modsec[id] { scroll-margin-top: calc(var(--header-height) + var(--space-2)); }

.modsec__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.modsec__aside { border-left: 3px solid var(--color-accent); padding-left: var(--space-2); }
.modsec--ops .modsec__aside { border-left-color: var(--color-accent-quiet); }
.modsec__aside h2 { font-size: var(--size-xl); margin: 0 0 2px; }
.modsec__full {
  font-size: var(--size-sm); color: var(--color-ink-muted); font-weight: 500;
  margin: 0 0 var(--space-1); max-width: none;
}
.modsec__aside .badge { display: inline-block; margin-bottom: var(--space-2); }
.modsec__claim {
  font-size: var(--size-md); color: var(--color-ink); font-weight: 600;
  line-height: var(--leading-snug); margin: 0; max-width: none;
}
.modsec__body p { max-width: 58rem; }
.modsec__for {
  border-left: 2px solid var(--color-rule); padding-left: var(--space-2);
  font-size: var(--size-sm); color: var(--color-ink-muted); margin-top: var(--space-3);
}
.modsec__for strong { color: var(--color-ink); font-weight: 600; }

/* --- Lifecycle phases (MEPI) --------------------------------------------- */
.phase { margin: var(--space-4) 0; }
.phase__label {
  font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--color-ink); margin: 0 0 var(--space-2); max-width: none;
}
.phase__row {
  list-style: none; padding: 0; margin: 0 0 var(--space-2);
  display: grid; gap: var(--space-1);
  align-items: stretch;   /* every card the same height within its row */
}
.phase__item {
  border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent);
  border-radius: var(--radius); background: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  display: flex; flex-direction: column; justify-content: center;
}
/* Planned scope differs by border STYLE and surface, not colour alone. */
.phase__item--planned { border-style: dashed; border-top-color: var(--slate-400); background: transparent; }
.phase__name { display: block; font-size: var(--size-sm); font-weight: 700; color: var(--color-ink); line-height: var(--leading-snug); }
.phase__state { display: block; font-size: var(--size-xs); color: var(--color-ink-muted); margin-top: 2px; }
.phase__item--planned .phase__name { color: var(--color-ink-muted); }
.phase__item--cycle { border-top-color: var(--color-accent-quiet); text-align: center; padding: var(--space-2); }
.phase__item--cycle .phase__name { font-size: var(--size-sm); }
.phase__note { font-size: var(--size-sm); color: var(--color-ink-muted); margin: 0; max-width: 58rem; }

@media (min-width: 48rem) {
  .phase__row { grid-template-columns: repeat(4, 1fr); }
  .phase__row--five { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 64rem) {
  .modsec { padding-block: var(--space-6); }
  .modsec__grid { grid-template-columns: minmax(15rem, 1fr) 3fr; gap: var(--space-5); align-items: start; }
  .modsec__aside { position: sticky; top: calc(var(--header-height) + var(--space-2)); }
}

/* Contact email link. Underlined so it is identifiable without relying on
   colour, and sized for comfortable reading and tapping. */
.contact-email {
  font-size: var(--size-md);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.contact-email:hover { color: var(--cta-bg-hover); }
.site-footer .contact-email { font-size: inherit; font-weight: 600; }