/* mackasey-intelligence.html */
/* ==========================================================================
   MACKASEY INTELLIGENCE — capability page
   Same editorial system as the service detail pages: ivory ground, stone and
   charcoal statement bands, citron reserved for rules, bullets and one button.
   The two platform screenshots are the only new element; they are framed the
   way the coverage cards are framed, so they read as evidence rather than
   product marketing.
   ========================================================================== */

/* 1. SECTION RHYTHM — matched to the service detail pages ------------------ */
:root{
  --sec-y:    clamp(3.5rem, 6.4vw, 6.25rem);
  --sec-y-sm: clamp(2.7rem, 4.9vw, 4.75rem);
  --sec-y-xs: clamp(2.1rem, 3.6vw, 3.4rem);
}
.section--dark{ padding-block:clamp(2.95rem,5.4vw,5.15rem) }

/* 2. SHARED PAGE HELPERS --------------------------------------------------- */
.page-hero{ padding-block:clamp(2.2rem,3.9vw,3.8rem) clamp(1.65rem,2.9vw,2.75rem) }
.page-hero__grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.6rem,4vw,3.75rem); align-items:start;
}
.page-hero h1{ font-size:clamp(2rem,3.9vw,3.15rem); line-height:1.14; max-width:17ch }
.page-hero .accent{ margin-top:1.25rem; display:block; max-width:30ch }
.page-hero__body p{ color:var(--charcoal-mid); max-width:52ch }
.page-hero__body p + p{ margin-top:1.05rem }
.page-hero__body p:first-child{ font-size:var(--t-lead); color:var(--charcoal) }

.section h2{ font-size:clamp(1.6rem,2.7vw,2.15rem) }
.lede{ font-size:1.02rem; color:var(--charcoal-mid); max-width:62ch }
.lede + .lede{ margin-top:1rem }
.band-dark .lede{ color:var(--on-dark-soft) }
.section-body{ margin-bottom:clamp(1.7rem,3vw,2.5rem) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.6vw,2.4rem) }
.cap{ border-top:2px solid var(--citron); padding-top:1.1rem }
.cap h3{ font-size:1.1rem; margin-bottom:.5rem }
.cap p{ color:var(--charcoal-mid); font-size:.92rem }
.band-dark .cap p{ color:var(--on-dark-soft) }
.note-line{ margin-top:clamp(1.3rem,2.3vw,1.9rem); font-size:.95rem; color:var(--charcoal-mid); max-width:66ch }
.band-dark .note-line{ color:var(--on-dark-soft) }

/* 3. THE PLATFORM VISUAL --------------------------------------------------- */
/* A single hairline and a shallow lift — the same weight as the coverage
   cards. No browser chrome, no deep shadow: the screenshot is the subject. */
.shot{ margin:0 }
.shot img{
  width:100%; border:1px solid var(--line-stone);
  box-shadow:0 2px 4px rgba(29,31,30,.05), 0 14px 28px -20px rgba(29,31,30,.26);
}
.shot figcaption{
  margin-top:1.5rem; font-size:.8rem; color:var(--charcoal-soft);
  line-height:1.6; max-width:62ch;
}
.shot--platform{ margin-top:clamp(1.5rem,3vw,2.6rem) }
/* the dashboard is dense; give it the full measure and a little air below */
.shot--platform img{ background:var(--white) }

/* 4. THE OPPORTUNITY UNIVERSE ---------------------------------------------- */
/* Seven ecosystems is an awkward number for a card grid, so this is an index:
   one row per ecosystem, name in a fixed column, scope beside it. */
.universe{ border-bottom:1px solid var(--line-stone) }
.universe__row{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.35rem clamp(1.25rem,3vw,3rem);
  padding-block:clamp(.95rem,1.7vw,1.25rem);
  border-top:1px solid var(--line-stone);
}
.universe__row h3{ font-size:1.02rem; line-height:1.4; position:relative; padding-left:1rem }
.universe__row h3::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.42rem; height:.42rem; background:var(--citron);
}
.universe__row p{ color:var(--charcoal-mid); font-size:.93rem; max-width:56ch }

/* 5. BEYOND THE LIST ------------------------------------------------------- */
/* Copy and factors on the left, the opportunity panel on the right. The panel
   is tall and narrow, so it gets its own column rather than the full measure. */
/* The record is a demonstration now, not a redacted document, so it is sized to
   be read: full measure beneath the copy rather than squeezed into a column. */
.depth{ display:block }
.factors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(1.25rem,3vw,2.5rem) }
.factors li{
  font-size:.93rem; color:var(--charcoal-mid); line-height:1.5;
  padding:.62rem 0 .62rem 1rem; position:relative;
  border-top:1px solid var(--line-stone);
}
.factors li::before{
  content:""; position:absolute; left:0; top:1.02rem;
  width:.36rem; height:.36rem; background:var(--citron);
}
.emph{ color:var(--charcoal); font-weight:600 }
.shot--panel{
  max-width:48.5rem; margin:clamp(2.1rem,4vw,3.1rem) auto 0;
}
.shot--panel img{ background:var(--white) }
.shot--panel figcaption{ max-width:60ch }

/* 6. CLIENT VISIBILITY ----------------------------------------------------- */
.sees{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(1.5rem,3.5vw,3rem); max-width:58rem }
.sees li{
  font-size:.95rem; color:var(--charcoal-mid); line-height:1.5;
  padding:.7rem 0 .7rem 1.05rem; position:relative;
  border-top:1px solid var(--line-stone);
}
.sees li::before{
  content:""; position:absolute; left:0; top:1.12rem;
  width:.38rem; height:.38rem; background:var(--citron);
}

/* 7. RESPONSIVE ------------------------------------------------------------ */
@media (max-width:900px){
  .page-hero__grid{ grid-template-columns:1fr }
  .page-hero h1{ max-width:none; font-size:clamp(1.85rem,6.2vw,2.8rem) }
  .shot--panel{ max-width:30rem }
  .universe__row{ grid-template-columns:1fr; gap:.3rem }
  .universe__row p{ padding-left:1rem }
  .grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:620px){
  .grid-3{ grid-template-columns:1fr }
  .factors,.sees{ grid-template-columns:1fr }
}