/* ============================================================================
   Microsoft Cloud & Managed Services page. Body sections ported from the
   React CloudHosting.tsx; hero is the Schematic system (DWG AN-005, the
   managed environment as a technical drawing, monitor sweep driven by
   an-cloud.js). Loaded only on this page via its Styles section.
   ============================================================================ */

/* ---- Hero ---------------------------------------------------------------- */
.an-cl-hero {
  position: relative;
  background: var(--an-dark-3);
  color: #fff;
  /* No bottom padding: the proof bar is the hero's floor (Craig round 1). */
  padding: 144px 24px 0;
  overflow: hidden;
}
.an-cl-hero__inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  z-index: 2;
}
.an-cl-hero__h1 {
  font-weight: 800;
  font-size: 42px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 24px;
}
/* Keep "run right and answered fast." together so the break lands on the
   comma (the sitewide hero lockup), while still wrapping internally on
   phones. */
.an-cl-hero__h1 em { display: inline-block; }
.an-cl-hero__sub {
  font-size: 17px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 32px;
}
.an-cl-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.an-cl-hero__alt { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8); transition: color .2s var(--an-ease); }
.an-cl-hero__alt:hover { color: #fff; }

/* Mono DWG slate (desktop only). */
.an-cl-hero__slate {
  display: none;
  position: absolute;
  top: -44px; right: 0;
  font-family: var(--an-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  z-index: 4;
}
.an-cl-hero__slate-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--an-red-light);
  display: inline-block;
  margin-right: 8px;
  animation: an-cl-pulse 2s ease-in-out infinite;
}

/* THE OVERNIGHT LOG (Material Series hero): hidden below 1200, absolute
   right column from 1200. The retired AN-005 schematic's rules are removed. */
.an-cl-hero__mat, .an-cl-hero__mat-tag { display: none; }
.an-cl-hero__copy { position: relative; z-index: 2; }

/* Proof bar: spans the hero bottom; one line at >=1280, wraps below. */
.an-cl-hero__proofbar {
  position: relative;
  z-index: 2;
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 28px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.an-cl-hero__proofbar > div { white-space: nowrap; }
.an-cl-hero__proof-num { font-weight: 800; font-size: 22px; color: #fff; }
.an-cl-hero__proof-label { font-weight: 700; font-size: 13.5px; color: rgba(255,255,255,0.5); margin-left: 8px; }

@keyframes an-cl-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---- Managed meaning: copy + the orbit system map ---------------------------
   Trimmed per Craig round 1 ("fix the padding so we can trim the real
   estate"). */
.an-cl-mean { background: #fff; padding: 64px 24px; }
.an-cl-mean__inner { max-width: 1240px; margin-inline: auto; }
.an-cl-mean__cols { display: grid; gap: 40px; align-items: center; }
.an-cl-mean__head { max-width: 640px; }
.an-cl-mean__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--an-ink);
  margin-bottom: 24px;
}
.an-cl-mean__h2 em { display: inline-block; }
.an-cl-mean__p { font-size: 17px; color: var(--an-gray-3); line-height: 1.7; max-width: 640px; }
.an-cl-mean__orbit { display: none; }
.an-cl-mean__orbit text { font-family: var(--an-font-mono); }
/* Phones keep the red-rule list; the orbit takes over from 768. */
.an-cl-mean__grid { margin-top: 40px; display: grid; gap: 20px; }
.an-cl-mean__item { border-top: 2px solid rgba(167,37,44,0.3); padding-top: 16px; }
.an-cl-mean__num { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-red); }
.an-cl-mean__item > p { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--an-ink); line-height: 1.375; }

/* ---- What we run: sticky intro + scroll-linked spine (dark) ------------------
   The homepage EngagementTimeline machinery: an-home.js (site-wide)
   drives [data-tl-fill]/[data-tl-dot] inside [data-tl-rail] with hardcoded
   insets TOP=40 / BOT=48, so the spine/fill/dot geometry here must keep
   top: 40px / bottom: 48px. Dark-variant styles; an-tl CSS itself lives in
   an-home.css and only loads on the homepage. */
.an-cl-tl { background: var(--an-dark); color: #fff; padding: 96px 24px; }
.an-cl-tl__grid { max-width: 1300px; margin-inline: auto; display: grid; gap: 48px; }
.an-cl-tl__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.an-cl-tl__h2 em { display: inline-block; }
.an-cl-tl__p { margin-top: 20px; font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.6; }
.an-cl-tl__cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); }
/* The two run-lane designation badges under the sticky intro. Both PNGs are
   white Microsoft badge cards; widths matched, slight aspect difference is
   centered away. */
.an-cl-tl__badges { margin-top: 24px; display: flex; gap: 10px; align-items: center; }
.an-cl-tl__badges img { height: 90px; width: auto; border-radius: 8px; }
.an-cl-tl__rail { position: relative; }
.an-cl-tl__spine { position: absolute; left: 34px; top: 40px; bottom: 48px; width: 2px; background: rgba(255,255,255,0.12); border-radius: 999px; }
.an-cl-tl__fill {
  position: absolute; left: 34px; top: 40px;
  width: 2px; height: 0;
  background: linear-gradient(to bottom, var(--an-red), var(--an-red-light));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(196,73,80,0.5);
}
.an-cl-tl__dot {
  position: absolute; left: 34px; top: 40px;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--an-red-light); box-shadow: 0 0 14px 3px rgba(196,73,80,0.55);
  opacity: 0;
}
.an-cl-tl__svc { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 26px 0; align-items: start; }
.an-cl-tl__num-wrap { position: relative; display: flex; justify-content: center; }
.an-cl-tl__num {
  position: relative; z-index: 1;
  font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.04em;
  color: var(--an-red-light); background: var(--an-dark); padding: 8px 0;
}
.an-cl-tl__svc-title { font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; }
.an-cl-tl__svc-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.6; max-width: 560px; }
.an-cl-tl__svc-plat { margin-top: 12px; font-family: var(--an-font-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.35); }

/* ---- Problems vs promises: compare cards + the Client Hub strip (paper) ------
   Round 1 redesign. Each pair is one white card: the problem struck out in
   red, the promise as the card headline. 2x2 at >=768. The Client Hub strip
   (dark panel) closes the section: the tool that delivers the promises. */
.an-cl-cmp { background: var(--an-paper); padding: 72px 24px; }
.an-cl-cmp__inner { max-width: 1240px; margin-inline: auto; }
.an-cl-cmp__head { max-width: 760px; margin-bottom: 36px; }
.an-cl-cmp__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--an-ink);
}
.an-cl-cmp__h2 em { display: inline-block; }
.an-cl-cmp__grid { display: grid; gap: 16px; }
.an-cl-cmp__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--an-border);
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,0.25);
}
.an-cl-cmp__num {
  position: absolute;
  top: 20px; right: 22px;
  font-family: var(--an-font-mono);
  font-size: 12px;
  color: var(--an-red);
}
.an-cl-cmp__from {
  font-size: 14px;
  font-weight: 500;
  color: var(--an-gray-5);
  line-height: 1.5;
  text-decoration: line-through;
  text-decoration-color: rgba(167,37,44,0.55);
  text-decoration-thickness: 1.5px;
  padding-right: 40px;
  margin-bottom: 10px;
}
.an-cl-cmp__to { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--an-ink); line-height: 1.2; margin-bottom: 6px; }
.an-cl-cmp__sub { font-size: 14px; color: var(--an-gray-3); line-height: 1.55; }

.an-cl-cmp__hub {
  position: relative;
  margin-top: 16px;
  background: var(--an-dark);
  border-radius: 16px;
  padding: 28px 26px;
  display: grid;
  gap: 24px;
  overflow: hidden;
}
.an-cl-cmp__hub::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 260px; height: 260px;
  border-radius: 999px;
  background: rgba(167,37,44,0.16);
  filter: blur(80px);
  pointer-events: none;
}
.an-cl-cmp__hub-kicker { font-weight: 800; font-size: 13.5px; color: var(--an-red-light); margin-bottom: 10px; }
.an-cl-cmp__hub-h3 { font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin-bottom: 12px; }
.an-cl-cmp__hub-h3 em { display: inline-block; }
.an-cl-cmp__hub-p { font-size: 14.5px; color: rgba(255,255,255,0.55); line-height: 1.65; max-width: 560px; }
.an-cl-cmp__hub-items { position: relative; display: grid; gap: 0; align-self: center; }
.an-cl-cmp__hub-item {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  align-items: baseline;
}
.an-cl-cmp__hub-item > span { font-family: var(--an-font-mono); font-size: 11.5px; color: var(--an-red-light); }
.an-cl-cmp__hub-item > p { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.75); line-height: 1.5; }

/* ---- Azure done well: the Well-Architected roadmap (BLACK, Craig round 1:
   "turn the section above back to black", matching the React AzureFeatured
   dark section) ------------------------------------------------------------- */
.an-cl-well { background: var(--an-dark); padding: 96px 24px; }
.an-cl-well__inner { max-width: 1240px; margin-inline: auto; }
.an-cl-well__head { max-width: 760px; margin-bottom: 48px; }
.an-cl-well__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 24px;
}
.an-cl-well__h2 em { display: inline-block; }
.an-cl-well__p { font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 680px; }
.an-cl-well__pillars {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}
.an-cl-well__pillars-cap { font-weight: 800; font-size: 13.5px; color: #fff; }
.an-cl-well__pillars-line { font-family: var(--an-font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--an-red-light); }
.an-cl-well__tag { margin-top: 16px; text-align: right; font-family: var(--an-font-mono); font-size: 11px; letter-spacing: 0.15em; color: rgba(255,255,255,0.35); }
/* Clear the destination label that hangs below the road at >=1024. */
@media (min-width: 1024px) { .an-cl-well__tag { margin-top: 48px; } }
.an-cl-well__cta { margin-top: 32px; }
/* White button on black (round 2): red-on-black above the red band vibrated. */
.an-cl-well__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--an-ink);
  padding: 14px 28px; border-radius: 12px;
  font-size: 15px; font-weight: 700;
  transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease);
}
.an-cl-well__btn:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(0,0,0,0.45); }

/* The roadmap. Base = vertical spine (phones/tablet); >=1024 = horizontal
   road with cards alternating above and below. */
.an-cl-road { position: relative; }
.an-cl-road__line, .an-cl-road__start, .an-cl-road__dest, .an-cl-road__conn { display: none; }
.an-cl-road__stops { position: relative; display: grid; gap: 18px; }
.an-cl-road__stops::before {
  content: "";
  position: absolute;
  left: 13px; top: 16px; bottom: 16px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.35) 0 4px, transparent 4px 9px);
}
.an-cl-road__stop { position: relative; display: grid; grid-template-columns: 27px 1fr; gap: 14px; align-items: start; grid-template-areas: "node card"; }
.an-cl-road__node {
  grid-area: node;
  width: 27px; height: 27px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26,26,26,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--an-font-mono); font-size: 11px; color: var(--an-red);
  position: relative; z-index: 2;
}
.an-cl-road__card {
  grid-area: card;
  width: 100%;
  background: #fff;
  border: 1px solid var(--an-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 14px 34px -20px rgba(0,0,0,0.6);
}
.an-cl-road__win { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--an-red); }
.an-cl-road__lbl { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--an-ink); line-height: 1.4; }

/* ---- CTA: red band (homepage an-cta treatment) ------------------------------ */
.an-cl-cta { position: relative; background: var(--an-red); padding: 88px 24px 72px; text-align: center; overflow: hidden; }
.an-cl-cta__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255,255,255,0.12), transparent 70%); }
/* Top fades from the black section above, bottom into the dark footer, so
   the band bridges instead of striping (Craig round 2 blend fix). */
.an-cl-cta__dark { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(20,20,20,0.55), transparent 30%, transparent 60%, var(--an-red-deep)); }
.an-cl-cta__inner { position: relative; z-index: 2; max-width: 680px; margin-inline: auto; }
.an-cl-cta__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 20px;
}
.an-cl-cta__h2 em { font-style: normal; color: rgba(255,255,255,0.95); display: inline-block; }
.an-cl-cta__p { font-size: 17px; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 36px; }
.an-cl-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--an-red);
  padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 600;
  transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease);
}
.an-cl-cta__btn:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,0.3); }

/* ---- Responsive ------------------------------------------------------------ */
@media (min-width: 640px) {
  .an-cl-mean__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .an-cl-mean__h2 { font-size: 42px; }
  /* The orbit takes over from the red-rule list. */
  .an-cl-mean__orbit { display: block; width: 100%; max-width: 720px; height: auto; margin-inline: auto; }
  .an-cl-mean__grid { display: none; }
  .an-cl-tl__h2 { font-size: 40px; }
  .an-cl-well__h2 { font-size: 42px; }
  .an-cl-cmp__h2 { font-size: 42px; }
  .an-cl-cmp__grid { grid-template-columns: 1fr 1fr; }
  .an-cl-cmp__hub { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; padding: 32px 36px; }
  .an-cl-cta__h2 { font-size: 40px; }
}
@media (min-width: 1024px) {
  .an-cl-hero { padding: 176px 48px 0; }
  /* THE OVERNIGHT LOG (Material Series): the lane's material typeset, anchored
     right, faded at its bottom edge. */
  .an-cl-hero__mat {
    position: absolute;
    top: 8px; right: 0; bottom: 128px;
    width: 46%;
    overflow: hidden;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    pointer-events: none;
  }
  .an-cl-hero__mat pre {
    font-family: var(--an-font-mono);
    font-size: 12px;
    line-height: 2.0;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.42);
    white-space: pre;
    overflow: hidden;
  }
  .an-cl-hero__mat i { font-style: normal; color: var(--an-red-light); opacity: 0.85; }
  .an-cl-hero__mat em { font-style: normal; color: rgba(255,255,255,0.7); }
  .an-cl-hero__mat-tag {
    position: absolute;
    right: 0; bottom: 104px;
    font-family: var(--an-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.4);
    z-index: 2;
  }

  .an-cl-hero__slate { display: block; }
  .an-cl-hero__copy { max-width: 560px; }
  .an-cl-hero__sub { font-size: 18px; }
  .an-cl-mean { padding: 72px 48px; }
  .an-cl-mean__cols { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; }
  .an-cl-mean__h2 { font-size: 44px; }
  .an-cl-mean__p { font-size: 18px; }
  .an-cl-tl { padding: 112px 48px; }
  .an-cl-tl__grid { grid-template-columns: 340px 1fr; gap: 80px; }
  .an-cl-tl__intro { position: sticky; top: 128px; align-self: start; }
  .an-cl-tl__h2 { font-size: 44px; }
  .an-cl-tl__spine, .an-cl-tl__fill, .an-cl-tl__dot { left: 50px; }
  .an-cl-tl__svc { grid-template-columns: 100px 1fr; gap: 36px; padding: 24px 0; }
  .an-cl-tl__num { font-size: 54px; }
  .an-cl-tl__svc-title { font-size: 26px; }
  .an-cl-tl__svc-desc { font-size: 16px; }
  .an-cl-cmp { padding: 88px 48px; }
  .an-cl-cmp__grid { gap: 18px; }
  .an-cl-cmp__card { padding: 28px 30px; }
  .an-cl-cmp__to { font-size: 22px; }
  .an-cl-cmp__hub { margin-top: 18px; padding: 36px 40px; }
  .an-cl-cmp__hub-h3 { font-size: 27px; }
  .an-cl-well { padding: 112px 48px 88px; }
  .an-cl-well__h2 { font-size: 46px; }
  .an-cl-well__p { font-size: 18px; }
  .an-cl-well__head { margin-bottom: 64px; }

  /* Roadmap goes horizontal: 3 stops, all cards on ONE line above the road
     (CRO pass 2026-07-16; the over/under alternation read sparse with only
     three stops). Node centers sit on the road at top 155 (card 120 +
     conn 22 + node 13). */
  .an-cl-road { padding: 0 170px 0 120px; }
  .an-cl-road__line { display: block; position: absolute; left: 0; right: 0; top: 155px; height: 0; border-top: 1.5px dashed rgba(255,255,255,0.3); }
  .an-cl-road__start { display: block; position: absolute; left: 14px; top: 151px; text-align: center; }
  .an-cl-road__start-dot { display: block; width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.5); margin-inline: auto; }
  .an-cl-road__start-lbl { display: block; margin-top: 10px; font-family: var(--an-font-mono); font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.45); white-space: nowrap; transform: translateX(-42%); }
  .an-cl-road__dest { display: block; position: absolute; right: 8px; top: 147px; text-align: center; }
  .an-cl-road__dest-diamond {
    display: block;
    width: 16px; height: 16px;
    margin-inline: auto;
    transform: rotate(45deg);
    background: var(--an-red);
    box-shadow: 0 0 0 4px var(--an-dark), 0 0 0 5px rgba(196,73,80,0.55), 0 0 18px rgba(196,73,80,0.4);
  }
  .an-cl-road__dest-lbl { display: block; margin-top: 12px; font-family: var(--an-font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--an-red-light); white-space: nowrap; transform: translateX(6%); }
  .an-cl-road__stops { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .an-cl-road__stops::before { display: none; }
  .an-cl-road__stop { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .an-cl-road__conn { display: block; width: 1px; height: 22px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.4) 0 3px, transparent 3px 7px); }
  .an-cl-road__card { height: 120px; width: 100%; max-width: 280px; padding: 20px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
  .an-cl-road__node { width: 26px; height: 26px; }
  .an-cl-cta { padding: 88px 48px; }
  .an-cl-cta__h2 { font-size: 42px; }
}
@media (min-width: 1280px) {
  /* 46px: the largest size where "run right and answered fast." holds one
     line in the 700px copy column, keeping the two-line hero lockup. */
  .an-cl-hero__h1 { font-size: 46px; }
  .an-cl-hero__copy { max-width: 700px; }
  /* One-line proof bar. Below 1280 the five slots wrap. */
  .an-cl-hero__proofbar { flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
}
@media (min-width: 1400px) {
  /* The Schematic composition: the drawing anchors to the container's right
     edge behind the copy (same geometry as the AI page). Height 360 keeps
     the drawing's title block clear of the proof bar (Craig round 3: the
     stats ran over the diagram at 420). */
  .an-cl-hero__dwg {
    position: absolute;
    top: 0; right: 0;
    width: auto;
    height: 330px;
    margin: 0;
    z-index: 1;
    pointer-events: none;
  }
  .an-cl-hero__proofbar { margin-top: 72px; }
}

/* ---- Orbit satellite -------------------------------------------------------- */
.an-orbit-sat { transform-box: view-box; transform-origin: 50% 50%; animation: an-cl-orbit-spin 48s linear infinite; }
@keyframes an-cl-orbit-spin { to { transform: rotate(360deg); } }

/* ---- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .an-cl-hero__slate-dot,
  .an-dwg-node.is-live .an-dwg-halo,
  .an-orbit-sat { animation: none; }
}


/* The overnight log shows only from 1200: at 1024-1199 its 46% column
   overlapped the 560px hero copy (audit CLOUD-01). */
@media (min-width: 1200px) {
  .an-cl-hero__mat, .an-cl-hero__mat-tag { display: block; }
}

/* Mobile tap target (audit SW-05): quiet hero link. */
@media (max-width: 767px) {
  .an-cl-hero__alt { display: inline-block; padding-block: 10px; }
}

/* ===========================================================================
   MOBILE UX PASS (2026-07-18). Mobile-breakpoint-gated; desktop untouched.
=========================================================================== */

/* CLOUD-M01: at 360/375 the 42px H1 orphaned 'cloud,' on its own line;
   34px restores the designed break-on-the-comma lockup. 430+ keeps 42px. */
@media (max-width: 429px) {
  .an-cl-hero__h1 { font-size: 34px; }
}

/* ---------------------------------------------------------------------------
   SITE AUDIT (2026-07-27) — Material Series continuity below 1200.
   Supersedes CLOUD-M02, which revealed the Overnight Log on phones only and
   left 768-1199 with bare type on black (the 46% absolute column overlaps the
   560px copy at those widths, logged as audit CLOUD-01). Same in-flow framed
   treatment now used on the AI and Custom Technology heroes, so all three
   service heroes carry their material identity at every width.
   Font sized so the longest ~54-char log line fits 360's content width; the
   container clips as a hard h-scroll backstop.
--------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .an-cl-hero__mat {
    display: block;
    position: static;
    width: auto;
    inset: auto;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  }
  .an-cl-hero__mat pre {
    margin: 0;
    font-family: var(--an-font-mono);
    font-size: min(10px, 2.4vw);
    line-height: 1.9;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.42);
    white-space: pre;
    overflow: hidden;
  }
  .an-cl-hero__mat i { font-style: normal; color: var(--an-red-light); opacity: .85; }
  .an-cl-hero__mat em { font-style: normal; color: rgba(255,255,255,0.7); }
  .an-cl-hero__mat-tag {
    display: block;
    position: static;
    inset: auto;
    margin-top: 14px;
    font-family: var(--an-font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.34);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .an-cl-hero__mat pre { font-size: 12px; }
}

@media (max-width: 767px) {
  /* CLOUD-M03: badges were locked to 90px height (~328px pair) and overflowed
     the ~312-327px content column; constrain to half the column each. */
  .an-cl-tl__badges img { height: auto; width: auto; max-height: 90px; max-width: calc(50% - 5px); }

  /* CLOUD-M04: reading copy under the 15px floor. */
  .an-cl-cmp__from,
  .an-cl-cmp__sub,
  .an-cl-cmp__hub-p,
  .an-cl-cmp__hub-item > p,
  .an-cl-road__lbl { font-size: 15px; }

  /* CLOUD-M05: restore the roadmap's origin + destination on the phone spine
     (they were display:none <1024). Reorder so the reading order is
     start -> stops -> destination. */
  .an-cl-road { display: flex; flex-direction: column; }
  .an-cl-road__start { order: 0; display: flex; position: static; align-items: center; gap: 10px; margin-bottom: 16px; text-align: left; }
  .an-cl-road__stops { order: 1; }
  .an-cl-road__dest { order: 2; display: flex; position: static; align-items: center; gap: 10px; margin-top: 16px; text-align: left; }
  .an-cl-road__start-dot {
    display: block; width: 9px; height: 9px; border-radius: 999px;
    background: rgba(255,255,255,0.5); margin: 0 0 0 9px; transform: none;
  }
  .an-cl-road__dest-diamond {
    display: block; width: 12px; height: 12px; transform: rotate(45deg);
    background: var(--an-red); margin: 0 0 0 8px;
    box-shadow: 0 0 0 4px var(--an-dark), 0 0 0 5px rgba(196,73,80,0.55);
  }
  .an-cl-road__start-lbl,
  .an-cl-road__dest-lbl {
    display: block; margin: 0;
    font-family: var(--an-font-mono); font-size: 10.5px; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45); white-space: nowrap; transform: none;
  }
  .an-cl-road__dest-lbl { color: var(--an-red-light); }

  /* CLOUD-M06: balance the closing CTA so it stops double-widowing. */
  .an-cl-cta__h2,
  .an-cl-cta__h2 em { text-wrap: balance; }
}

/* ============================================================================
   Craig design edits 2026-07-23. The "what managed should mean" section now
   shows the real Client Hub surface (Licenses and Cloud Consumption) beside
   the copy, plus a four-up promise strip; the orbit diagram and its phone
   fallback were removed, and the duplicate Client Hub strip in the
   Predictability section was dropped so the Hub is introduced once.
   Console chrome/labels/columns mirror ArchitectNow/an-client-hub @ main
   (CspPage.razor + CspOverviewTab.razor); on-screen data is a fictional
   sample tenant. Kevin, fold into the rules above when merging.
   ============================================================================ */
/* ==========================================================================
   CLIENT HUB SURFACE (an-cl-mean) + PROMISE STRIP
   Chrome, labels, and table columns mirror the shipped app: KPI foot
   --an-border, table head #f5f5f5, body ink --an-gray-1. Product screens use
   Roboto, the font the app actually loads. Data is the fictional Meridian
   Freight tenant.

   013-brand-gate: the bar gradient was a hardcoded dark-maroon -> bright-red
   pair, both RETIRED across all four ArchitectNow systems and shipping live on
   this public page (see git history for the exact values — they are not written
   here because the brand gate rightly rejects retired values anywhere in source,
   comments included). Re-expressed on --an-red-deep -> --an-red, which keeps the
   dark-to-bright structure the app's chrome has.

   This mockup depicts Client Hub, so it drifts when Client Hub drifts. It was
   already inaccurate before this change: the app's own red is a different value
   again, so faithfulness was not what the old literals preserved. When Client
   Hub is brought onto the ratified brand red, this mockup will match it.
   ========================================================================== */
.ch {
  font-family: Roboto, system-ui, sans-serif;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08);
}
.ch__bar {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 13px;
  background: linear-gradient(135deg, var(--an-red-deep) 0%, var(--an-red) 100%); color: #fff;
}
.ch__burger { width: 15px; height: 10px; position: relative; flex-shrink: 0; }
.ch__burger i { position: absolute; left: 0; right: 0; height: 1.7px; background: #fff; border-radius: 2px; }
.ch__burger i:nth-child(1) { top: 0; } .ch__burger i:nth-child(2) { top: 4.2px; } .ch__burger i:nth-child(3) { top: 8.4px; }
.ch__brand { display: flex; align-items: center; gap: 7px; font-size: 11.5px; min-width: 0; }
.ch__brand svg { width: 14px; height: 14px; flex-shrink: 0; }
.ch__brand span { opacity: .95; }
.ch__brand b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch__sp { flex: 1; }
.ch__avatar {
  width: 22px; height: 22px; border-radius: 999px; background: #fff; color: var(--an-red);
  font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ch__body { display: grid; grid-template-columns: 132px 1fr; }
.ch__nav { border-right: 1px solid #e6e6e6; padding: 6px 0; }
.ch__nav-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  font-size: 9px; color: #4a4a4a; line-height: 1.28;
}
.ch__nav-ic { width: 9px; height: 9px; border-radius: 2px; background: #c9c9c9; flex-shrink: 0; }
/* Active nav in the shipped app is a light neutral row with red text and a
   red icon, not a pink tint. */
.ch__nav-item.is-on { background: #f0f0f0; color: var(--an-red); font-weight: 500; }
.ch__nav-item.is-on .ch__nav-ic { background: var(--an-red); }
.ch__main { padding: 13px 14px 15px; min-width: 0; }
.ch__title { font-size: 15px; font-weight: 400; color: var(--an-gray-1); margin: 0 0 10px; }
.ch__tabs { display: flex; gap: 14px; border-bottom: 1px solid #e6e6e6; margin-bottom: 13px; }
.ch__tab {
  font-size: 8px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: #6A6A6C; padding-bottom: 8px; white-space: nowrap;
}
.ch__tab.is-on { color: var(--an-red); box-shadow: inset 0 -2px 0 var(--an-red); }
.ch__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
/* Column-flex so the red block absorbs a wrapped caption and all four gray
   feet still line up (the longest caption wraps at this width). */
.ch__kpi { border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.16); display: flex; flex-direction: column; }
.ch__kpi-top {
  background: linear-gradient(135deg, var(--an-red-deep) 0%, var(--an-red) 100%); padding: 8px 11px;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.ch__kpi-cap {
  font-size: 7.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: rgba(255,255,255,.75); margin-bottom: 2px;
}
.ch__kpi-val { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.15; }
.ch__kpi-foot { padding: 6px 11px; background: var(--an-border); font-size: 8px; color: var(--an-gray-1); min-height: 30px; }
.ch__boxes { display: grid; grid-template-columns: 1fr; gap: 9px; }
.ch__box { border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.16); background: #fff; }
.ch__box-h {
  background: linear-gradient(135deg, var(--an-red-deep) 0%, var(--an-red) 100%);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 8px 11px;
}
.ch__tbl { width: 100%; border-collapse: collapse; font-size: 9.5px; color: var(--an-gray-1); }
.ch__tbl th {
  background: #f5f5f5; font-weight: 600; text-align: left; padding: 6px 11px;
  border-bottom: 1px solid #e6e6e6;
}
.ch__tbl td { padding: 5.5px 11px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.ch__tbl .r { text-align: right; }
.ch__tbl tfoot td { font-weight: 700; border-top: 1px solid #d8d8d8; border-bottom: 0; }
.ch__sub { display: block; font-size: 8px; color: #6A6A6C; margin-top: 2px; }
.ch__t.up { color: #2e7d43; } .ch__t.dn { color: var(--an-red); }
.ch-col { min-width: 0; }
.ch__sample {
  font-family: var(--an-font-mono); font-size: 9.5px; letter-spacing: .1em;
  color: var(--an-gray-5); text-transform: uppercase; margin-top: 10px; text-align: right;
}

/* Promise strip */
.an-cl-pr {
  display: grid; gap: 26px; margin-top: 44px; padding-top: 32px;
  border-top: 1px solid var(--an-border);
}
.an-cl-pr__w {
  font-family: var(--an-font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--an-red); margin-bottom: 8px;
}
.an-cl-pr__h { font-weight: 800; font-size: 17px; color: var(--an-ink); margin-bottom: 5px; letter-spacing: -0.01em; }
.an-cl-pr .an-cl-pr__p { font-size: 13.5px; color: var(--an-gray-3); line-height: 1.55; }

@media (min-width: 700px) { .an-cl-pr { grid-template-columns: 1fr 1fr; gap: 30px 36px; } }
@media (min-width: 1024px) {
  .an-cl-pr { grid-template-columns: repeat(4, 1fr); }
  /* Console and copy are close in height now, so the staging default
     (center) balances the two columns. */
  .an-cl-mean__cols { align-items: center; }
}
/* Phones: mirror the app's own responsive behavior instead of clipping a
   desktop screenshot. MudBlazor collapses the nav drawer behind the burger on
   small viewports, so the nav hides and the content pane reflows: KPIs 2x2,
   detail boxes stacked. Faithful to the product, and it fits. */
@media (max-width: 699px) {
  .ch-scroll { overflow-x: hidden; }
  .ch__body { grid-template-columns: 1fr; }
  .ch__nav { display: none; }
  .ch__main { padding: 14px 14px 16px; }
  .ch__title { font-size: 18px; margin-bottom: 12px; }
  .ch__tabs { gap: 16px; margin-bottom: 14px; overflow-x: auto; }
  .ch__tab { font-size: 9.5px; white-space: nowrap; padding-bottom: 9px; }
  .ch__kpis { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .ch__kpi-val { font-size: 20px; }
  .ch__kpi-cap { font-size: 8.5px; }
  /* Two-line reserve so paired cards split red-to-gray at the same point. */
  .ch__kpi-foot { font-size: 9px; padding: 7px 12px; min-height: 40px; }
  .ch__boxes { grid-template-columns: 1fr; gap: 10px; }
  .ch__tbl { font-size: 11px; }
  .ch__bar { height: 44px; padding: 0 13px; }
  .ch__brand { font-size: 13px; }
  .ch__brand b { font-size: 12.5px; }
}