/* ==========================================================================
   Medha Cloud — "One connected cloud. Many possibilities."
   --------------------------------------------------------------------------
   Built on the shared Blue Lily section grammar in home.css. This file holds
   the page's own compositions; none reproduces the home page's orbit,
   journey, network or rings:

     §1 Cloud Bloom        §2 Flow Into One       §3 tilted two-ring composition
     §4 S-shaped journey   §5 fine-line constellation
     §6 Clarity Lens       §7 Confidence Layers    §8 shared closing bloom

   Without JavaScript every composition is complete and both sectors show.
   Under prefers-reduced-motion everything is shown finished and still.
   ========================================================================== */

:root {
  --bl-midnight: #0B1630;
  --bl-deep-navy: #10264A;
  --bl-royal: #2563EB;
  --bl-electric: #4DA8FF;
  --bl-soft: #93C5FD;
  --bl-teal: #14B8A6;
  --bl-violet: #8B5CF6;
  --bl-off-white: #F8FAFC;
  --bl-slate: #475569;
}

/* ============================================================ §1 hero === */
.mc-hero {
  padding-block: var(--v2-pad-hero) var(--v2-pad);
  background-color: #0B1630;
  background-image:
    radial-gradient(55% 45% at 72% 88%, rgba(37, 99, 235, .34), transparent 70%),
    radial-gradient(38% 40% at 84% 18%, rgba(139, 92, 246, .16), transparent 70%),
    linear-gradient(165deg, #0B1630 0%, #10264A 62%, #162258 100%);
}
.mc-hero .crumbs { margin-bottom: clamp(18px, 2.6vw, 32px); color: #B7C8E2; }
.mc-hero .crumbs a { color: #C9D8EE; }
.mc-hero .crumbs a:hover { color: #FFFFFF; }
.mc-hero__split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.mc-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.035em;
  color: #FFFFFF;
  text-wrap: balance;
}
.mc-hero .v2-head > .petal-field { inset: -30% -10% -10%; }

.mc-bloom { position: relative; max-width: 640px; margin-inline: auto; width: 100%; }
.mc-bloom__stage {
  position: relative;
  aspect-ratio: 640 / 520;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.mc-bloom__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-horizon { fill: none; stroke: rgba(147, 197, 253, .32); stroke-width: 1.2; }
.mc-rise__track { fill: none; stroke: rgba(147, 197, 253, .12); stroke-width: 7; stroke-linecap: round; }
.mc-rise__line {
  fill: none; stroke: url(#mcRise); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.mc-rise__light { fill: #DBEAFE; }
.mc-cloud__puff { fill: url(#mcPuff); }
.mc-cloud__glow { animation: mc-breathe 6s ease-in-out infinite alternate; transform-origin: 320px 250px; }
.mc-cloud__petal { color: #93C5FD; opacity: .9; }
.mc-cloud__petal:nth-child(3n+2) { color: #818CF8; }
.mc-cloud__petal:nth-child(3n) { color: #60A5FA; }
.mc-cloud__heart { fill: #FFFFFF; }
.mc-cloud__bloom { transform-origin: 320px 244px; animation: mc-turn 90s linear infinite; }
.mc-glyph {
  position: absolute;
  left: var(--x); top: var(--y);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  translate: -50% -50%;
  border-radius: 14px;
  color: #C4B5FD;
  background: rgba(16, 26, 70, .82);
  border: 1px solid rgba(147, 197, 253, .28);
  box-shadow: 0 16px 34px -18px rgba(4, 10, 26, .9);
  animation: mc-float calc(6s + var(--i) * .7s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.1s);
}
.mc-glyph:nth-child(even) { color: #93C5FD; }
@keyframes mc-float { from { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 6px, 0); } }
@keyframes mc-breathe { from { opacity: .65; } to { opacity: 1; } }
@keyframes mc-turn { to { transform: rotate(360deg); } }


/* entrance: the cloud lights, the paths rise into it, the glyphs arrive */
.js .mc-rise__line { stroke-dashoffset: 1; }
.js .v2.is-in .mc-rise__line { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1) calc(.5s + var(--i) * .1s); }
.js .mc-cloud { opacity: 0; transform: scale(.92); transform-origin: 320px 250px; }
.js .v2.is-in .mc-cloud { opacity: 1; transform: none;
  transition: opacity 1.2s ease .15s, transform 1.4s cubic-bezier(.22, .61, .36, 1) .15s; }
.js .mc-glyph { opacity: 0; }
.js .v2.is-in .mc-glyph { opacity: 1; transition: opacity .9s ease calc(1.2s + var(--i) * .12s); }

/* =================================================== §2 flow into one === */
.mc-flow {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 250px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.mc-flow__streams {
  display: grid;
  grid-template-rows: repeat(5, 60px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-flow__stream {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 16px/1.2 var(--font-display);
  color: #0B1630;
}
.mc-flow__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  color: #1D4ED8;
  background: #EDF3FC;
}
.mc-flow__stream.is-lit .mc-flow__icon { color: #FFFFFF; background: #1D4ED8; }
.mc-flow__svg { width: 100%; height: 300px; overflow: visible; }
.mc-flow__track { fill: none; stroke: #DCE8FF; stroke-width: 5; stroke-linecap: round; }
.mc-flow__line {
  fill: none; stroke: url(#mcFlowLine); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.js .mc-flow__line { stroke-dashoffset: 1; }
.mc-flow__band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 24px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #4338CA 100%);
  box-shadow: 0 26px 50px -24px rgba(37, 99, 235, .7);
  transition: box-shadow .8s ease;
}
.mc-flow__band p { margin: 0; display: grid; }
.mc-flow__band strong { font: 700 20px/1.2 var(--font-display); }
.mc-flow__band span { font-size: 15px; color: #E8F0FE; }
.mc-flow__band.is-lit { box-shadow: 0 0 0 8px rgba(77, 168, 255, .16), 0 26px 50px -20px rgba(37, 99, 235, .9); }
.mc-flow__note {
  max-width: 44em;
  margin: clamp(28px, 3vw, 40px) auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
}
.mc-flow__note a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #1D4ED8; }

/* ========================================== the sector switch (§3, §4) === */
.mc-switch {
  position: relative;
  display: inline-flex;
  gap: 4px;
  margin-top: var(--space-6);
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, .26);
  background: rgba(11, 22, 48, .45);
}
.mc-switch__opt {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 15px/1 var(--font-display);
  letter-spacing: .01em;
  color: #C9D8EE;
  cursor: pointer;
  transition: color .4s ease;
}
.mc-switch__opt[aria-selected="true"] { color: #FFFFFF; }
.mc-switch__opt:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.mc-switch__light {
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563EB, #4F46E5);
  box-shadow: 0 0 24px rgba(77, 168, 255, .45);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), width .55s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.mc-switch.is-ready .mc-switch__light { opacity: 1; }
/* on light ground */
.v2--mist .mc-switch { border-color: rgba(37, 99, 235, .2); background: #FFFFFF; box-shadow: 0 10px 26px -18px rgba(11, 22, 48, .4); }
.v2--mist .mc-switch__opt { color: #475569; }
.v2--mist .mc-switch__opt[aria-selected="true"] { color: #FFFFFF; }
.v2--mist .mc-switch__opt:focus-visible { outline-color: #1D4ED8; }
/* without JavaScript both sectors show, so the switch has nothing to do */
html:not(.js) .mc-switch { display: none; }

/* =========================================== §3 two-ring capabilities === */
.mc-caps__head { max-width: 760px; }
.mc-caps {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 40px);
}
.mc-orbit {
  position: relative;
  aspect-ratio: 640 / 520;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.mc-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-orbit__ring { fill: none; stroke-width: 1.8; opacity: .95; }
.mc-orbit__ring--outer { stroke-width: 1.2; opacity: .6; stroke-dasharray: 2 7; }
.mc-orbit__thread { stroke: rgba(196, 181, 253, .22); stroke-width: 1; transition: stroke .4s ease, stroke-width .4s ease; }
.mc-orbit__thread.is-hot { stroke: rgba(221, 214, 254, .85); stroke-width: 1.6; }
.mc-orbit__petal { color: #93C5FD; opacity: .75; }
.mc-orbit__petal:nth-child(even) { color: #818CF8; }
.mc-orbit__bloom { transform-origin: 320px 262px; animation: mc-turn 120s linear infinite; }
.mc-orbit__nodes { list-style: none; margin: 0; padding: 0; }
.mc-node {
  position: absolute;
  left: var(--x); top: var(--y);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  translate: -50% -50%;
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, .24);
  background: rgba(11, 22, 48, .78);
  font: 600 14px/1.1 var(--font-display);
  color: #FFFFFF;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.mc-node__dot {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4DA8FF;
  box-shadow: 0 0 10px rgba(77, 168, 255, .9);
}
.mc-node--intel { font: 500 14px/1.1 var(--font-body); color: #EDE9FE; background: rgba(30, 27, 75, .8); border-color: rgba(196, 181, 253, .26); }
.mc-node--intel .mc-node__dot { background: #A78BFA; box-shadow: 0 0 10px rgba(167, 139, 250, .9); }
.mc-node:hover, .mc-node.is-active {
  border-color: rgba(191, 219, 254, .8);
  background: rgba(29, 78, 216, .55);
  box-shadow: 0 0 28px rgba(77, 168, 255, .35);
}
.mc-node--intel:hover, .mc-node--intel.is-active { background: rgba(91, 33, 182, .5); border-color: rgba(221, 214, 254, .8); }
.mc-node:focus-visible { outline: 3px solid #93C5FD; outline-offset: 3px; }

.mc-caps__detail {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 24px;
  background: rgba(16, 26, 70, .62);
  border: 1px solid rgba(147, 197, 253, .2);
  box-shadow: 0 30px 60px -36px rgba(4, 10, 26, .9);
}
.mc-detail + .mc-detail { margin-top: 10px; }
.mc-detail summary { list-style: none; cursor: pointer; }
.mc-detail summary::-webkit-details-marker { display: none; }
.mc-detail h3 { display: inline; margin: 0; font: 700 20px/1.25 var(--font-display); color: #FFFFFF; }
.mc-detail__kind {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #BFDBFE;
}
.mc-detail--intel .mc-detail__kind { color: #DDD6FE; }
.mc-detail__body p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: #C9D8EE; }
.mc-detail__body ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mc-detail__body li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; color: #E8F0FE; }
.mc-detail__body li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 7px; height: 7px;
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(135deg, #93C5FD, #A78BFA);
  transform: rotate(-45deg);
}
/* desktop with JavaScript: one detail at a time, set by the composition */
.mc-caps__detail.is-js .mc-detail { display: none; margin: 0; }
.mc-caps__detail.is-js .mc-detail.is-active { display: block; animation: mc-fade .45s ease both; }
.mc-caps__detail.is-js .mc-detail h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.mc-caps__detail.is-js summary { cursor: default; pointer-events: none; }
@keyframes mc-fade { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.mc-caps__links { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(147, 197, 253, .16); }
.mc-caps__links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #BFDBFE; }
.mc-caps__links a:hover { color: #FFFFFF; }

/* entrance */
.js .mc-orbit { opacity: 0; transform: scale(.96) rotate(-2deg); }
.js .v2.is-in .mc-orbit { opacity: 1; transform: none;
  transition: opacity 1.1s ease .2s, transform 1.3s cubic-bezier(.22, .61, .36, 1) .2s; }

/* ================================================= §4 S-shaped journey === */
.mc-journey__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.mc-journey__head .mc-switch { margin-top: 0; }
.mc-journey {
  position: relative;
  height: clamp(540px, 46vw, 640px);
  margin-top: clamp(28px, 3vw, 40px);
}
.mc-journey__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mc-journey__track { fill: none; stroke: #CFDDFB; stroke-width: 6; stroke-linecap: round; }
.mc-journey__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .mc-journey__line { stroke-dashoffset: 1; }
.mc-journey__runner use { color: #818CF8; }
.mc-journey__stages { list-style: none; margin: 0; padding: 0; }
.mc-stage {
  position: absolute;
  left: var(--x); top: var(--y);
  z-index: 1;
  width: min(19%, 216px);
  translate: -50% 0;
  padding: 10px 10px 16px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(37, 99, 235, .12);
  box-shadow: 0 26px 50px -30px rgba(11, 22, 48, .5);
  transition: border-color .5s ease, box-shadow .5s ease;
}
.mc-stage.is-lit { border-color: rgba(37, 99, 235, .45); box-shadow: 0 0 0 4px rgba(77, 168, 255, .12), 0 26px 50px -30px rgba(11, 22, 48, .5); }
.mc-stage__media { overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; margin-bottom: 12px; }
.mc-stage__media picture, .mc-stage__media img, .mc-stage__media .mc-insight { display: block; width: 100%; height: 100%; }
.mc-stage__media img { object-fit: cover; }
.mc-stage__media .ms-placeholder { border-radius: 12px; aspect-ratio: 4 / 3; }
.mc-stage__num { margin: 0 6px 2px; font: 600 13px/1 var(--font-body); letter-spacing: .12em; color: #1D4ED8; }
.mc-stage h3 { margin: 0 6px 4px; font: 600 17px/1.25 var(--font-display); color: #0B1630; }
.mc-stage p:not(.mc-stage__num) { margin: 0 6px; font-size: 15px; line-height: 1.5; color: #475569; }
.js .mc-stage { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .v2.is-in .mc-stage { opacity: 1; transform: none;
  transition: opacity .7s ease calc(.2s + var(--i) * .1s), transform .8s cubic-bezier(.22, .61, .36, 1) calc(.2s + var(--i) * .1s),
              border-color .5s ease, box-shadow .5s ease; }

/* ============================================== §5 fine-line constellation === */
.mc-intel__split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.mc-constellation { position: relative; aspect-ratio: 600 / 440; }
.mc-constellation__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-constellation__edge { stroke: rgba(147, 197, 253, .22); stroke-width: 1; transition: stroke .4s ease, stroke-width .4s ease; }
.mc-constellation__edge.is-hot { stroke: rgba(221, 214, 254, .9); stroke-width: 1.8; }
.mc-constellation__dot { fill: #93C5FD; opacity: .5; }
.mc-constellation__pulse { fill: #DDD6FE; }
.mc-constellation__stars { list-style: none; margin: 0; padding: 0; }
.mc-star {
  position: absolute;
  left: var(--x); top: var(--y);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  translate: -50% -12px;
  padding: 4px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: 600 14px/1.2 var(--font-display);
  color: #E8F0FE;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: 0 0 8px #0F1437, 0 0 2px #0F1437;
}
.mc-star__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 25%, #A78BFA 45%, rgba(139, 92, 246, .2) 75%);
  box-shadow: 0 0 16px rgba(167, 139, 250, .8);
  transition: transform .4s cubic-bezier(.34, 1.4, .64, 1), box-shadow .4s ease;
}
.mc-star:nth-child(odd) .mc-star__dot { background: radial-gradient(circle, #FFFFFF 0 25%, #4DA8FF 45%, rgba(77, 168, 255, .2) 75%); }
.mc-star:hover .mc-star__dot, .mc-star.is-active .mc-star__dot { transform: scale(1.45); box-shadow: 0 0 26px rgba(196, 181, 253, 1); }
.mc-star:hover, .mc-star.is-active { color: #FFFFFF; }
.mc-star:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.mc-intel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px clamp(20px, 3vw, 40px);
  margin: clamp(28px, 3vw, 44px) 0 0;
}
.mc-intel__item { padding-top: 14px; border-top: 1px solid rgba(147, 197, 253, .2); transition: border-color .4s ease; }
.mc-intel__item dt { font: 600 17px/1.3 var(--font-display); color: #FFFFFF; }
.mc-intel__item dd { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #C9D8EE; }
.mc-intel__item.is-hot { border-top-color: #C4B5FD; }
.js .mc-star { opacity: 0; }
.js .v2.is-in .mc-star { opacity: 1; transition: opacity .8s ease calc(.6s + var(--i, 0) * .1s); }

/* ======================================================== §6 clarity lens === */
.mc-lens { margin: 0; }
.mc-lens svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 24px 60px -28px rgba(11, 22, 48, .4), 0 0 0 1px rgba(37, 99, 235, .08);
}
.mc-lens__ground { fill: #F2F6FF; }
.mc-lens__scatter circle {
  fill: #93C5FD;
  opacity: .75;
  animation: mc-drift 7s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.6s);
}
.mc-lens__scatter circle:nth-child(3n) { fill: #A5B4FC; }
@keyframes mc-drift { from { transform: translate3d(-3px, 2px, 0); } to { transform: translate3d(4px, -4px, 0); } }
.mc-lens__rays path { fill: none; stroke: url(#mcLensRay); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mc-lens__halo { fill: rgba(147, 197, 253, .18); }
.mc-lens__rim { fill: none; stroke: rgba(37, 99, 235, .35); stroke-width: 2; }
.mc-lens__petal { opacity: .8; }
.js .mc-lens__rays path { stroke-dashoffset: 1; }
.js .v2.is-in .mc-lens__rays path { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) calc(.6s + var(--i) * .15s); }

/* =================================================== §7 confidence layers === */
.mc-layers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.mc-layers__svg { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; overflow: visible; }
.mc-layer__shape {
  stroke: #93C5FD;
  stroke-opacity: .75;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  fill: rgba(37, 99, 235, .22);
}
.mc-layer__shape:nth-of-type(2) { fill: rgba(59, 130, 246, .30); stroke: #A5B4FC; }
.mc-layer__shape:nth-of-type(3) { fill: rgba(139, 92, 246, .42); stroke: #DDD6FE; }
.mc-layers__labels { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.mc-layer__label { padding-left: 16px; border-left: 2px solid rgba(147, 197, 253, .35); transition: border-color .6s ease; }
.mc-layer__label h3 { margin: 0 0 4px; font: 600 18px/1.25 var(--font-display); color: #FFFFFF; }
.mc-layer__label p { margin: 0; font-size: 15px; line-height: 1.55; color: #C9D8EE; }
/* the layers glow in turn, outside in, then breathe */
.js .mc-layer__shape { opacity: .25; }
.js .v2.is-in .mc-layer__shape {
  opacity: 1;
  transition: opacity 1s ease calc(.3s + var(--i) * .35s);
  animation: mc-layer 7s ease-in-out calc(1.6s + var(--i) * .9s) infinite alternate;
}
@keyframes mc-layer { from { opacity: 1; } to { opacity: .72; } }
.js .mc-layer__label { opacity: 0; transform: translate3d(12px, 0, 0); }
.js .v2.is-in .mc-layer__label { opacity: 1; transform: none; border-left-color: #93C5FD;
  transition: opacity .7s ease calc(.4s + var(--i) * .35s), transform .8s cubic-bezier(.22, .61, .36, 1) calc(.4s + var(--i) * .35s),
              border-color .6s ease calc(.4s + var(--i) * .35s); }

/* ========================================================= responsive === */
@media (max-width: 1280px) {
  /* laptop: the travelling lights and floating glyphs quieten */
  .mc-glyph { animation-duration: calc(9s + var(--i) * .9s); }
}
@media (max-width: 1200px) and (min-width: 1025px) {
  /* small laptops: the rings keep their full width above the detail */
  .mc-caps { grid-template-columns: minmax(0, 1fr); }
  .mc-orbit { width: min(720px, 100%); margin-inline: auto; }
  .mc-caps__detail { width: min(720px, 100%); margin-inline: auto; }
}
@media (max-width: 1024px) {
  .mc-hero__split, .mc-intel__split { grid-template-columns: minmax(0, 1fr); }
  .mc-bloom { max-width: 520px; }
  /* capabilities: the composition steps aside; every capability is a card */
  .mc-caps { grid-template-columns: minmax(0, 1fr); }
  .mc-orbit { display: none; }
  .mc-caps__detail { padding: 0; background: none; border: 0; box-shadow: none; }
  .mc-caps__detail > div, .mc-caps__detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mc-caps__links { grid-column: 1 / -1; }
  .mc-detail + .mc-detail { margin-top: 0; }
  .mc-detail {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(16, 26, 70, .62);
    border: 1px solid rgba(147, 197, 253, .2);
  }
  .mc-detail summary { position: relative; padding-right: 26px; }
  .mc-detail summary::after {
    content: '';
    position: absolute;
    right: 2px; top: 8px;
    width: 9px; height: 9px;
    border-right: 2px solid #93C5FD;
    border-bottom: 2px solid #93C5FD;
    transform: rotate(45deg);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  .mc-detail[open] summary::after { transform: rotate(225deg); top: 12px; }
  .mc-detail h3 { font-size: 17px; }
  /* the six intelligence entries are listed in full in §5 on these sizes */
  .mc-detail--intel { display: none; }
  /* journey: a clean row, no curve */
  .mc-journey { height: auto; }
  .mc-journey__svg { display: none; }
  .mc-journey__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mc-stage { position: relative; left: auto; top: auto; width: auto; translate: none; }
  .mc-constellation { max-width: 520px; margin-inline: auto; width: 100%; }
  .mc-intel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mc-glyph { width: 38px; height: 38px; }
  .mc-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mc-flow__streams { grid-template-rows: none; display: flex; flex-wrap: wrap; gap: 10px 16px; }
  .mc-flow__stream { font-size: 15px; }
  .mc-flow__svg { display: none; }
  .mc-caps__detail > div, .mc-caps__detail { grid-template-columns: minmax(0, 1fr); }
  .mc-journey__stages { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 18px; border-left: 3px solid #BFDBFE; }
  .mc-stage { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 10px; }
  .mc-stage__media { grid-row: span 3; margin: 0; }
  .mc-stage__num, .mc-stage h3, .mc-stage p:not(.mc-stage__num) { margin-left: 0; margin-right: 0; }
  .mc-constellation { max-width: 300px; }
  .mc-constellation__stars { display: none; }
  .mc-intel { grid-template-columns: minmax(0, 1fr); }
  .mc-layers { grid-template-columns: minmax(0, 1fr); }
  .mc-layers__svg { max-width: 240px; }
}

/* ===================================================== reduced motion === */
/* ------------------------------------------- continuous motion, gated ---
   Every breath on this page is kept exactly as designed; it simply does not
   run while nobody can see it. The scene engine already marks a section on
   screen with .is-live, and animation-play-state pauses the animation
   without altering a single frame of it, so the composition is identical
   the moment it comes into view. Before this, all of the page's loops ran
   from load, including the ones several screens down. */
.mc-cloud__glow,
.mc-cloud__bloom,
.mc-orbit__bloom,
.mc-glyph,
.mc-lens__scatter circle,
.mc-layer__shape { animation-play-state: paused; }

.v2.is-live .mc-cloud__glow,
.v2.is-live .mc-cloud__bloom,
.v2.is-live .mc-orbit__bloom,
.v2.is-live .mc-glyph,
.v2.is-live .mc-lens__scatter circle,
.v2.is-live .mc-layer__shape { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .mc-cloud__glow, .mc-cloud__bloom, .mc-orbit__bloom, .mc-glyph, .mc-lens__scatter circle { animation: none; }
  .mc-rise__light, .mc-journey__runner, .mc-constellation__pulse { display: none; }
  .js .mc-rise__line, .js .mc-flow__line, .js .mc-journey__line, .js .mc-lens__rays path { stroke-dashoffset: 0; transition: none; }
  .js .mc-cloud, .js .mc-glyph, .js .mc-orbit, .js .mc-stage, .js .mc-star,
  .js .mc-layer__label { opacity: 1; transform: none; transition: none; animation: none; }
  /* the layer shapes are placed by their SVG transform attribute: never
     override it with a CSS transform */
  .js .mc-layer__shape { opacity: 1; transition: none; animation: none; }
  .mc-stage { border-color: rgba(37, 99, 235, .45); }
  .mc-flow__band { box-shadow: 0 0 0 8px rgba(77, 168, 255, .16), 0 26px 50px -20px rgba(37, 99, 235, .9); }
}

/* ==========================================================================
   §8 THE NAME — and THE DAWN behind it
   --------------------------------------------------------------------------
   A light section before the dark finale: it is what lets the page alternate
   all the way down. Eight sections never could, because the page opens dark
   and closes on the dark finale, so a strict alternation needs an odd count.

   THE DAWN is the site's radial light turned inside out. Every other
   composition sets light marks on a dark ground; this one lays a rising arc
   of colour UNDER the words on white. Same family, opposite polarity — which
   is what keeps a light section from feeling like a gap in the page.

   AUTHORED STILL: the arc stands risen and lit.
   ========================================================================== */
.mc-name {
  padding-block: var(--v2-pad-loose);
  overflow: clip;
}
.mc-name__inner { position: relative; }
/* The name carries the brand's own hue: blue through white and back, so the
   word itself reads as light rather than as ink. The gradient is clipped to
   the glyphs, and it moves -- slowly, once around, for ever -- which is the
   only thing on this section that does. */
.mc-name__word {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.04em;
  background: linear-gradient(100deg,
    #1D4ED8 0%, #4DA8FF 22%, #EAF3FF 42%, #93C5FD 58%, #2563EB 78%, #1D4ED8 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes mc-hue {
  0%   { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}
.js .v2.is-live .mc-name__word { animation: mc-hue 9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .mc-name__word { animation: none !important; background-position: 30% 50%; }
}
.mc-name__tag {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1rem + .8vw, 1.72rem);
  font-weight: 600;
  letter-spacing: -.015em;
  background: linear-gradient(100deg, #1D4ED8, #2563EB 42%, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mc-dawn {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* the arc of light the words sit on */
.mc-dawn__arc {
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: min(1180px, 128%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(77, 168, 255, .26), transparent 68%),
    radial-gradient(42% 86% at 50% 100%, rgba(139, 92, 246, .18), transparent 72%);
}
/* and the thin lit edge along its top, which is what makes it read as light
   arriving rather than as a wash */
.mc-dawn__rise {
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: min(760px, 86%);
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(77, 168, 255, 0), rgba(77, 168, 255, .7) 22%,
    rgba(139, 92, 246, .7) 78%, rgba(139, 92, 246, 0));
  transform-origin: 50% 50%;
}

/* ---------------------------------------------------------------- motion -- */
/* the edge draws out from the middle, then the arc rises behind it. Once. */
.js .mc-dawn__rise { transform: translateX(-50%) scaleX(0); }
.js .v2.is-in .mc-dawn__rise {
  transform: translateX(-50%) scaleX(1);
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1) .25s;
}
.js .mc-dawn__arc { opacity: 0; transform: translateX(-50%) translateY(14%); }
.js .v2.is-in .mc-dawn__arc {
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 1.7s ease .5s, transform 2s cubic-bezier(.16, 1, .3, 1) .5s;
}