/* Optronix v4: resources articles, group B.
   choosing-a-data-centre, data-sovereignty, ai-gpu-data-hall, data-centre-fit-out, vmware-to-nutanix,
   data-centre-operations, dcim, data-destruction-itad.
   One paper article template (hero with a dark drawing, stat strip, sticky contents, prose, dark
   interactive panels, the Optronix bridge, sources, pager) plus each guide's own infographics.
   Tokens only, so everything re-themes between paper and the dark panels. Prefix: ib- */

/* =============================================================== 1 Hero */
.ib-hero { overflow: clip; }
.ib-hero > .bg-grid { opacity: 0.75; }
.ib-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
.ib-hero__copy { min-width: 0; }
.ib-hero .lead { max-width: 36em; text-wrap: pretty; }
.ib-hero__note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s-5); max-width: 44em;
  font-size: 0.875rem; line-height: 1.55; color: var(--fg-3); text-wrap: pretty;
}
.ib-hero__note::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: 0.45em;
  background: var(--grad-mark); clip-path: polygon(32% 0, 100% 0, 68% 100%, 0 100%);
}
.ib-hero .article-hero__title { font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.75rem); line-height: 1.03; }
.ib-hero .breadcrumbs { margin-bottom: var(--s-5); }
.ib-hero__fig {
  position: relative; isolation: isolate; margin: 0; width: 100%; min-width: 0;
  border-radius: var(--r-3); overflow: hidden;
  border: 1px solid rgba(11, 11, 18, 0.5);
  background:
    radial-gradient(70% 60% at 78% 18%, rgba(140, 82, 255, 0.24), transparent 70%),
    radial-gradient(60% 50% at 10% 100%, rgba(92, 225, 230, 0.11), transparent 70%),
    linear-gradient(170deg, #12121d, #08080d 70%);
  box-shadow: 0 50px 90px -50px rgba(11, 11, 18, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.ib-hero__art { position: relative; isolation: isolate; aspect-ratio: 5 / 4; }
.ib-hero__art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, #000 30%, transparent 85%);
}
.ib-hero__art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ib-hero__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-top: 1px solid var(--line);
  font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
}
.ib-hero__cap .title-block { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ib-hero__cap .title-block > div { padding: 5px 9px 6px; }
.ib-hero__tag b { font-weight: 500; color: var(--cyan); }
@media (max-width: 999px) {
  .ib-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ib-hero__fig { max-width: 600px; }
}
@media (max-width: 599px) {
  .ib-hero__cap { flex-wrap: wrap; }
  .ib-hero__cap .title-block { grid-template-columns: repeat(3, auto); grid-auto-flow: column; }
  .ib-hero__cap .title-block > div:nth-child(n + 3) { border-top: 0; }
  .ib-hero__cap .title-block > div + div { border-left: 1px solid var(--line-2); }
}

/* stat strip under the hero */
.ib-stats {
  position: relative; z-index: 1; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  margin: clamp(48px, 5vw, 80px) 0 0; border-top: 1px solid var(--line-2);
}
.ib-stat { position: relative; padding: 22px 24px 4px 0; min-width: 0; }
.ib-stat + .ib-stat { padding-left: 24px; border-left: 1px solid var(--line); }
.ib-stat::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 2px;
  background: var(--grad-mark-h); transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--ease-out) calc(var(--i, 0) * 90ms + 0.2s);
}
.ib-stat + .ib-stat::before { left: 24px; }
.ib-stats.is-in .ib-stat::before { transform: scaleX(1); }
.ib-stat__v {
  display: block; font-family: var(--font-mono); font-weight: 500; color: var(--fg);
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.4rem); line-height: 1.05; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ib-stat__v small { font-size: 0.5em; letter-spacing: 0; margin-left: 0.15em; color: var(--accent-text); }
.ib-stat__v--word { font-family: var(--font-sans); letter-spacing: -0.025em; white-space: normal; }
.ib-stat__l { display: block; margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
@media (max-width: 1099px) {
  .ib-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ib-stat:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .ib-stat:nth-child(3n + 1)::before { left: 0; }
  .ib-stat:nth-child(n + 4) { border-top: 1px solid var(--line); margin-top: 18px; }
}
@media (max-width: 639px) {
  .ib-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ib-stat, .ib-stat + .ib-stat { padding: 18px 14px 4px 0; border-left: 0; margin-top: 0; }
  .ib-stat::before, .ib-stat + .ib-stat::before { left: 0; }
  .ib-stat:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .ib-stat:nth-child(even)::before { left: 14px; }
  .ib-stat:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 14px; }
  .ib-stat:nth-child(n + 4) { border-top: 1px solid var(--line); margin-top: 14px; }
  .ib-stats > .ib-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ib-stat__l { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) { .ib-stat::before { transform: none; transition: none; } }
html.ox-failsafe:not(.ox-ready) .ib-stat::before, html:not(.js) .ib-stat::before { transform: none; }

/* =============================================================== 2 Article column */
.ib-body { position: relative; }
.ib-body .article { gap: clamp(40px, 5vw, 96px); }
.ib-body .prose h2 { margin-top: 2.9em; }
.ib-body .prose > h2:first-child { margin-top: 0; }
.ib-body .prose h2 .prose__num { margin-bottom: 14px; }
@media (max-width: 999px) {
  .ib-body .article__aside { margin-bottom: var(--s-2); }
  .ib-body .toc { padding: 16px 0 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; }
  .ib-body .toc__title { margin-bottom: 12px; }
  .ib-body .toc ol {
    display: flex; gap: 8px; overflow-x: auto; border-left: 0; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .ib-body .toc ol::-webkit-scrollbar { display: none; }
  .ib-body .toc li { flex: none; }
  .ib-body .toc a { padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--ink-2); white-space: nowrap; font-size: 0.8125rem; color: var(--fg-2); }
  .ib-body .toc a::before { display: none; }
  .ib-body .toc a[aria-current="true"] { border-color: var(--accent-text); color: var(--fg); }
}
.ib-body .pager__link { position: relative; overflow: hidden; }
.ib-body .pager__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad-mark-h); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out); }
.ib-body .pager__link--next::after { transform-origin: right; }
.ib-body .pager__link:hover::after, .ib-body .pager__link:focus-visible::after { transform: scaleX(1); }
.ib-aside__related { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ib-aside__related p { margin: 0 0 10px; font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-aside__related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ib-aside__related a {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 0.875rem; line-height: 1.35; color: var(--fg-2); text-decoration: none; transition: color var(--t-fast);
}
.ib-aside__related a:hover { color: var(--fg); }
.ib-aside__related .dot { width: 7px; height: 7px; }
@media (max-width: 999px) { .ib-aside__extra, .ib-aside__related { display: none; } }

.prose .ib-lede { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--fg); }
.prose > .wide { margin-top: 1.75em; }
.prose > .wide + p, .prose > .wide + .callout { margin-top: 1.5em; }
.prose h2 { text-wrap: balance; }
.prose h3 { text-wrap: balance; }
.prose .ib-h3 { margin-top: 2.2em; }
.prose p, .prose li { text-wrap: pretty; }

/* cards inside the prose */
.ib-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); list-style: none; padding: 0; }
.ib-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ib-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) and (min-width: 1000px) { .ib-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .ib-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ib-cards--2, .ib-cards--3 { grid-template-columns: minmax(0, 1fr); } }
.ib-cards .card { --card-pad: 22px 22px 24px; gap: 10px; }
.prose .ib-cards h3, .prose .ib-cards h4 { margin: 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.012em; font-weight: 500; color: var(--fg); }
.prose .ib-cards p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.ib-card__k {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-text);
}
.ib-card__big { font-family: var(--font-mono); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -0.04em; color: var(--fg); }
.ib-card__big small { font-size: 0.5em; letter-spacing: 0; color: var(--accent-text); margin-left: 0.1em; }
.ib-card__ico { width: 36px; height: 36px; color: var(--accent-text); }
.ib-card__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ib-cards .card--flag { border-color: rgba(212, 59, 87, 0.28); }
.ib-cards .card--flag .ib-card__k { color: #c2344f; }
.ib-cards .card--flag::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -20%), rgba(242, 100, 123, 0.9), rgba(242, 100, 123, 0.3) 35%, transparent 70%); }
.ib-cards .card--accent-l { border-left: 3px solid var(--accent); }
.ib-flag-ico { width: 18px; height: 18px; flex: none; }
.ib-flag-ico path, .ib-flag-ico line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* highlighted table cells */
.table-wrap .ib-hl td, .table-wrap .ib-hl th { background: rgba(123, 126, 242, 0.07); color: var(--fg); }
.table-wrap .ib-hl > :first-child { box-shadow: inset 3px 0 0 var(--accent); font-weight: 500; }
.table-wrap tbody th { white-space: nowrap; }
.table-wrap td.ib-good { color: #0e7490; font-weight: 500; }
.table-wrap td.ib-bad { color: #c2344f; font-weight: 500; }
.table-wrap td.ib-mid { color: #9a6a10; font-weight: 500; }
.theme-dark .table-wrap td.ib-good { color: var(--cyan); }
.table-wrap caption { caption-side: bottom; padding: 12px 18px; text-align: left; font-size: 0.8125rem; color: var(--fg-3); }
.table-wrap th[scope="row"] { font-weight: 500; color: var(--fg); }

/* =============================================================== 3 Dark interactive panels */
.ib-panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(22px, 3vw, 40px); border-radius: var(--r-3);
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(140, 82, 255, 0.2), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(92, 225, 230, 0.07), transparent 60%),
    linear-gradient(170deg, #11111b, #08080d 60%);
  border: 1px solid rgba(11, 11, 18, 0.6);
  box-shadow: 0 50px 90px -56px rgba(11, 11, 18, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  color: var(--fg-2);
}
.ib-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.ib-panel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.ib-panel__head > :first-child { flex: 1 1 0; min-width: min(100%, 300px); }
.ib-panel__head > :last-child:not(:first-child) { flex: none; }
.ib-panel__kicker { margin: 0 0 8px; font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--cyan); }
.prose .ib-panel h3.ib-panel__title, .ib-panel__title { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); font-weight: 500; }
.ib-panel__sub { margin: 8px 0 0; max-width: 46em; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-3); }
.prose .ib-panel p { max-width: none; }
.ib-panel__foot { margin: clamp(18px, 2vw, 28px) 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.55; color: var(--fg-3); }
.ib-panel__live { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-panel__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.ib-panel :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* shared segmented chips used by the tools */
.ib-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-seg button, .ib-chipbtn {
  appearance: none; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); color: var(--fg-2);
  min-height: 40px; padding: 8px 15px; border-radius: var(--r-pill);
  font: 500 0.875rem/1.2 var(--font-sans); cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.ib-seg button:hover, .ib-chipbtn:hover { border-color: var(--line-3); color: var(--fg); }
.ib-seg button[aria-pressed="true"], .ib-seg button[aria-selected="true"], .ib-chipbtn[aria-pressed="true"] {
  border-color: transparent; color: #0b0b12;
  background: linear-gradient(135deg, #c9b8ff, #a7d4ff 55%, #9cf0f3);
}
.ib-seg button:active, .ib-chipbtn:active { transform: scale(0.97); }

/* range slider used by the tools */
.ib-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0;
  background: transparent; cursor: pointer; --p: 50%;
}
.ib-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan)) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, 0.12);
}
.ib-range::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.ib-range::-moz-range-progress { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan)); }
.ib-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(123, 126, 242, 0.35), 0 6px 16px rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--t-fast);
}
.ib-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(123, 126, 242, 0.35), 0 6px 16px rgba(0, 0, 0, 0.5); }
.ib-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(123, 126, 242, 0.35), 0 6px 16px rgba(0, 0, 0, 0.5); }
.ib-range:focus-visible { outline: none; }
.ib-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #08080d, 0 0 0 5px var(--cyan); }
.ib-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #08080d, 0 0 0 5px var(--cyan); }
.ib-ticks { display: flex; justify-content: space-between; margin-top: 6px; }
.ib-ticks button {
  appearance: none; background: none; border: 0; padding: 6px 2px; min-width: 28px; cursor: pointer;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--fg-4); transition: color var(--t-fast);
}
.ib-ticks button:hover { color: var(--fg-2); }
.ib-ticks button[aria-pressed="true"] { color: var(--cyan); }

/* readout tiles */
.ib-readouts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; }
.ib-ro { padding: 14px 16px 15px; border-radius: var(--r-2); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); min-width: 0; }
.ib-ro__l { display: block; font: 500 10px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-ro__v { display: block; margin-top: 8px; font: 500 clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem)/1.05 var(--font-mono); letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.ib-ro__v small { font-size: 0.55em; letter-spacing: 0; color: var(--fg-3); margin-left: 0.2em; }
.ib-ro__s { display: block; margin-top: 6px; font-size: 0.75rem; line-height: 1.45; color: var(--fg-3); }
@media (max-width: 599px) { .ib-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =============================================================== 4 Weighted bars */
.ib-bars { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; }
.ib-bar { display: grid; grid-template-columns: minmax(150px, 15em) minmax(0, 1fr) 5.2em; gap: 18px; align-items: center; }
.ib-bar__label { font-size: 0.9375rem; line-height: 1.35; color: var(--fg); }
.ib-bar__track { position: relative; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ib-bar__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); border-radius: inherit;
  background: linear-gradient(90deg, var(--ox-600), var(--violet) 45%, var(--blue) 80%, var(--cyan));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease-out) calc(var(--i, 0) * 70ms + 0.1s);
}
.ib-bar__fill--soft { opacity: 0.55; }
.ib-bars.is-in .ib-bar__fill, .is-in > .ib-bars .ib-bar__fill { transform: scaleX(1); }
.ib-bar__val { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); text-align: right; }
.ib-bar__val--crit { color: var(--accent-text); }
@media (max-width: 599px) {
  .ib-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .ib-bar__track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .ib-bar__fill { transform: none; transition: none; } }
html:not(.js) .ib-bar__fill, html.ox-failsafe:not(.ox-ready) .ib-bar__fill { transform: none; }

/* =============================================================== 5 The bridge, CTA, share, sources */
.prose > .process { max-width: none; margin-top: 2em; }
.prose .process__title { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.prose .process__text { margin: 6px 0 0; max-width: 64ch; font-size: 0.9375rem; line-height: 1.6; }
.prose .process__step { padding-bottom: 6px; }
.ib-proc-grid { display: grid; gap: 28px 40px; }
.ib-proc-grid.process--vertical { grid-template-columns: minmax(0, 1fr); }

.prose > .cta-band { max-width: none; margin-top: 2.2em; padding: clamp(28px, 3.6vw, 56px); }
.prose .cta-band h3 { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.prose .cta-band p { color: var(--fg-2); }
.prose .cta-band .eyebrow { margin-bottom: var(--s-4); }

.ib-callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 26px; align-items: center;
  padding: 22px 24px; border-radius: var(--r-3); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-1);
}
.ib-callout__logo { display: grid; place-items: center; width: 132px; height: 56px; padding: 10px 12px; border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); }
.ib-callout__logo img { width: 100%; height: auto; }
.prose .ib-callout p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.prose .ib-callout p + p { margin-top: 4px; }
.prose .ib-callout .ib-callout__t { font-weight: 500; color: var(--fg); font-size: 1rem; }
@media (max-width: 759px) { .ib-callout { grid-template-columns: minmax(0, 1fr); } }

.ib-share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.prose .ib-share p { margin: 0; font-size: 0.9375rem; color: var(--fg-2); }
.ib-share .btn > svg.ib-li, .ib-li-btn > svg.ib-li { fill: currentColor; stroke: none; padding: 9px; }

.ib-sources { font-size: 0.875rem; line-height: 1.6; color: var(--fg-3); }
.prose h2.ib-sources__title {
  margin: 0 0 14px; font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3);
}
.ib-sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: ib-src; }
.ib-sources li { position: relative; padding-left: 34px; counter-increment: ib-src; }
.ib-sources li::before { content: counter(ib-src, decimal-leading-zero); position: absolute; left: 0; top: 0.15em; font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-4); }
.ib-sources .ib-legal { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-2); background: var(--ink-0); color: var(--fg-2); font-size: 0.8125rem; line-height: 1.6; }
.ib-sources .ib-legal strong { color: var(--fg); }
.prose > .ib-sources { max-width: none; margin-top: 2.6em; }

.ib-related-row { margin-top: clamp(40px, 5vw, 72px); }
.ib-related-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: var(--s-5); }
.ib-related-row__head .h4 { margin: 0; }
.ib-related-row .card__eyebrow { display: inline-flex; align-items: center; gap: 8px; }

/* =============================================================== 6 Shared SVG drawing language */
.ib-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ib-svg .ln { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ib-svg .ln-f { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ib-svg .ln-a { fill: none; stroke: var(--ox-300); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ib-svg .ln-c { fill: none; stroke: var(--cyan); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ib-svg .ln-v { fill: none; stroke: #b9a2ff; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ib-svg .ln-d { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ib-svg .face { fill: rgba(123, 126, 242, 0.07); }
.ib-svg .face-2 { fill: rgba(123, 126, 242, 0.14); }
.ib-svg .face-3 { fill: rgba(161, 163, 255, 0.22); }
.ib-svg .face-k { fill: #0b0b12; }
.ib-svg .hatch { fill: url(#ox-hatch); }
.ib-svg .led { fill: var(--cyan); }
.ib-svg .led-v { fill: #b9a2ff; }
.ib-svg .led-w { fill: var(--warn); }
.ib-svg .led-r { fill: var(--bad); }
.ib-svg .tx { font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; fill: rgba(244, 244, 248, 0.5); }
.ib-svg .tx-s { font-size: 8.5px; }
.ib-svg .tx-l { font-size: 12px; }
.ib-svg .tx-hi { fill: var(--fg); }
.ib-svg .tx-a { fill: var(--ox-300); }
.ib-svg .tx-c { fill: var(--cyan); }
.ib-svg .tx-mid { text-anchor: middle; }
.ib-svg .tx-end { text-anchor: end; }
.ib-svg .pulse, .ib-ai__rack .pulse { fill: none; stroke: #e9fbff; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 6 100; animation: ib-pulse var(--pd, 3.6s) linear infinite; animation-delay: var(--pdl, 0s); filter: drop-shadow(0 0 4px rgba(92, 225, 230, 0.9)); }
.ib-svg .pulse--v, .ib-ai__rack .pulse--v { stroke: #d8cbff; filter: drop-shadow(0 0 4px rgba(185, 162, 255, 0.9)); }
@keyframes ib-pulse { from { stroke-dashoffset: 106; } to { stroke-dashoffset: 0; } }
.ib-svg .blink { animation: ib-blink var(--bd, 2.2s) ease-in-out infinite; animation-delay: var(--bdl, 0s); }
@keyframes ib-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .ib-svg .pulse, .ib-ai__rack .pulse { animation: none; stroke-dashoffset: 60; }
  .ib-svg .blink { animation: none; }
}

/* paper versions of the drawing strokes (diagrams sitting straight on paper) */
.theme-paper .ib-svg .ln, .section--paper .ib-svg--paper .ln { stroke: rgba(11, 11, 18, 0.32); }
.section--paper .ib-svg--paper .tx { fill: var(--paper-fg-3); }

/* =============================================================== 7 Choosing a data centre */
/* scorecard: weight bars + a 1-5 rating per criterion */
.ib-score__rows .ib-bar { grid-template-columns: minmax(140px, 12.5em) minmax(0, 1fr) 4.8em auto; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ib-score__rows .ib-bar:last-child { border-bottom: 0; }
.ib-rate { display: flex; gap: 5px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ib-rate legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ib-rate label {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02);
  font: 500 11px/1 var(--font-mono); color: var(--fg-3); cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.ib-rate label:hover { border-color: var(--line-3); color: var(--fg); }
.ib-rate label:active { transform: scale(0.94); }
.ib-rate input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ib-rate label.is-on { background: rgba(123, 126, 242, 0.2); border-color: rgba(161, 163, 255, 0.45); color: var(--fg); }
.ib-rate label.is-cur { background: linear-gradient(135deg, #c9b8ff, #a7d4ff 55%, #9cf0f3); border-color: transparent; color: #0b0b12; }
.ib-rate label:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ib-score__result {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: center;
  margin-top: 26px; padding: 22px 24px; border-radius: var(--r-3); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
}
html:not(.js) .ib-score__result { display: none; }
.ib-score__dial { position: relative; width: 128px; height: 128px; }
.ib-score__ring { width: 100%; height: 100%; display: block; }
#scoreArc { transition: stroke-dasharray 0.6s var(--ease-out); }
.prose .ib-score__num { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.ib-score__num span { font: 500 2.5rem/1 var(--font-mono); letter-spacing: -0.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
.ib-score__num small { display: block; margin-top: 4px; font: 500 9.5px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.prose .ib-score__text p { margin: 0; }
.prose .ib-score__k { font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--cyan); }
.prose .ib-score__verdict { margin-top: 8px; font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--fg); text-wrap: balance; }
.prose .ib-score__gap { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-3); }
.ib-score__gap b { color: var(--fg-2); font-weight: 500; }
@media (max-width: 759px) {
  .ib-score__rows .ib-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 0; }
  .ib-score__rows .ib-bar__track { grid-column: 1 / -1; grid-row: 2; }
  .ib-score__rows .ib-rate { grid-column: 1 / -1; grid-row: 3; }
  .ib-rate label { flex: 1; width: auto; height: 38px; }
  .ib-score__result { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* PUE benchmark */
.prose .ib-pue__big { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.ib-pue__lbl { font: 500 11px/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--fg-3); }
.ib-pue__big output { font: 500 clamp(2.75rem, 2.2rem + 2vw, 4rem)/0.9 var(--font-mono); letter-spacing: -0.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
.ib-pue__scale { position: relative; height: 58px; margin: 6px 12px 4px; }
.ib-pue__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--blue) 14%, var(--ox-500) 36%, #b86ad6 60%, var(--bad) 100%);
  box-shadow: 0 0 30px -6px rgba(123, 126, 242, 0.5);
}
.ib-pue__tick {
  position: absolute; left: var(--x); top: 22px; transform: translateX(-50%);
  font: 500 10px/1.25 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; text-align: center;
}
.ib-pue__tick::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 6px; background: var(--line-3); }
.ib-pue__tick:first-of-type { transform: none; text-align: left; }
.ib-pue__tick:first-of-type::before { left: 0; }
.ib-pue__tick b { display: block; font-size: 12px; color: var(--fg); font-weight: 500; letter-spacing: 0.02em; }
.ib-pue__tick--avg b { color: var(--cyan); }
.ib-pue__marker { position: absolute; left: 0; right: 0; top: -9px; height: 30px; pointer-events: none; transform: translateX(var(--x)); transition: transform 0.35s var(--ease-out); }
.ib-pue__marker::before { content: ""; position: absolute; left: -1.5px; top: 0; width: 3px; height: 100%; border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(8, 8, 13, 0.6), 0 0 16px rgba(92, 225, 230, 0.9); }
.ib-pue .ib-range { margin-top: 4px; }
.ib-pue__split { position: relative; display: flex; height: 28px; margin-top: 22px; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, 0.04); }
.ib-pue__it { flex: none; width: 40%; background: linear-gradient(90deg, var(--violet), var(--blue)); }
.ib-pue__oh {
  flex: none; width: 60%; transform-origin: left; transform: scaleX(var(--s, 0.37)); transition: transform 0.35s var(--ease-out);
  background: repeating-linear-gradient(-45deg, rgba(242, 100, 123, 0.75) 0 5px, rgba(242, 100, 123, 0.35) 5px 10px);
}
.ib-pue__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 18px; font: 500 10px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-pue__legend span { display: inline-flex; align-items: center; gap: 8px; }
.ib-pue__legend i { width: 14px; height: 8px; border-radius: 2px; }
.ib-pue__k-it { background: linear-gradient(90deg, var(--violet), var(--blue)); }
.ib-pue__k-oh { background: repeating-linear-gradient(-45deg, rgba(242, 100, 123, 0.75) 0 3px, rgba(242, 100, 123, 0.35) 3px 6px); }
@media (max-width: 599px) {
  .ib-pue__scale { height: 84px; }
  .ib-pue__tick:nth-of-type(even) { top: 50px; }
  .ib-pue__tick:nth-of-type(even)::before { top: -37px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .ib-pue__marker, .ib-pue__oh, #scoreArc { transition: none; } }

/* N / N+1 / 2N line diagrams on the paper cards */
.ib-mini { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 0 6px; overflow: visible; }
.ib-mini__u rect { fill: rgba(123, 126, 242, 0.1); stroke: var(--ox-500); stroke-width: 1.2; }
.ib-mini__u--b rect { fill: rgba(92, 225, 230, 0.14); stroke: #2a9fb0; }
.ib-mini__spare { fill: rgba(123, 126, 242, 0.04); stroke: var(--ox-500); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ib-mini__bus { fill: none; stroke: var(--fg-3); stroke-width: 1.2; stroke-linejoin: round; }
.ib-mini__bus--b { stroke: #2a9fb0; }
.ib-mini__bus--spare { stroke: var(--ox-500); stroke-dasharray: 3 3; }
.ib-mini__load { fill: var(--fg); }
.ib-mini text { font: 500 9px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-2); text-anchor: middle; }
.ib-mini .ib-mini__lab { fill: var(--accent-text); }

/* =============================================================== 8 Data sovereignty */
.ib-defs .card { gap: 12px; }
.callout + h2, .callout + .ib-h3 { margin-top: 2.6em; }
/* spectrum */
.ib-sv__rail { position: relative; margin: 4px 0 26px; --track-top: 47px; }
.ib-sv__scale { display: flex; justify-content: space-between; margin: 0 0 12px; font: 500 10px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-4); }
.ib-sv__track { position: absolute; left: 10%; right: 10%; top: var(--track-top); height: 2px; border-radius: 2px; background: var(--line-2); }
.ib-sv__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan)); transform-origin: left; transform: scaleX(var(--f, 0.75)); transition: transform 0.6s var(--ease-out); box-shadow: 0 0 12px rgba(92, 225, 230, 0.5); }
.ib-sv__tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ib-sv__tab {
  appearance: none; border: 0; background: none; padding: 0 2px 4px; cursor: pointer;
  display: grid; justify-items: center; gap: 10px; color: var(--fg-3); font: 500 0.8125rem/1.25 var(--font-sans); text-align: center;
  transition: color var(--t-fast);
}
.ib-sv__ico {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #0e0e15; color: var(--fg-2);
  transition: background-color var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-spring), box-shadow var(--t-med);
}
.ib-sv__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ib-sv__tab:hover { color: var(--fg); }
.ib-sv__tab:hover .ib-sv__ico { border-color: var(--line-3); transform: translateY(-2px); }
.ib-sv__tab.is-past .ib-sv__ico { border-color: rgba(161, 163, 255, 0.55); color: var(--ox-200); }
.ib-sv__tab[aria-selected="true"] { color: var(--fg); }
.ib-sv__tab[aria-selected="true"] .ib-sv__ico {
  border-color: transparent; color: #0b0b12; transform: scale(1.08);
  background: linear-gradient(135deg, #c9b8ff, #a7d4ff 55%, #9cf0f3);
  box-shadow: 0 0 0 6px rgba(123, 126, 242, 0.18), 0 10px 30px -8px rgba(92, 225, 230, 0.6);
}
.ib-sv__tab:focus-visible { outline: none; }
.ib-sv__tab:focus-visible .ib-sv__ico { outline: 2px solid var(--cyan); outline-offset: 4px; }
.ib-sv__detail { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-3); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); }
.prose h4.ib-sv__title { margin: 0 0 18px; font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; color: var(--fg); }
.ib-sv__specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ib-sv__spec { padding: 14px 14px 12px; border-radius: var(--r-2); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); min-width: 0; }
.ib-sv__l { display: block; font: 500 10px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-sv__v { display: block; margin-top: 8px; font-size: 1.0625rem; line-height: 1.25; color: var(--fg); }
.ib-sv__m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.ib-sv__m i { height: 4px; border-radius: 2px; background: var(--line-2); transition: background-color var(--t-med); }
.ib-sv__v.lo + .ib-sv__m i:nth-child(-n + 1) { background: var(--bad); }
.ib-sv__v.mid + .ib-sv__m i:nth-child(-n + 2) { background: var(--warn); }
.ib-sv__v.hi + .ib-sv__m i { background: var(--cyan); }
.prose .ib-sv__how { margin: 18px 0 0; max-width: 72ch; font-size: 1rem; line-height: 1.65; color: var(--fg-2); }
.ib-sv__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ib-sv__rows > div { padding: 12px 16px; border-radius: var(--r-2); background: rgba(255, 255, 255, 0.025); border-left: 2px solid var(--cyan); font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.ib-sv__rows > .ib-sv__wo { border-left-color: var(--warn); }
.ib-sv__rows b { display: block; margin-bottom: 4px; font: 500 10px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 759px) {
  .ib-sv__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ib-sv__rows { grid-template-columns: minmax(0, 1fr); }
  .ib-sv__tab { font-size: 0.6875rem; }
  .ib-sv__ico { width: 42px; height: 42px; }
  .ib-sv__ico svg { width: 20px; height: 20px; }
  .ib-sv__rail { --track-top: 43px; }
}
@media (prefers-reduced-motion: reduce) { .ib-sv__fill, .ib-sv__ico { transition: none; } }

/* four physical facts as rings */
.ib-rings { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.ib-rings__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ib-rings__r { fill: rgba(123, 126, 242, 0.05); stroke: rgba(11, 11, 18, 0.24); stroke-width: 1; transition: fill var(--t-med), stroke var(--t-med); }
.ib-rings__r[data-ring="3"] { fill: rgba(123, 126, 242, 0.1); }
.ib-rings__r.is-on { fill: rgba(123, 126, 242, 0.2); stroke: var(--ox-500); stroke-width: 1.6; }
.ib-rings__t { font: 500 8.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--fg-3); text-anchor: middle; transition: fill var(--t-med); }
.ib-rings__t.is-on { fill: var(--accent-text); }
.ib-rings__rack rect { fill: var(--fg); }
.ib-rings__rack path { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; fill: none; }
.ib-rings__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ib-rings__item {
  padding: 18px 20px 20px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1);
  transition: border-color var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.ib-rings__item.is-on { border-color: var(--ox-500); transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(90, 93, 199, 0.55); }
.ib-rings__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.prose .ib-rings__item h3 { margin: 6px 0 0; font-size: 1.0625rem; line-height: 1.3; }
.prose .ib-rings__item p { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.6; }
@media (max-width: 899px) {
  .ib-rings { grid-template-columns: minmax(0, 1fr); }
  .ib-rings__svg { max-width: 300px; margin-inline: auto; }
}
@media (max-width: 599px) { .ib-rings__list { grid-template-columns: minmax(0, 1fr); } }
/* opaque isometric faces so near objects hide what is behind them */
.ib-svg .fo-1 { fill: #13131f; }
.ib-svg .fo-2 { fill: #0f0f19; }
.ib-svg .fo-3 { fill: #1b1b2b; }
.ib-svg .ln-f2 { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* =============================================================== 9 AI/GPU data hall */
.prose > figure.wide { margin-bottom: 0; }
/* density by workload */
.ib-dens { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1); }
.ib-dens__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 !important; }
.ib-dens__ind { font: 500 10px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-4); }
.ib-dens__plot {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2vw, 28px);
  height: clamp(190px, 24vw, 270px); margin-top: 40px; border-bottom: 1px solid var(--line-3);
}
.ib-dens__col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.ib-dens__stem { position: relative; width: min(68px, 72%); height: var(--h); }
.ib-dens__bar {
  position: absolute; inset: 0; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--blue), var(--ox-500));
  transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 110ms + 0.1s);
}
.ib-dens__col--hot .ib-dens__bar { background: linear-gradient(180deg, #f2647b, var(--violet) 70%, var(--ox-600)); }
.ib-dens.is-in .ib-dens__bar { transform: scaleY(1); }
.ib-dens__kw {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 8px; transform: translateX(-50%);
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.02em; color: var(--fg); white-space: nowrap;
  opacity: 0; transition: opacity 0.4s calc(var(--i, 0) * 110ms + 0.6s);
}
.ib-dens.is-in .ib-dens__kw { opacity: 1; }
.ib-dens__air { position: absolute; left: 0; right: 0; bottom: var(--y); z-index: 1; border-top: 1px dashed #2a9fb0; pointer-events: none; }
.ib-dens__air b { position: absolute; left: 0; bottom: 5px; padding: 0 6px 0 0; background: var(--ink-2); font: 500 10px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: #1f8796; }
.ib-dens__names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2vw, 28px); margin-top: 12px; text-align: center; font-size: 0.8125rem; line-height: 1.35; color: var(--fg-2); text-wrap: balance; }
@media (max-width: 599px) {
  .ib-dens__names { font-size: 0.6875rem; }
  .ib-dens__kw { font-size: 9.5px; letter-spacing: 0; }
  .ib-dens__air b { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ib-dens__bar { transform: none; transition: none; } .ib-dens__kw { opacity: 1; transition: none; } }
html:not(.js) .ib-dens__bar, html.ox-failsafe:not(.ox-ready) .ib-dens__bar { transform: none; }
html:not(.js) .ib-dens__kw, html.ox-failsafe:not(.ox-ready) .ib-dens__kw { opacity: 1; }

/* rack density and cooling calculator */
.ib-ai__grid { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.ib-ai__rackwrap { text-align: center; }
.ib-ai__rack { display: block; width: 100%; max-width: 210px; height: auto; margin-inline: auto; overflow: visible; }
.ib-ai__frame { fill: #0c0c14; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.2; }
.ib-ai__rails { fill: none; stroke: rgba(255, 255, 255, 0.1); }
.ib-ai__heat { opacity: var(--heat, 0.3); transition: opacity 0.5s var(--ease-out); }
.ib-ai__sled { transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); transform-box: fill-box; }
.ib-ai__sled rect { fill: #1a1a29; stroke: rgba(161, 163, 255, 0.5); stroke-width: 1; }
.ib-ai__sled .led { fill: var(--cyan); }
.ib-ai__sled.is-off { opacity: 0; transform: translateY(-6px); }
.ib-ai__air path { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ib-ai__air .ib-ai__air--hot { stroke: #f2a07b; }
.ib-ai__air, .ib-ai__loop { transition: opacity 0.4s var(--ease-out); }
.ib-ai__loop { opacity: 0; }
.ib-ai__sup, .ib-ai__ret { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ib-ai__sup { stroke: var(--cyan); }
.ib-ai__ret { stroke: #b9a2ff; }
.ib-ai.is-liquid .ib-ai__loop { opacity: 1; }
.ib-ai.is-liquid .ib-ai__air { opacity: 0.12; }
.prose .ib-ai__mode { margin: 12px 0 0; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--blue); }
.ib-ai.is-liquid .ib-ai__mode { color: var(--cyan); }
.prose .ib-ai__kw { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.ib-ai__kw span { font: 500 clamp(3rem, 2.4rem + 2.4vw, 4.5rem)/0.9 var(--font-mono); letter-spacing: -0.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
.ib-ai__kw small { font: 500 11px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.prose .ib-ai__ctx { display: inline-block; margin: 14px 0 16px; padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid rgba(161, 163, 255, 0.4); background: rgba(123, 126, 242, 0.18); color: var(--fg); font-size: 0.875rem; line-height: 1.3; }
.ib-ai .ib-readouts { margin-top: 16px; }
.prose .ib-ai__coolh { margin: 28px 0 12px; font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-ai__cool { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ib-ai__c {
  display: grid; gap: 4px; justify-items: center; padding: 14px 10px 12px; border-radius: var(--r-2); text-align: center;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--t-med), background-color var(--t-med), opacity var(--t-med), box-shadow var(--t-med);
}
.ib-ai__c b { font-size: 0.875rem; line-height: 1.25; font-weight: 500; color: var(--fg); }
.ib-ai__c span { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ib-ai__c em { font-style: normal; font-size: 0.8125rem; color: var(--fg-2); }
.ib-ai__c svg { width: 20px; height: 20px; margin-top: 4px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib-ai__c.ok { border-color: rgba(92, 225, 230, 0.55); background: rgba(92, 225, 230, 0.07); box-shadow: 0 14px 30px -20px rgba(92, 225, 230, 0.7); }
.ib-ai__c.ok svg { stroke: var(--cyan); }
.ib-ai__c.no { opacity: 0.42; }
.ib-ai__c.no svg { stroke: var(--bad); }
@media (max-width: 759px) {
  .ib-ai__grid { grid-template-columns: minmax(0, 1fr); }
  .ib-ai__rack { max-width: 150px; }
  .ib-ai__cool { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ib-ai__cool > :last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ib-ai__sled, .ib-ai__heat, .ib-ai__air, .ib-ai__loop { transition: none; } }

/* leaf-spine fabric */
.ib-fab { margin: 0; }
.ib-fab__svg { display: block; width: 100%; height: auto; }
.ib-fab__sw rect { fill: #1c1c2c; stroke: rgba(161, 163, 255, 0.6); stroke-width: 1.2; }
.ib-fab__sw .ib-fab__leaf { fill: rgba(123, 126, 242, 0.24); stroke: var(--ox-400); }
.ib-fab__lbl text { font: 500 14px/1 var(--font-sans); fill: var(--fg); text-anchor: middle; }
.ib-fab__racks rect { fill: #0d0d15; stroke: rgba(255, 255, 255, 0.3); }
.ib-fab__racks path { fill: none; stroke: rgba(255, 255, 255, 0.12); }
.ib-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0 !important; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ib-legend span { display: inline-flex; align-items: center; gap: 9px; }
.ib-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
.ib-fab__note { margin: 10px 0 0 !important; font-size: 0.875rem; color: var(--fg-3); }
@media (max-width: 599px) { .ib-fab__svg .tx { display: none; } .ib-fab__lbl text { font-size: 17px; } }
.ib-fab__svg { max-width: 760px; margin-inline: auto; }
@media (max-width: 599px) {
  .ib-readouts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ib-fab__lbl text { font-size: 21px; }
}
.ib-svg .ln-dv { fill: none; stroke: #b9a2ff; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.ib-svg .ln-dv--f { stroke-opacity: 0.45; }
.ib-svg .ln-dim { fill: none; stroke: #b9a2ff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ib-svg .ln-cut { fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-dasharray: 10 4 2 4; vector-effect: non-scaling-stroke; opacity: 0.8; }
.ib-svg .fo-glass { fill: rgba(92, 225, 230, 0.07); }
.ib-svg .fo-live { fill: rgba(92, 225, 230, 0.14); stroke: var(--cyan); stroke-width: 1; }

/* =============================================================== 10 Data centre fit-out */
.ib-fo__steps { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ib-fo__steps::before, .ib-fo__steps::after {
  content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 16px; height: 2px; border-radius: 2px; background: var(--line-2);
}
.ib-fo__steps::after { background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan)); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform 0.55s var(--ease-out); box-shadow: 0 0 10px rgba(92, 225, 230, 0.5); }
.ib-fo__step {
  position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer; padding: 0 2px 4px;
  display: grid; justify-items: center; gap: 9px; text-align: center; color: var(--fg-3); font: 500 0.75rem/1.3 var(--font-sans); transition: color var(--t-fast);
}
.ib-fo__dot {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #0e0e15; color: var(--fg-2); font: 500 11px/1 var(--font-mono);
  transition: background-color var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-spring), box-shadow var(--t-med);
}
.ib-fo__step:hover { color: var(--fg); }
.ib-fo__step.is-done .ib-fo__dot { border-color: rgba(161, 163, 255, 0.6); background: #23234a; color: var(--fg); }
.ib-fo__step[aria-selected="true"] { color: var(--fg); }
.ib-fo__step[aria-selected="true"] .ib-fo__dot { border-color: transparent; background: linear-gradient(135deg, #c9b8ff, #a7d4ff 55%, #9cf0f3); color: #0b0b12; transform: scale(1.12); box-shadow: 0 0 0 6px rgba(123, 126, 242, 0.18), 0 8px 24px -8px rgba(92, 225, 230, 0.7); }
.ib-fo__step:focus-visible { outline: none; }
.ib-fo__step:focus-visible .ib-fo__dot { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ib-fo__range { margin: 16px 0 4px; }
.ib-fo__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; margin-top: 18px; }
.ib-fo__art { position: relative; border-radius: var(--r-3); border: 1px solid var(--line); background: radial-gradient(80% 70% at 60% 40%, rgba(123, 126, 242, 0.12), transparent 70%), rgba(255, 255, 255, 0.015); overflow: hidden; }
.ib-fo__svg { display: block; width: 100%; height: auto; }
.ib-fo__art [data-ph] { opacity: 0; transform: translateY(-10px); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out); }
.ib-fo__art [data-ph="0"], .ib-fo__art [data-ph].is-on { opacity: 1; transform: none; }
.ib-fo__art [data-ph].is-cur .ln, .ib-fo__art [data-ph].is-cur .ln-f2 { stroke: rgba(92, 225, 230, 0.75); }
html:not(.js) .ib-fo__art [data-ph] { opacity: 1; transform: none; }
.ib-fo__detail { padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-3); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); }
.prose .ib-fo__head { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.ib-fo__num { font: 500 2.5rem/1 var(--font-mono); letter-spacing: -0.05em; color: var(--fg); }
.ib-fo__of { font: 500 10.5px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.prose h4.ib-fo__title { margin: 10px 0 0; font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; color: var(--fg); }
.prose .ib-fo__desc { margin: 10px 0 0; font-size: 0.96875rem; line-height: 1.65; color: var(--fg-2); }
.prose .ib-fo__out { margin: 14px 0 0; padding: 12px 14px; border-left: 2px solid var(--cyan); border-radius: 0 var(--r-2) var(--r-2) 0; background: rgba(92, 225, 230, 0.06); font-size: 0.9375rem; line-height: 1.5; color: var(--fg); }
.ib-fo__out b { display: block; margin-bottom: 3px; font: 500 10px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--cyan); }
.prose .ib-fo__link { margin-top: 14px; }
.ib-fo__link[hidden] { display: none; }
.ib-fo__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ib-fo__nav button[disabled] { opacity: 0.4; pointer-events: none; }
@media (max-width: 899px) { .ib-fo__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .ib-fo__lbl { display: none; }
  .ib-fo__dot { width: 30px; height: 30px; }
  .ib-fo__steps::before, .ib-fo__steps::after { top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ib-fo__art [data-ph], .ib-fo__steps::after, .ib-fo__dot { transition: none; } }

/* commissioning stairs */
.ib-stairs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; height: 190px; margin-top: 1.6em; border-bottom: 1px solid var(--line-3); }
.ib-stairs__s {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; height: var(--h); min-height: 62px; min-width: 0;
  padding: 12px 14px; border-radius: 6px 6px 0 0; border: 1px solid rgba(90, 93, 199, 0.28); border-bottom: 0;
  background: linear-gradient(180deg, rgba(123, 126, 242, 0.2), rgba(123, 126, 242, 0.05));
  font-size: 0.8125rem; line-height: 1.25; color: var(--fg-2); cursor: default;
  transform-origin: bottom; transform: scaleY(0); transition: transform 0.9s var(--ease-out) calc(var(--i, 0) * 100ms), background-color var(--t-fast), box-shadow var(--t-med);
}
.ib-stairs.is-in .ib-stairs__s { transform: scaleY(1); }
.ib-stairs__s b { font: 500 1.25rem/1 var(--font-mono); letter-spacing: -0.03em; color: var(--fg); }
.ib-stairs__s--top { background: linear-gradient(180deg, var(--ox-500), var(--ox-600)); border-color: transparent; color: rgba(255, 255, 255, 0.85); box-shadow: 0 20px 40px -20px rgba(90, 93, 199, 0.8); }
.ib-stairs__s--top b { color: #fff; }
.ib-stairs__s.is-hl { box-shadow: inset 0 0 0 2px var(--ox-500); }
.ib-stairs__s--top.is-hl { box-shadow: inset 0 0 0 2px #fff, 0 20px 40px -20px rgba(90, 93, 199, 0.8); }
.ib-ltab tr.is-hl th, .ib-ltab tr.is-hl td { background: rgba(123, 126, 242, 0.1); }
@media (max-width: 599px) { .ib-stairs { height: 150px; gap: 4px; } .ib-stairs__s { min-height: 50px; padding: 8px 6px; font-size: 0.625rem; overflow-wrap: anywhere; } .ib-stairs__s b { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ib-stairs__s { transform: none; transition: none; } }
html:not(.js) .ib-stairs__s, html.ox-failsafe:not(.ox-ready) .ib-stairs__s { transform: none; }

/* bars on a paper card */
.ib-bars.ib-bars--card { gap: 0; padding: clamp(14px, 2.2vw, 26px) clamp(16px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--ink-2); box-shadow: var(--shadow-1); }
.ib-bars--card .ib-bar { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ib-bars--card .ib-bar:last-child { border-bottom: 0; }
.ib-bars--card .ib-bar__track { background: var(--ink-0); }

/* =============================================================== 11 VMware to Nutanix */
.ib-cd__days { font: 500 112px/1 var(--font-mono); letter-spacing: -0.06em; fill: var(--fg); }
.ib-cd__elapsed { fill: none; stroke: #8c52ff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(140, 82, 255, 0.7)); }
.prose .ib-small { font-size: 0.875rem; line-height: 1.6; color: var(--fg-3); }

/* timeline accents */
.prose .ib-tl .timeline__body h3 { margin: 0; }
.prose .ib-tl .timeline__body p { margin-top: 6px; }
.ib-tl .ib-tl--dispute .timeline__date { color: #c2344f; }
.ib-tl.is-in > .ib-tl--dispute::before { background: #f2647b; box-shadow: 0 0 0 4px rgba(242, 100, 123, 0.15), 0 0 14px rgba(242, 100, 123, 0.5); }
.ib-tl .ib-tl--future .timeline__date { color: var(--fg); font-weight: 600; }
.ib-tl.is-in > .ib-tl--future::before { background: var(--ink-1); box-shadow: inset 0 0 0 3px var(--ox-500), 0 0 0 6px rgba(123, 126, 242, 0.2); }
.prose .ib-tl__cd { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 14px !important; padding: 10px 16px; border-radius: var(--r-2); background: var(--paper-fg); color: #fff; }
.ib-tl__cd > span { font: 500 10px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.ib-tl__cd b { font: 500 1.125rem/1.2 var(--font-mono); letter-spacing: -0.02em; }
.ib-tl__cd b span { color: var(--cyan); }
@media (max-width: 899px) { .ib-tl .timeline__item { padding-bottom: var(--s-6); } }

/* price-shock scale */
.ib-shock { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1); }
.ib-shock__plot { position: relative; height: 112px; margin-top: 22px; border-radius: 8px; background: linear-gradient(90deg, rgba(123, 126, 242, 0.08), rgba(123, 126, 242, 0.14)); }
.ib-shock__plot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.ib-shock__band {
  position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 0 8px 8px 0;
  background: repeating-linear-gradient(-45deg, rgba(242, 100, 123, 0.5) 0 6px, rgba(242, 100, 123, 0.28) 6px 12px);
  border-left: 2px solid #d43b57; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease-out) 0.2s;
}
.ib-shock__band b { position: absolute; left: 12px; bottom: 10px; right: 10px; font: 500 10.5px/1.35 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #8e1d32; }
.ib-shock__mk { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--paper-fg); opacity: 0; transition: opacity 0.4s 1.1s; }
.ib-shock__mk b, .ib-shock__mk small { position: absolute; left: 10px; white-space: nowrap; }
.ib-shock__mk b { top: 10px; font: 600 0.9375rem/1 var(--font-sans); color: var(--paper-fg); }
.ib-shock__mk small { top: 30px; font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-fg-2); }
.ib-shock.is-in .ib-shock__band { transform: scaleX(1); }
.ib-shock.is-in .ib-shock__mk { opacity: 1; }
.ib-shock__axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 10px/1 var(--font-mono); color: var(--fg-3); }
@media (max-width: 599px) {
  .ib-shock__plot { height: 130px; }
  .ib-shock__band b { font-size: 9px; left: 8px; }
  .ib-shock__mk b, .ib-shock__mk small { left: auto; right: 10px; text-align: right; }
  .ib-shock__axis span:nth-child(even) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .ib-shock__band { transform: none; transition: none; } .ib-shock__mk { opacity: 1; transition: none; } }
html:not(.js) .ib-shock__band, html.ox-failsafe:not(.ox-ready) .ib-shock__band { transform: none; }
html:not(.js) .ib-shock__mk, html.ox-failsafe:not(.ox-ready) .ib-shock__mk { opacity: 1; }

/* vendor logos */
.ib-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.ib-logos__tile { display: grid; place-items: center; width: 200px; height: 64px; padding: 14px 22px; border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.ib-logos__tile img { width: 100%; height: auto; max-height: 30px; object-fit: contain; }
.ib-logos__tile--muted { opacity: 0.5; filter: grayscale(1); }
.ib-logos__vs { font: 500 11px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.prose > .ib-logos + .ib-lede { margin-top: 1.4em; }

/* two-up charts */
.ib-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ib-duo__c { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1); min-width: 0; }
.prose .ib-duo__c > p { margin: 0; }
.prose .ib-duo__s { margin-top: 8px !important; font-size: 0.875rem; line-height: 1.55; color: var(--fg-3); }
.ib-opts { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; counter-reset: ib-opt; }
.ib-opts__o { position: relative; padding: 12px 14px 12px 52px; border-radius: var(--r-2); background: var(--ink-0); counter-increment: ib-opt; }
.ib-opts__o::before { content: counter(ib-opt); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--font-mono); color: #fff; background: var(--c, var(--ox-500)); }
.ib-opts__o--1 { --c: #c2344f; } .ib-opts__o--2 { --c: #b07510; } .ib-opts__o--3 { --c: var(--ox-500); }
.ib-opts__o--3 { box-shadow: inset 0 0 0 1px rgba(123, 126, 242, 0.45); background: rgba(123, 126, 242, 0.07); }
.ib-opts__o b { display: block; font-size: 0.96875rem; font-weight: 500; color: var(--fg); }
.ib-opts__o span { display: block; margin-top: 3px; font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.ib-grab { display: grid; gap: 14px; margin: 18px 0 14px; }
.ib-grab__row { display: grid; gap: 6px; }
.ib-grab__bar { display: block; height: 16px; width: var(--w); border-radius: 4px; transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.ib-grab__row:nth-child(2) .ib-grab__bar { transition-delay: 0.15s; } .ib-grab__row:nth-child(3) .ib-grab__bar { transition-delay: 0.3s; }
.ib-grab.is-in .ib-grab__bar { transform: scaleX(1); }
.ib-grab__bar--all { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ib-grab__bar--tgt { background: linear-gradient(90deg, var(--ox-500), var(--violet)); }
.ib-grab__bar--now { background: var(--paper-fg); }
.ib-grab__l { font-size: 0.875rem; color: var(--fg-2); }
.ib-grab__l b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); margin-right: 4px; }
.ib-duo__c--grab { display: flex; flex-direction: column; }
.ib-duo__c--grab .ib-grab { flex: 1; align-content: center; gap: 20px; margin: 22px 0 18px; }
@media (max-width: 799px) { .ib-duo { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ib-grab__bar { transform: none; transition: none; } }
html:not(.js) .ib-grab__bar, html.ox-failsafe:not(.ox-ready) .ib-grab__bar { transform: none; }

/* platforms */
.ib-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ib-plat { display: flex; flex-direction: column; padding: 20px 20px 22px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1); min-width: 0; transition: border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.ib-plat:hover { border-color: var(--line-3); transform: translateY(-2px); }
.ib-plat__h { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ib-plat__logo { display: flex; align-items: center; gap: 12px; height: 26px; margin-bottom: 14px; }
.ib-plat__logo img { height: 22px; width: auto; max-width: 140px; }
.ib-plat__logo--two img { height: 22px; }
.prose .ib-plat h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.prose .ib-plat__fit { margin: 6px 0 0; font: 500 10.5px/1.45 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.ib-pc { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); }
.ib-pc li { position: relative; padding-left: 24px; }
.ib-pc li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 15px; height: 15px; border-radius: 50%; }
.ib-pc li::after { content: ""; position: absolute; }
.ib-pc .pro::before { background: rgba(14, 116, 144, 0.12); }
.ib-pc .pro::after { left: 4.5px; top: calc(0.2em + 4px); width: 6px; height: 3.5px; border-left: 1.5px solid #0e7490; border-bottom: 1.5px solid #0e7490; transform: rotate(-45deg); }
.ib-pc .con::before { background: rgba(194, 52, 79, 0.1); }
.ib-pc .con::after { left: 4px; top: calc(0.2em + 7px); width: 7px; height: 1.5px; background: #c2344f; }
@media (max-width: 1199px) { .ib-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ib-plats { grid-template-columns: minmax(0, 1fr); } }

/* comparison table */
.ib-cmp table { min-width: 860px; }
.ib-cmp th[scope="row"] { white-space: normal; min-width: 140px; }
.ib-cmp td { font-size: 0.875rem; }
.ib-cmp .ib-cmp__nx { background: rgba(123, 126, 242, 0.07); }
.ib-cmp thead .ib-cmp__nx { color: var(--accent-text); }
.ib-cmp:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* worked scenario */
.ib-scn { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1); }
.ib-scn figcaption { display: grid; gap: 8px; margin: 0 !important; }
.ib-scn__ass { font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.ib-scn__ass b { color: var(--fg); font-weight: 500; }
.ib-scn__rows { display: grid; gap: 0; margin-top: 18px; }
.ib-scn__row { display: grid; grid-template-columns: minmax(170px, 15em) minmax(0, 1fr) minmax(120px, 11em); gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.ib-scn__n { font-size: 0.9375rem; line-height: 1.3; color: var(--fg); }
.ib-scn__n small, .ib-scn__v small { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.4; color: var(--fg-3); }
.ib-scn__t { position: relative; height: 12px; border-radius: 99px; background: var(--ink-0); overflow: hidden; }
.ib-scn__f { position: absolute; top: 0; bottom: 0; left: var(--a, 0); width: var(--w); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.ib-scn.is-in .ib-scn__f { transform: scaleX(1); }
.ib-scn__f--red { background: linear-gradient(90deg, #e0566f, #f2647b); }
.ib-scn__f--soft { opacity: 0.6; }
.ib-scn__f--band { background: repeating-linear-gradient(-45deg, var(--ox-500) 0 5px, var(--violet) 5px 10px); }
.ib-scn__f--cy { background: #2a9fb0; }
.ib-scn__v { font: 500 1rem/1.2 var(--font-mono); color: var(--fg); text-align: right; }
@media (max-width: 699px) {
  .ib-scn__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ib-scn__v { text-align: left; }
  .ib-scn__v small { display: inline; margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ib-scn__f { transform: none; transition: none; } }
html:not(.js) .ib-scn__f, html.ox-failsafe:not(.ox-ready) .ib-scn__f { transform: none; }

/* calculator */
.ib-vm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-bottom: 20px; }
.ib-vm__lab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-vm__lab output { font: 500 1.75rem/1 var(--font-mono); letter-spacing: -0.04em; text-transform: none; color: var(--fg); }
.ib-vm__lab small { width: 100%; font-size: 10px; letter-spacing: 0.06em; color: var(--fg-4); }
.ib-vm__ctrl .ib-range + .ib-vm__lab { margin-top: 18px; }
.prose .ib-vm__cores { margin: 16px 0 0; font: 500 0.9375rem/1.3 var(--font-mono); color: var(--fg-2); }
.ib-vm__cores span { color: var(--cyan); font-size: 1.25rem; }
.ib-vm__estate { display: flex; flex-direction: column; padding: 16px; border-radius: var(--r-3); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.ib-vm__hosts { flex: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; min-height: 92px; align-content: center; }
.ib-vm__host { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; aspect-ratio: 1.6 / 1; border-radius: 3px; border: 1px solid rgba(161, 163, 255, 0.4); background: #15152a; animation: ib-host-in 0.35s var(--ease-out) both; }
.ib-vm__host i { border-radius: 1.5px; background: linear-gradient(180deg, var(--cyan), var(--blue)); opacity: var(--o, 0.5); }
@keyframes ib-host-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.prose .ib-vm__cap { margin: 10px 0 0; font: 500 10px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-ro--hero { border-color: rgba(161, 163, 255, 0.5); background: rgba(123, 126, 242, 0.14); }
.ib-vm__res { --n: 4; }
@media (max-width: 999px) { .ib-vm__res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .ib-vm__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ib-vm__host { animation: none; } }
.ib-tl__cd b { color: #fff; }
.ib-shock__key { background: repeating-linear-gradient(-45deg, rgba(242, 100, 123, 0.8) 0 3px, rgba(242, 100, 123, 0.4) 3px 6px) !important; height: 10px !important; }
.ib-shock__legend { margin-top: 14px !important; }
@media (max-width: 599px) { .ib-shock__mk small { display: none; } .ib-shock__mk b { right: 8px; } }

/* =============================================================== 12 Data centre operations */
/* hero monitoring trace */
.ib-mon__thr { fill: none; stroke: #f2647b; stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.7; vector-effect: non-scaling-stroke; }
.ib-svg .ib-mon__thrt { fill: #f2a0ae; }
.ib-mon__trace { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(111, 168, 240, 0.6)); }
.ib-mon__ping { transform-box: fill-box; transform-origin: center; animation: ib-ping 2.2s var(--ease-out) infinite; }
@keyframes ib-ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.ib-mon__scan { fill: url(#ox-grad-mark-v); fill: var(--cyan); opacity: 0.35; animation: ib-scan 5s linear infinite; }
@keyframes ib-scan { from { transform: translateX(0); } to { transform: translateX(440px); } }
@media (prefers-reduced-motion: reduce) { .ib-mon__ping, .ib-mon__scan { animation: none; } .ib-mon__scan { opacity: 0; } }

/* operational stack */
.ib-stk { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ib-stk__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ib-stk__p { transition: transform var(--t-med) var(--ease-out); }
.ib-stk__top { fill: rgba(123, 126, 242, 0.1); transition: fill var(--t-med); }
.ib-stk__r { fill: rgba(90, 93, 199, 0.35); }
.ib-stk__f { fill: rgba(90, 93, 199, 0.22); }
.ib-stk__ln { fill: none; stroke: rgba(67, 69, 154, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--t-med); }
.ib-stk__p--f .ib-stk__top { fill: rgba(11, 11, 18, 0.06); }
.ib-stk__p--f .ib-stk__r, .ib-stk__p--f .ib-stk__f { fill: rgba(11, 11, 18, 0.2); }
.ib-stk__p--f .ib-stk__ln { stroke: rgba(11, 11, 18, 0.35); }
.ib-stk__k { font: 600 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ox-600); }
.ib-stk__p--f .ib-stk__k { fill: var(--fg-3); font-weight: 500; font-size: 10px; }
.ib-stk__riser { fill: none; stroke: var(--ox-500); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; transition: stroke var(--t-med); }
.ib-stk__p.is-on { transform: translateX(10px); }
.ib-stk__p.is-on .ib-stk__top { fill: rgba(123, 126, 242, 0.42); }
.ib-stk__p.is-on .ib-stk__ln { stroke: var(--ox-600); }
.ib-stk.is-spof .ib-stk__riser { stroke: #d43b57; stroke-dasharray: 6 3; }
.ib-stk.is-spof .ib-stk__p:not(.ib-stk__p--f) .ib-stk__ln { stroke: rgba(212, 59, 87, 0.6); }
.ib-stk__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ib-stk__item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1);
  transition: border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.ib-stk__item.is-on { border-color: var(--ox-500); transform: translateX(-4px); }
.ib-stk__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ib-stk__tag { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(123, 126, 242, 0.14); color: var(--ox-600); font: 600 13px/1 var(--font-mono); }
.ib-stk__item--flag { border-color: rgba(212, 59, 87, 0.3); }
.ib-stk__item--flag .ib-stk__tag { background: rgba(212, 59, 87, 0.12); color: #c2344f; }
.ib-stk__item--flag.is-on { border-color: #d43b57; }
.prose .ib-stk__item h3 { margin: 4px 0 0; font-size: 1rem; line-height: 1.3; }
.prose .ib-stk__item p { margin: 4px 0 0; font-size: 0.9063rem; line-height: 1.55; }
@media (max-width: 899px) { .ib-stk { grid-template-columns: minmax(0, 1fr); } .ib-stk__art { max-width: 300px; margin-inline: auto; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ib-stk__p, .ib-stk__item { transition: none; } }

.ib-score-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
.ib-score-cta__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-2); background: rgba(123, 126, 242, 0.12); color: var(--ox-600); }
.ib-score-cta__ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 759px) { .ib-score-cta { grid-template-columns: minmax(0, 1fr); } }

/* downtime budget */
.ib-nines__chips { margin-bottom: 22px; }
.ib-nines__chips button { font-family: var(--font-mono); font-size: 0.8125rem; }
.ib-nines__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-bottom: 20px; }
.prose .ib-nines__big p { margin: 0; }
.prose .ib-nines__a { font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-nines__a span { color: var(--cyan); }
.prose .ib-nines__y { margin-top: 6px; font: 500 clamp(2.75rem, 2.1rem + 2.6vw, 4.25rem)/1 var(--font-mono); letter-spacing: -0.05em; color: var(--fg); }
.prose .ib-nines__s { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); }
.ib-nines__bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ib-nines__bars li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 5.6em; gap: 12px; align-items: center; font: 500 11px/1.2 var(--font-mono); color: var(--fg-3); cursor: pointer; transition: color var(--t-fast); }
.ib-nines__bars i { position: relative; display: block; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.ib-nines__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: rgba(161, 163, 255, 0.35); transition: background-color var(--t-med); }
.ib-nines__bars b { font-weight: 500; text-align: right; color: var(--fg-2); }
.ib-nines__bars li.is-on { color: var(--fg); }
.ib-nines__bars li.is-on i::after { background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan)); box-shadow: 0 0 14px rgba(92, 225, 230, 0.5); }
.ib-nines__bars li.is-on b { color: var(--cyan); }
.ib-ninetab tbody tr { cursor: pointer; }
.ib-ninetab tbody tr.is-on th, .ib-ninetab tbody tr.is-on td { background: rgba(92, 225, 230, 0.1); }
@media (max-width: 759px) { .ib-nines__grid { grid-template-columns: minmax(0, 1fr); } }

/* incident loop */
.ib-loop { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ib-loop__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ib-loop__ring { fill: none; stroke: rgba(11, 11, 18, 0.18); stroke-width: 2; }
.ib-svg .ib-loop__pulse { stroke: var(--ox-500); stroke-width: 3; filter: none; }
.ib-loop__node circle { fill: var(--ink-2); stroke: rgba(11, 11, 18, 0.28); stroke-width: 1.2; transition: fill var(--t-med), stroke var(--t-med); }
.ib-loop__node text { font: 600 12px/1 var(--font-mono); fill: var(--fg-2); text-anchor: middle; dominant-baseline: central; transition: fill var(--t-med); }
.ib-loop__node.is-on circle { fill: var(--ox-500); stroke: var(--ox-500); }
.ib-loop__node.is-on text { fill: #fff; }
.ib-loop__c1, .ib-loop__c2 { text-anchor: middle; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.ib-loop__c1 { font-size: 13px; font-weight: 600; fill: var(--fg); }
.ib-loop__c2 { font-size: 10px; fill: var(--fg-3); }
.ib-loop__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ib-loop__item { padding: 14px 16px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1); transition: border-color var(--t-med); }
.ib-loop__item.is-on { border-color: var(--ox-500); }
.ib-loop__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.prose .ib-loop__item h4 { margin: 4px 0 0; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--fg); }
.prose .ib-loop__item p { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.55; }
@media (max-width: 899px) { .ib-loop { grid-template-columns: minmax(0, 1fr); } .ib-loop__svg { max-width: 260px; margin-inline: auto; } }
@media (max-width: 559px) { .ib-loop__list { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================== 13 DCIM */
.ib-r14__srv { fill: #181828; stroke: rgba(161, 163, 255, 0.35); stroke-width: 1; }
.ib-r14__hit { fill: rgba(92, 225, 230, 0.16); stroke: var(--cyan); stroke-width: 1.2; }
.ib-r14__eol { fill: rgba(245, 184, 74, 0.12); stroke: rgba(245, 184, 74, 0.7); stroke-width: 1; }
.ib-r14__blank { fill: url(#ox-hatch); stroke: rgba(255, 255, 255, 0.12); }
.ib-r14__sw { fill: #1f1f35; stroke: rgba(161, 163, 255, 0.6); }
.ib-r14__pp { fill: #141422; stroke: rgba(255, 255, 255, 0.3); }
.ib-r14__port { fill: rgba(92, 225, 230, 0.55); }
.ib-r14__port--free { fill: rgba(255, 255, 255, 0.12); }
.ib-r14__port--hot { fill: #fff; filter: drop-shadow(0 0 3px var(--cyan)); }
.ib-r14__pport { fill: rgba(255, 255, 255, 0.35); }
.ib-r14__pport--hot { fill: var(--cyan); filter: drop-shadow(0 0 3px var(--cyan)); }
.ib-r14__ret { fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; animation: ib-ret 2.4s ease-in-out infinite; }
@keyframes ib-ret { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ib-r14__ret { animation: none; } }
/* one record, six views */
.ib-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.ib-hub__card { padding: 18px 20px 20px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); box-shadow: var(--shadow-1); transition: border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.ib-hub__card:hover { border-color: rgba(90, 93, 199, 0.45); transform: translateY(-2px); }
.ib-hub__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(123, 126, 242, 0.1); color: var(--ox-600); }
.ib-hub__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.prose .ib-hub__card h3 { margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.3; }
.prose .ib-hub__card p { margin: 6px 0 0; font-size: 0.9063rem; line-height: 1.6; }
.ib-hub__core { grid-column: 1 / -1; position: relative; height: 140px; display: grid; place-items: center; }
.ib-hub__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ib-hub__ln { fill: none; stroke: rgba(90, 93, 199, 0.4); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ib-hub__pl { fill: none; stroke: var(--ox-500); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 8 100; animation: ib-pulse 2.4s linear infinite; animation-delay: var(--pdl, 0s); }
.ib-hub__node { position: relative; z-index: 1; padding: 12px 20px; border-radius: var(--r-pill); background: var(--paper-fg); color: #fff; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px rgba(90, 93, 199, 0.35), 0 20px 40px -18px rgba(11, 11, 18, 0.6); }
@media (max-width: 899px) {
  .ib-hub { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ib-hub__core { order: -1; height: auto; padding: 4px 0 8px; place-items: start; }
  .ib-hub__svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ib-hub__pl { animation: none; opacity: 0; } }

/* the dashboard */
.ib-dcv__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.ib-dcv__sp { font: 500 10.5px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-4); }
.ib-dcv__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ib-dcv__warn { color: var(--warn) !important; }
.ib-dcv__mid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.ib-dcv__sw { padding: 18px; border-radius: var(--r-3); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.prose .ib-dcv__lab { margin: 0; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-dcv__grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 5px; margin-top: 14px; padding: 10px; border-radius: 6px; background: #0b0b12; border: 1px solid var(--line-2); }
.ib-dcv__cell {
  appearance: none; padding: 0; margin: 0; aspect-ratio: 1 / 1.15; min-width: 0; border-radius: 3px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.ib-dcv__cell.u { border-color: transparent; background: linear-gradient(180deg, rgba(92, 225, 230, 0.85), rgba(111, 168, 240, 0.6)); }
.ib-dcv__cell.f { background: transparent; border-color: rgba(255, 255, 255, 0.3); }
.ib-dcv__cell.r { border-color: transparent; background: #b9a2ff; box-shadow: 0 0 10px rgba(185, 162, 255, 0.7); }
.ib-dcv__cell.x { border-color: transparent; background: #f2647b; box-shadow: 0 0 10px rgba(242, 100, 123, 0.6); }
.ib-dcv__cell.is-cur { outline: 2px solid #fff; outline-offset: 1px; transform: scale(1.12); }
.ib-dcv__cell:focus { outline: none; }
.ib-dcv__cell:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ib-dcv__cell.blink { animation: ib-port var(--bd, 1.6s) ease-in-out infinite; animation-delay: var(--bdl, 0s); }
@keyframes ib-port { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.prose .ib-dcv__read { margin: 12px 0 0; font: 500 11.5px/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--fg); min-height: 1.4em; }
.prose .ib-dcv__legend { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 10px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-dcv__legend span { display: inline-flex; align-items: center; gap: 7px; }
.ib-dcv__legend i { width: 10px; height: 10px; border-radius: 2px; }
.ib-dcv__legend .lg-u { background: linear-gradient(180deg, rgba(92, 225, 230, 0.85), rgba(111, 168, 240, 0.6)); }
.ib-dcv__legend .lg-f { border: 1px solid rgba(255, 255, 255, 0.35); }
.ib-dcv__legend .lg-r { background: #b9a2ff; }
.ib-dcv__legend .lg-x { background: #f2647b; }
.ib-dcv__status { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ib-dcv__status li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-2); background: rgba(255, 255, 255, 0.025); font-size: 0.875rem; line-height: 1.4; color: var(--fg-2); }
.ib-dcv__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.ib-dcv__dot--warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.ib-dcv__dot--bad { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
@media (max-width: 999px) { .ib-dcv__mid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) { .ib-dcv__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ib-dcv__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .ib-dcv__cell.blink { animation: none; } }

/* =============================================================== 14 Data destruction and ITAD */
.ib-shred-hero__p { fill: rgba(123, 126, 242, 0.22); stroke: rgba(161, 163, 255, 0.55); stroke-width: 0.8; }
.ib-shred-hero__q { fill: rgba(92, 225, 230, 0.55); }
/* backwards, not forwards: the start state covers the delay and the end state is the element's own
   style, so nothing looks different, but ~490 finished fragments no longer each hold an animated
   transform that Chrome re-layers on every scroll frame */
html.js .ib-shred-hero__p, html.js .ib-shred-hero__q { animation: ib-frag 0.6s var(--ease-out) backwards; animation-delay: calc(var(--d, 0s) + 0.6s); }
@keyframes ib-frag { from { opacity: 0; translate: -10px -4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html.js .ib-shred-hero__p, html.js .ib-shred-hero__q { opacity: 1; animation: none; } }
/* clear, purge, destroy */
.ib-methods__w { font: 500 1.75rem/1 var(--font-mono); letter-spacing: -0.03em; color: var(--fg); }
.ib-methods__m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 120px; }
.ib-methods__m i { height: 6px; border-radius: 3px; background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line); }
.ib-methods__m i.on { background: linear-gradient(90deg, var(--ox-500), var(--violet)); box-shadow: none; }
.prose .ib-cards .ib-methods__r { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-methods__r b { color: var(--fg); font-weight: 600; }

/* particle sizes to scale */
.ib-shred__groups { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 22px; }
.prose .ib-shred__gl { margin: 0 0 8px; font: 500 10px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.ib-shred__groups button { font-family: var(--font-mono); font-size: 0.8125rem; }
.ib-shred__grid { display: grid; grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ib-shred__stage { position: relative; padding: 0 0 22px 22px; }
.ib-shred__cv { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; background: #0b0b12; box-shadow: inset 0 0 0 1px var(--line-2); transition: opacity 0.25s var(--ease-out); }
.ib-shred__cv.is-fading { opacity: 0.15; }
.ib-shred__dim { position: absolute; font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--fg-3); }
.ib-shred__dim--x { left: 22px; right: 0; bottom: 0; text-align: center; border-top: 1px solid var(--line-3); padding-top: 6px; }
.ib-shred__dim--y { top: 0; bottom: 22px; left: 0; width: 14px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; border-left: 1px solid var(--line-3); padding-left: 4px; }
.prose .ib-shred__name { margin: 0; font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--cyan); }
.prose .ib-shred__big { margin: 8px 0 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.ib-shred__big span { font: 500 clamp(2.75rem, 2.1rem + 2.6vw, 4rem)/1 var(--font-mono); letter-spacing: -0.05em; color: var(--fg); }
.ib-shred__big small { font: 500 11px/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.prose .ib-shred__note { margin: 16px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 759px) { .ib-shred__grid { grid-template-columns: minmax(0, 1fr); } .ib-shred__stage { max-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .ib-shred__cv { transition: none; } }

/* custody chain */
.ib-chain { position: relative; }
.ib-chain__svg { position: absolute; left: 0; top: 0; width: 100%; height: 70px; }
.ib-chain__ln { fill: none; stroke: rgba(90, 93, 199, 0.4); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ib-svg.ib-chain__svg .pulse { stroke: var(--ox-500); stroke-width: 3; filter: none; }
.ib-chain__list { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ib-chain__item { padding: 0 4px 6px; text-align: center; border-radius: var(--r-2); outline-offset: 4px; }
.ib-chain__item:focus-visible { outline: 2px solid var(--focus); }
.ib-chain__node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin: 12px auto 16px; border-radius: 50%;
  background: var(--paper); border: 2px solid rgba(90, 93, 199, 0.5); font: 600 12px/1 var(--font-mono); color: var(--ox-600);
  transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med) var(--ease-spring);
}
.ib-chain__item.is-on .ib-chain__node { background: var(--ox-500); border-color: var(--ox-500); color: #fff; box-shadow: 0 0 0 6px rgba(123, 126, 242, 0.18); transform: scale(1.08); }
.prose .ib-chain__item h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.prose .ib-chain__item p { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.55; }
@media (max-width: 899px) {
  .ib-chain__svg { display: none; }
  .ib-chain__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ib-chain__item { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; text-align: left; padding: 0 0 18px; position: relative; }
  .ib-chain__item::before { content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: rgba(90, 93, 199, 0.3); }
  .ib-chain__item:last-child::before { display: none; }
  .ib-chain__node { grid-row: 1 / span 2; margin: 0; }
  .prose .ib-chain__item h3 { padding-top: 12px; }
}

/* =============================================================== 15 Tables as cards on small screens */
@media (max-width: 639px) {
  .table-wrap.ib-tcards { overflow: visible; background: none; border: 0; border-radius: 0; }
  .ib-tcards table, .ib-tcards tbody, .ib-tcards tr, .ib-tcards th, .ib-tcards td { display: block; width: auto; }
  .ib-tcards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ib-tcards tbody { display: grid; gap: 10px; }
  .ib-tcards tbody tr { padding: 14px 16px 10px; border-radius: var(--r-3); border: 1px solid var(--line-2); background: var(--ink-2); box-shadow: var(--shadow-1); }
  .ib-tcards tbody tr:hover td, .ib-tcards tbody tr:hover th { background: none; }
  .table-wrap.ib-tcards tbody th[scope="row"] { padding: 0 0 8px; border: 0; white-space: normal; font-size: 1rem; background: none; box-shadow: none; }
  .table-wrap.ib-tcards tbody td { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); text-align: left; background: none; }
  .table-wrap.ib-tcards tbody td::before { content: attr(data-label); font: 500 10px/1.6 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
  .table-wrap.ib-tcards tbody tr.ib-hl { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }
  .table-wrap.ib-tcards tbody tr.ib-hl > * { background: none; box-shadow: none; }
  .ib-ninetab tbody tr.is-on { border-color: var(--cyan); }
}

/* hero meta and caption on mid-width screens */
.ib-hero .article-meta { gap: 10px 22px; }
.ib-hero__cap { flex-wrap: wrap; }
.ib-hero__cap .title-block { flex: none; }
.ib-hero__tag { flex: 1 1 160px; min-width: 0; }

/* =============================================================== Review fixes */
/* pager titles: no single-word last lines */
.ib-body .pager__title { text-wrap: balance; }
/* callouts on phones: icon sits beside the title, the text gets the full width */
@media (max-width: 599px) {
  .ib-body .prose > .callout { padding: 18px 18px 20px; }
  .ib-body .prose > .callout::before { left: 18px; top: 17px; }
  .ib-body .prose > .callout--key::before { left: 20px; top: 20px; }
  .ib-body .prose > .callout .callout__title { display: flex; align-items: center; min-height: 24px; padding-left: 36px; margin-bottom: 8px; }
  .ib-body .prose > .callout p { font-size: 1rem; line-height: 1.65; }
}
/* short labels under the hero figures: balance, so no single-word last lines */
.ib-stat__l { text-wrap: balance; }
/* row headers in the last table row: no bottom rule (ox.css only clears the td) */
.ib-body .table-wrap tbody tr:last-child th { border-bottom: 0; }
/* 1000-1199px: the prose column is narrow beside the contents list, so the CTA button drops below the copy */
@media (min-width: 1000px) and (max-width: 1199px) { .prose > .cta-band .cta-band__inner { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Shared article chrome (kept identical in insights.css and insights-b.css):
   stage tag on its own line above the byline, LinkedIn pill + all-guides link in the aside,
   one end-of-article share row. */
.article-meta .ins-stage { flex-basis: 100%; }
.article-meta .ins-stage + *::before { display: none; }
@media (max-width: 599px) { .article-meta .article-meta__author { flex-basis: 100%; } }
.btn > svg.ib-li { fill: currentColor; stroke: none; padding: 9px; }
.ib-aside__extra { margin-top: var(--s-6); display: grid; gap: 14px; justify-items: start; }
@media (max-width: 999px) { .ib-aside__extra { display: none; } }
.prose > .ins-share { max-width: none; }
.ins-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 2.4em !important; padding-top: 22px; border-top: 1px solid var(--line-2); font-size: 0.9375rem; color: var(--fg-3); }
.ins-share__label { margin-right: auto; padding-right: 8px; }
.ins-copy.is-done span { color: var(--accent-text); }
.ins-stage { color: var(--fg-2); }
.ins-stage > i { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; vertical-align: 0; background: var(--c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 22%, transparent); }
/* Sources panel, matched to the other guides */
.prose > .ib-sources { margin-top: 2em; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-3); background: var(--ink-0); border: 1px solid var(--line); color: var(--fg-2); }
.prose h2.ib-sources__title { margin: 0 0 12px; }
.ib-sources li { padding-left: 18px; line-height: 1.55; }
.ib-sources li::before { content: ""; top: 0.68em; width: 8px; height: 1px; background: var(--accent-text); }
.ib-sources .ib-legal { margin-top: 14px; padding: 0; background: none; color: var(--fg-3); }
/* neutral tile in place of a vendor logo (public cloud) */
.ib-plat__logo--icon { gap: 10px; }
.ib-plat__ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--ink-2); }
.ib-plat__ico svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linejoin: round; }
.ib-plat__ico-l { font: 500 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-2); }