/* Products section helpers (Carbon tokens only) */

/* stat strip */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--cds-border-subtle-01); border: 1px solid var(--cds-border-subtle-01); margin-block: var(--cds-spacing-07); }
.strip > div { background: var(--cds-layer-01); padding: var(--cds-spacing-06); }
.strip .num { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.1; font-weight: 300; color: var(--cds-text-primary); }
.strip .num span, .strip .num-unit { font-size: .45em; margin-inline-start: .15em; color: var(--cds-text-secondary); }
.strip .lbl { font-size: .75rem; letter-spacing: .32px; text-transform: uppercase; color: var(--cds-text-secondary); margin-block: var(--cds-spacing-03); font-family: "IBM Plex Mono", monospace; }
.strip p { margin: 0; color: var(--cds-text-secondary); }
.dot { display: inline-block; inline-size: .5rem; block-size: .5rem; background: var(--ca-lime); border-radius: 50%; margin-inline-end: .35rem; }

/* placeholder / callout panels */
.placeholder { border: 1px dashed var(--cds-border-strong-01); background: var(--cds-layer-01); padding: var(--cds-spacing-06); display: flex; align-items: center; justify-content: center; text-align: center; min-block-size: 8rem; font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .32px; text-transform: uppercase; color: var(--cds-text-secondary); }
.placeholder p { text-transform: none; letter-spacing: 0; font-family: var(--ca-font); font-size: 1rem; margin-block-start: var(--cds-spacing-03); }
.invariant { background: var(--cds-layer-01); padding: var(--cds-spacing-05); }
.invariant .n { font-size: .75rem; letter-spacing: .32px; text-transform: uppercase; color: var(--cds-text-secondary); font-family: "IBM Plex Mono", monospace; }
.invariant .k { font-size: 1.25rem; font-weight: 600; margin-block: var(--cds-spacing-03); }
.invariant .d { color: var(--cds-text-secondary); }
.note { font-size: .875rem; color: var(--cds-text-secondary); max-inline-size: 78ch; }
.list-none { list-style: none; padding: 0; }
.mini-list { margin: 0; padding-inline-start: 1.1rem; color: var(--cds-text-secondary); }
.mini-list li { margin-block: var(--cds-spacing-03); }
.price { font-size: 2.125rem; line-height: 1; font-weight: 600; margin-block: var(--cds-spacing-02) var(--cds-spacing-04); }
.price small { font-family: "IBM Plex Mono", monospace; font-size: .75rem; color: var(--cds-text-secondary); font-weight: 400; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--cds-spacing-05); }
.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--cds-spacing-05); }
.perf-grid .perf-stat { background: var(--cds-layer-01); padding: var(--cds-spacing-06); display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.perf-grid .num { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; font-weight: 300; }
.perf-grid .lbl { color: var(--cds-text-secondary); }
.perf-callout { margin-block-start: var(--cds-spacing-05); padding: var(--cds-spacing-05); background: var(--cds-layer-01); border-inline-start: 3px solid var(--ca-lime); color: var(--cds-text-secondary); }
.strong { color: var(--cds-text-primary); font-weight: 700; }

/* comparison page hero quick-view canvas */
.compare-quick-view { min-inline-size: 0; background: var(--cds-layer-02); border: 1px solid var(--cds-border-subtle-01); }
.compare-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cds-spacing-05); margin-block-start: var(--cds-spacing-05); }
.compare-quick-grid > div { min-inline-size: 0; padding-block-end: var(--cds-spacing-04); border-block-end: 1px solid var(--cds-border-subtle-01); }
.compare-quick-grid .ca-eyebrow { margin-block-end: var(--cds-spacing-03); }
.compare-quick-grid .ca-body { line-height: 1.5; }
@media (max-width: 42rem) { .compare-quick-grid { grid-template-columns: 1fr; } }

/* code blocks */
.code { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); padding: var(--cds-spacing-05); overflow-x: auto; font-family: "IBM Plex Mono", monospace; font-size: .8125rem; line-height: 1.6; white-space: pre; }
.code, .code * { font-family: "IBM Plex Mono", monospace; }
.c-key { color: var(--cds-link-primary); }
.c-str { color: var(--cds-support-success, #42be65); }

/* tables */
.comp-table, .benchmark-table, .summary-table, .xdp-share-table { inline-size: 100%; }
.benchmark-table td, .benchmark-table th, .summary-table td, .xdp-share-table td { text-align: center; }
.benchmark-table th[scope=row], .summary-table th[scope=row], .xdp-share-table th[scope=row] { text-align: start; }
.ca-ours { color: var(--cds-link-primary); }
.cds--data-table tbody th[scope=row] { font-weight: 600; }

/* guarantee list */
.guarantee-list { list-style: none; margin: 0; padding: 0; }
.guarantee-list li { display: flex; gap: var(--cds-spacing-05); padding-block: var(--cds-spacing-06); border-block-end: 1px solid var(--cds-border-subtle-01); }
.guarantee-list li:last-child { border-block-end: 0; }
.g-mark { font-family: "IBM Plex Mono", monospace; font-size: .75rem; color: var(--cds-text-secondary); flex-shrink: 0; padding-block-start: .25rem; }
.g-title { font-weight: 600; font-size: 1.125rem; }
.g-desc { color: var(--cds-text-secondary); margin-block-start: var(--cds-spacing-02); }

/* flow diagram (elfowl) */
.flow-scroll { overflow-x: auto; }
.flow-wrap { position: relative; }
.flow-track { display: grid; gap: var(--cds-spacing-05); grid-template-columns: repeat(5, 1fr); min-inline-size: 56rem; }
.flow-connector { display: none; }
.flow-step { padding: var(--cds-spacing-05); border: 1px solid var(--cds-border-strong-01); background: var(--cds-layer-02); }
.flow-title { font-size: 1.25rem; font-weight: 600; margin-block: var(--cds-spacing-02); }
.flow-desc { margin: 0; color: var(--cds-text-secondary); }
@media (max-width: 65.99rem) { .flow-track { grid-template-columns: 1fr; min-inline-size: 0; } }

/* neurowall hero */
.tagline-rotator { margin-block-start: var(--cds-spacing-06); display: inline-flex; align-items: center; gap: var(--cds-spacing-04); padding: var(--cds-spacing-04) var(--cds-spacing-05); border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); max-inline-size: 100%; }
.tagline-text { transition: opacity .25s ease; }
.tagline-text.swap { opacity: 0; }
.tagline-caret { inline-size: .5rem; block-size: 1rem; background: var(--ca-lime); display: inline-block; animation: ca-blink 1.1s steps(2) infinite; }
@keyframes ca-blink { 50% { opacity: 0; } }
.hero-preview { border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); align-self: start; min-inline-size: 0; }
.hero-preview img { display: block; inline-size: 100%; block-size: auto; }
.hero-preview-bar { background: var(--cds-layer-02); padding: var(--cds-spacing-03) var(--cds-spacing-05); display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-04); border-block-end: 1px solid var(--cds-border-subtle-01); }
.hero-preview-bar .bar-label { margin: 0; }
.dots { display: flex; gap: 5px; }
.dot-w { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--cds-border-strong-01); }
.chip-dot { inline-size: 5px; block-size: 5px; border-radius: 50%; display: inline-block; background: currentColor; margin-inline-end: 4px; }
.hero-preview-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-block-start: 1px solid var(--cds-border-subtle-01); }
.hero-preview-foot > div { padding: var(--cds-spacing-04) var(--cds-spacing-05); border-inline-end: 1px solid var(--cds-border-subtle-01); }
.hero-preview-foot > div:last-child { border-inline-end: 0; }
.pf-num { font-size: 1.5rem; line-height: 1; }
.pf-unit { font-size: .8rem; }
.pf-lbl { font-family: "IBM Plex Mono", monospace; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cds-text-secondary); margin-block-start: 4px; }

/* best-for cards */
.best-card { position: relative; }
.card-icon { display: inline-flex; inline-size: 2rem; block-size: 2rem; margin-block-end: var(--cds-spacing-04); color: var(--ca-lime); }
.card-icon svg { inline-size: 100%; block-size: 100%; stroke: currentColor; }
.light-icon, .ico { color: var(--cds-text-primary); }

/* also-included */
.also-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--cds-spacing-05); margin-block-start: var(--cds-spacing-06); }
.also { background: var(--cds-layer-01); padding: var(--cds-spacing-05); display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--cds-spacing-04); row-gap: var(--cds-spacing-03); align-items: center; }
.also .ico { inline-size: 2rem; block-size: 2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cds-border-strong-01); font-family: "IBM Plex Mono", monospace; }
.also h5 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.also p { grid-column: 1 / -1; margin: 0; color: var(--cds-text-secondary); }

/* Linux market share */
.lms-label { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cds-text-secondary); margin-block-end: var(--cds-spacing-05); }
.lms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-02); }
.lms-stat { background: var(--cds-layer-02); padding: var(--cds-spacing-05); }
.lms-full { grid-column: 1 / -1; }
.lms-num { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1; font-weight: 300; margin-block-end: var(--cds-spacing-03); }
.lms-pct { font-size: .55em; color: var(--cds-link-primary); }
.lms-desc { font-size: .875rem; color: var(--cds-text-secondary); }

/* performance panel */
.perf-panel { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); }
.perf-col { border-inline-end: 1px solid var(--cds-border-subtle-01); }
.perf-col:last-child { border-inline-end: 0; }
.perf-col-head { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: var(--cds-spacing-05); border-block-end: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-02); }
.perf-stat { padding: var(--cds-spacing-05); }
.perf-col .perf-stat { border-block-end: 1px solid var(--cds-border-subtle-01); }
.perf-col .perf-stat:last-child { border-block-end: 0; }
.perf-stat-label { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cds-text-secondary); margin-block-end: var(--cds-spacing-03); }
.perf-stat-value { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; font-weight: 300; margin-block-end: var(--cds-spacing-04); }
.perf-stat-unit { font-size: .5em; color: var(--cds-text-secondary); }
.perf-bar-wrap { block-size: 4px; background: var(--cds-border-subtle-01); margin-block-end: var(--cds-spacing-04); overflow: hidden; }
.perf-bar { block-size: 100%; inline-size: 100%; background: var(--ca-lime); opacity: .6; }
.perf-stat-note { font-size: .875rem; color: var(--cds-text-secondary); line-height: 1.45; }
@media (max-width: 65.99rem) { .perf-panel { grid-template-columns: 1fr; } .perf-col { border-inline-end: 0; border-block-end: 1px solid var(--cds-border-subtle-01); } .perf-col:last-child { border-block-end: 0; } }

/* proof figures */
.proof-fig-head { background: var(--cds-layer-02); padding: var(--cds-spacing-03) var(--cds-spacing-05); gap: var(--cds-spacing-04); margin: calc(-1 * var(--cds-spacing-05)) calc(-1 * var(--cds-spacing-05)) var(--cds-spacing-05); }
figure.cds--tile img { display: block; inline-size: 100%; block-size: auto; margin-block-end: var(--cds-spacing-05); }

/* product surface gallery (tabs; JS toggles .active) */
.surf-wrap { border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); min-inline-size: 0; }
.surf-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block-end: 1px solid var(--cds-border-subtle-01); }
.surf-tab { appearance: none; border: 0; border-inline-end: 1px solid var(--cds-border-subtle-01); background: transparent; color: var(--cds-text-primary); cursor: pointer; text-align: start; padding: var(--cds-spacing-05); display: flex; flex-direction: column; gap: var(--cds-spacing-02); position: relative; min-inline-size: 0; }
.surf-tab:last-child { border-inline-end: 0; }
.surf-tab:hover, .surf-tab.active { background: var(--cds-layer-02); }
.surf-tab:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.surf-tab.active::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: var(--ca-lime); }
.t-eye { font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cds-text-secondary); }
.t-name { font-size: 1.25rem; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; color: var(--cds-text-secondary); }
.surf-tab.active .t-name { color: var(--cds-text-primary); }
.t-meta { font-family: "IBM Plex Mono", monospace; font-size: .6875rem; color: var(--cds-text-secondary); overflow-wrap: anywhere; }
.surf-body { min-inline-size: 0; inline-size: 100%; overflow: hidden; }
.surf-panel { display: none; min-inline-size: 0; }
.surf-panel.active { display: block; }
.surf-stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.surf-shot { grid-column: 1 / -1; grid-row: 1; background: var(--cds-layer-02); padding: var(--cds-spacing-05); position: relative; border-block-end: 1px solid var(--cds-border-subtle-01); }
.surf-shot img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--cds-border-subtle-01); }
.surf-nav { grid-row: 2; position: relative; z-index: 4; inline-size: 2.5rem; block-size: 2.5rem; margin: var(--cds-spacing-04) var(--cds-spacing-05); display: grid; place-items: center; border: 1px solid var(--cds-border-strong-01); background: var(--cds-layer-01); color: var(--cds-text-primary); cursor: pointer; font-size: 1.25rem; }
.surf-nav:hover { background: var(--cds-layer-hover-01); }
.surf-nav:focus-visible { outline: 2px solid var(--cds-focus); }
.surf-nav.prev { grid-column: 1; justify-self: start; }
.surf-nav.next { grid-column: 2; justify-self: end; }
.surf-shot .badge { position: absolute; inset-inline-end: var(--cds-spacing-06); inset-block-end: var(--cds-spacing-06); font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--cds-border-strong-01); background: var(--cds-layer-01); color: var(--cds-text-secondary); }
.surf-hint { display: none; margin-block-start: var(--cds-spacing-04); padding: 4px 8px; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cds-text-secondary); inline-size: fit-content; }
.surf-meta { padding: var(--cds-spacing-06); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--cds-spacing-07); }
.surf-meta h4 { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.surf-meta p { margin: var(--cds-spacing-04) 0 0; color: var(--cds-text-secondary); }
.callouts { display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.surf-meta .ca-callout { border-inline-start: 0; padding-inline-start: 0; }
.ca-callout { display: grid; grid-template-columns: .5rem 1fr; gap: var(--cds-spacing-04); align-items: start; font-size: .875rem; }
.ca-callout .bullet { inline-size: .5rem; block-size: .5rem; margin-block-start: .4rem; background: var(--ca-lime); }
.ca-callout strong { display: block; font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cds-text-secondary); font-weight: 500; margin-block-end: 2px; }
@media (max-width: 65.99rem) { .surf-tabs { grid-template-columns: repeat(3, 1fr); } .surf-tab:nth-child(3n) { border-inline-end: 0; } .surf-tab:nth-child(-n+3) { border-block-end: 1px solid var(--cds-border-subtle-01); } .surf-meta { grid-template-columns: 1fr; } }
@media (max-width: 41.99rem) {
  .surf-tabs { display: none; }
  .surf-body { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .surf-panel { display: block; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .surf-hint { display: block; }
  .strip, .lms-grid { grid-template-columns: 1fr 1fr; }
}

/* theme images fade */
img[data-light] { transition: opacity .3s ease; }
img[data-light].img-loading { opacity: 0; min-block-size: 12rem; }

/* stacked tiles inside a grid cell */
.cds--css-grid > div:not([class]) { display: flex; flex-direction: column; gap: var(--cds-spacing-05); min-inline-size: 0; }
.cds--css-grid > div:not([class]) > .cds--tile { block-size: auto; flex: 1 1 auto; }
.cds--data-table-content.cds--tile { margin-block-start: var(--cds-spacing-06); }
.tagline-rotator { margin-block-end: var(--cds-spacing-04); }

:root { --cds-spacing-01:.125rem; --cds-spacing-02:.25rem; --cds-spacing-03:.5rem; --cds-spacing-04:.75rem; --cds-spacing-05:1rem; --cds-spacing-06:1.5rem; --cds-spacing-07:2rem; --cds-spacing-08:2.5rem; --cds-spacing-09:3rem; --cds-spacing-10:4rem; }
.comp-table { border-collapse: collapse; }
.comp-table th, .comp-table td { padding: .75rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--cds-border-subtle-01); }
.comp-table thead th { font-family: "IBM Plex Mono", monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cds-text-secondary); }
.comp-table.benchmark-table td, .comp-table.benchmark-table thead th, .comp-table.summary-table td, .comp-table.xdp-share-table td, .comp-table.xdp-share-table thead th, .comp-table.summary-table thead th { text-align: center; }
.comp-table thead th:first-child { text-align: start !important; }