/* H3 Falcon 5012 connectivity handoff — source 2b7cfb2fcb1eec84ed9dfe275f9037b40737b73b */
/* Portable base styles extracted from the product page; scoped to this section. */
#connectivity {
  --blue:#009edb; --blue-dark:#0077aa; --navy:#081626; --ink:#162432;
  --muted:#586774; --line:#dce3e8; --pale:#f2f6f8; --cyan:#53d1f3;
  color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6;
  padding:83px 0; background:#edf2f5; border-top:1px solid #e0e7ec;
}
#connectivity, #connectivity *, #connectivity *::before, #connectivity *::after { box-sizing:border-box; }
#connectivity button, #connectivity a { -webkit-tap-highlight-color:transparent; }
#connectivity button { font:inherit; cursor:pointer; border:0; color:inherit; }
#connectivity a { color:inherit; text-decoration:none; }
#connectivity button:focus-visible, #connectivity a:focus-visible, #connectivity [tabindex]:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
#connectivity .container { width:min(1280px,calc(100% - 104px)); margin:auto; }
#connectivity .eyebrow { font-size:11px; letter-spacing:1.8px; font-weight:700; display:block; color:var(--blue-dark); line-height:1.5; }
#connectivity .section-intro { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-bottom:43px; }
#connectivity .section-intro h2 { font-size:40px; line-height:1.15; letter-spacing:-1.4px; font-weight:500; margin:15px 0 0; }
#connectivity .section-description { font-size:15px; line-height:1.8; color:var(--muted); max-width:420px; margin:31px 0 0; }
#connectivity .text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:14px; color:var(--blue-dark); font-size:13px; font-weight:600; background:none; padding:0; }
@media(max-width:1150px) {
  #connectivity .container { width:calc(100% - 64px); }
  #connectivity .section-intro { gap:45px; }
}
@media(max-width:850px) {
  #connectivity .container { width:calc(100% - 48px); }
  #connectivity .section-intro { gap:35px; }
  #connectivity .section-intro h2 { font-size:33px; }
}
@media(max-width:600px) {
  #connectivity { padding:54px 0; }
  #connectivity .container { width:calc(100% - 40px); }
  #connectivity .section-intro { display:block; margin-bottom:27px; }
  #connectivity .section-intro h2 { font-size:33px; letter-spacing:-1px; margin-top:13px; }
  #connectivity .eyebrow { font-size:9px; letter-spacing:1.5px; }
  #connectivity .section-description { margin-top:20px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  #connectivity *, #connectivity *::before, #connectivity *::after { transition:none!important; animation:none!important; }
}

/* Two independently operated, documented topology families. */
#connectivity .conn-scenario + .conn-scenario { margin-top: 36px; padding-top: 32px; border-top: 1px solid #cbd7df; }
#connectivity .conn-scenario-heading { margin-bottom: 18px; }
#connectivity .conn-scenario-heading h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.5px; }
#connectivity .conn-scenario-heading p { margin: 0; font-size: 13px; color: var(--muted); }
#connectivity .conn-explorer { background: #fff; border: 1px solid #d5e0e8; }
#connectivity .conn-toolbar { padding: 14px; border-bottom: 1px solid var(--line); }
#connectivity .conn-tabs { display: flex; padding: 4px; gap: 4px; background: #edf2f5; border-radius: 4px; }
#connectivity .conn-tabs button { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; padding: 10px; border-radius: 2px; background: none; color: #4d6271; text-align: center; line-height: 1.45; }
#connectivity .conn-tabs button:hover { background: #e0eaf0; }
#connectivity .conn-tabs button[aria-selected=true] { background: #163249; color: white; }
#connectivity .conn-tab-mode { font-size: 14px; font-weight: 600; }
#connectivity .conn-tab-count { font-size: 12px; }
#connectivity .conn-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding: 12px 24px; border-bottom: 1px solid var(--line); color: #617585; font-size: 12px; }
#connectivity .conn-config-total { color: #263f50; font-size: 14px; font-weight: 600; }
#connectivity .conn-body { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); }
#connectivity .conn-topology { padding: 24px; min-width: 0; container-type: inline-size; }
#connectivity .conn-topology-heading { display: flex; justify-content: space-between; gap: 20px; color: #607786; font-size: 12px; letter-spacing: .5px; }
#connectivity .conn-topology-heading span:last-child { text-align: right; }
/* Site change: the topology runs top to bottom at every width, as the phone layout already
   did: each switch's lane is its hosts, then the switch, then its devices. Where the
   topology is wide enough the two lanes stand side by side, so the hosts form the top row,
   the two switches the middle and the devices the bottom; narrower, the lanes stack. To
   give it that width on laptops the details move under the topology from 1150px down
   (they did from 900px when the lanes ran across). */
#connectivity .conn-lanes { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
@container (min-width: 560px) {
  #connectivity .conn-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* just wide enough for two lanes, six devices in a lane leave no room for the chip and port
   icons beside "GPU" and "NIC": they drop, as they do on a phone */
@container (min-width: 560px) and (max-width: 640px) {
  #connectivity .conn-device-name .conn-chip, #connectivity .conn-device-name .conn-port { display: none; }
  /* and the device labels drop their "Slot", as below 1150px: "11.1" rather than "Slot 11.1" */
  #connectivity .conn-device .conn-slot-prefix { display: none; } }
#connectivity .conn-lane { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; margin: 20px 0 28px; }
/* hosts share their row, each no wider than 140px, centred over the switch */
#connectivity .conn-hosts { display: grid; grid-template-columns: repeat(var(--conn-host-count),minmax(0,140px)); justify-content: center; gap: 7px; }
#connectivity .conn-host-item { position: relative; min-width: 0; }
#connectivity .conn-host-item .conn-host { width: 100%; }
#connectivity .conn-host-endpoint { position: absolute; z-index: 4; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); padding: 1px 2px; background: #fff; color: #607786; font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; }
#connectivity .conn-host-endpoint.is-focus { color: #006e9f; }
#connectivity .conn-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
#connectivity .conn-wires path { fill: none; stroke: #8eb7ca; stroke-width: 1.5; stroke-linejoin: round; }
#connectivity .conn-wires path.is-focus { stroke: #009edb; stroke-width: 2; }
#connectivity .conn-node, #connectivity .conn-switch { position: relative; z-index: 3; min-height: 44px; border: 1px solid #bfcfda; background: #fff; border-radius: 3px; color: #335367; font-size: 12px; line-height: 1.35; transition: background .18s, border-color .18s; }
#connectivity .conn-host { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; padding: 6px 4px; min-height: 50px; }
#connectivity .conn-server-icon { display: flex; flex-direction: column; gap: 3px; }
#connectivity .conn-server-icon i { display: block; border: 1px solid currentColor; width: 20px; height: 5px; position: relative; }
#connectivity .conn-server-icon i:after { content: ''; position: absolute; width: 3px; height: 1px; background: currentColor; right: 2px; top: 1px; }
#connectivity .conn-switch-group { min-width: 0; padding: 12px 10px; border: 1px solid #d2e0e8; background: #f6f9fb; }
#connectivity .conn-switch { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #edf4f8; border-color: #a7c3d3; padding: 8px; }
#connectivity .conn-switch span { font-size: 12px; }
#connectivity .conn-devices { display: grid; grid-template-columns: repeat(var(--conn-device-count),minmax(0,1fr)); gap: 6px; margin-top: 22px; }
#connectivity .conn-device { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 52px; padding: 6px 2px; }
#connectivity .conn-device-name { display: flex; align-items: center; justify-content: center; gap: 4px; }
#connectivity .conn-slot-label { color: #607786; font-size: 12px; line-height: 1.35; white-space: nowrap; }
#connectivity .conn-device.is-focus .conn-slot-label { color: #006e9f; }
#connectivity .conn-nic { background: #f1f8f9; border-color: #adcbd0; color: #3b6770; }
#connectivity .conn-chip { display: block; width: 16px; height: 14px; border: 1px solid currentColor; box-shadow: 2px 0 0 -1px currentColor,-2px 0 0 -1px currentColor,0 2px 0 -1px currentColor,0 -2px 0 -1px currentColor; }
#connectivity .conn-port { display: block; width: 18px; height: 14px; border: 1px solid currentColor; position: relative; }
#connectivity .conn-port:after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 3px; border: 1px solid currentColor; border-top: 0; background: inherit; }
#connectivity .conn-node.is-focus, #connectivity .conn-switch.is-focus { background: #e3f5fd; border-color: var(--blue); color: #006e9f; box-shadow: 0 0 0 1px #009edb20; }
#connectivity .conn-node:hover, #connectivity .conn-switch:hover { border-color: var(--blue); }
#connectivity .conn-management-strip { display: flex; align-items: center; margin: 22px 0 16px; }
#connectivity .conn-dashed-line { flex: 1; border-top: 1px dashed #91a8b7; }
#connectivity .conn-management-strip button { padding: 8px 12px; background: #f3f6f9; border: 1px dashed #a9bdca; display: flex; align-items: center; gap: 8px; text-align: left; color: #385667; font-size: 13px; min-height: 48px; }
#connectivity .conn-management-strip small { display: block; color: #667f8f; font-size: 12px; margin-top: 2px; }
#connectivity .conn-management-dot { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }
#connectivity .conn-management-strip .is-focus { background: #e3f5fd; border-color: var(--blue); }
#connectivity .conn-key { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 12px; color: #647b8b; }
#connectivity .conn-key span { display: flex; align-items: center; gap: 7px; }
#connectivity .conn-key i { display: block; width: 18px; border-top: 2px solid #8eb7ca; }
#connectivity .conn-key .conn-dashed { border-top: 1px dashed #91a8b7; }
#connectivity .conn-detail { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-left: 1px solid var(--line); background: #fbfcfd; min-width: 0; }
#connectivity .conn-step-number { font-size: 12px; letter-spacing: 1.2px; }
#connectivity .conn-step-title { margin: 12px 0 14px; font-size: 22px; font-weight: 500; letter-spacing: -.5px; line-height: 1.25; }
#connectivity .conn-selection { margin: -4px 0 14px; color: #006e9f; font-size: 12px; line-height: 1.6; }
#connectivity .conn-selection[hidden] { display: none; }
#connectivity .conn-step-description { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }
#connectivity .conn-step-fact { font-size: 13px; color: #5d7483; line-height: 1.7; border-top: 1px solid var(--line); padding-top: 16px; margin: 18px 0; }
#connectivity .conn-next { font-size: 13px; min-height: 44px; margin-top: auto; text-align: left; }
#connectivity .conn-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 24px; border-top: 1px solid var(--line); background: #fbfcfd; font-size: 12px; color: #5d7483; }
#connectivity .conn-foot p { margin: 0; max-width: 720px; line-height: 1.7; }
#connectivity .conn-foot a { color: var(--blue-dark); flex-shrink: 0; }
#connectivity .conn-caption { font-size: 12px; color: #607786; line-height: 1.7; margin: 18px 0 0; max-width: 940px; }
@media(max-width:1150px) {
  #connectivity .conn-body { grid-template-columns: 1fr; }
  #connectivity .conn-detail { border-left: 0; border-top: 1px solid var(--line); }
  #connectivity .conn-topology { padding: 22px 18px; }
  #connectivity .conn-switch-group { padding: 12px 8px; }
  #connectivity .conn-devices { gap: 4px; }
  #connectivity .conn-slot-prefix { display: none; }
  #connectivity .conn-tabs button { padding: 10px 8px; }
  #connectivity .conn-detail { padding: 22px 20px; }
}
@media(max-width:900px) {
  #connectivity .conn-body { grid-template-columns: 1fr; }
  #connectivity .conn-detail { border-left: 0; border-top: 1px solid var(--line); padding: 24px; }
  #connectivity .conn-topology { padding: 24px; }
  #connectivity .conn-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #connectivity [data-connection-explorer=gpu] .conn-tabs button:last-child { grid-column: 1 / -1; }
  #connectivity .conn-summary { flex-direction: column; gap: 5px; }
  #connectivity .conn-foot { align-items: flex-start; }
}
@media(max-width:600px) {
  #connectivity .conn-scenario-heading h3 { font-size: 22px; }
  #connectivity .conn-scenario + .conn-scenario { margin-top: 32px; padding-top: 28px; }
  #connectivity .conn-toolbar { padding: 10px; }
  #connectivity .conn-tabs { gap: 4px; }
  #connectivity .conn-tabs button { padding: 10px 6px; min-height: 72px; }
  #connectivity .conn-summary { padding: 12px 16px; }
  #connectivity .conn-topology { padding: 20px 12px; }
  #connectivity .conn-topology-heading { font-size: 12px; gap: 12px; }
  #connectivity .conn-topology-heading span:last-child { max-width: 165px; }
  #connectivity .conn-host { min-height: 52px; }
  #connectivity .conn-switch-group { padding: 12px 8px; }
  #connectivity .conn-switch { min-height: 48px; }
  #connectivity .conn-devices { gap: 4px; margin-top: 22px; }
  #connectivity .conn-device { min-height: 64px; gap: 4px; padding: 5px 2px; }
  #connectivity .conn-device-name .conn-chip, #connectivity .conn-device-name .conn-port { display: none; }
  #connectivity .conn-slot-prefix { display: none; }
  #connectivity .conn-management-strip { margin: 0 0 16px; }
  #connectivity .conn-key { gap: 10px 14px; }
  #connectivity .conn-detail { padding: 22px 20px; }
  #connectivity .conn-foot { display: block; padding: 14px 20px; }
  #connectivity .conn-foot a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; }
}
@media(prefers-reduced-motion:reduce) {
  #connectivity .conn-node, #connectivity .conn-switch { transition: none; }
}

/* ---------------------------------------------------------------------------
   Site integration. Everything above is the delivered package, left as-is so a future
   drop-in can be diffed against it; this block adapts it to this site.

   The package ships its own Arial stack, which read as a foreign block on a page set in
   myriad-pro. Only the family is taken from the page — every size in the component is in
   px and stays exactly as delivered, so the type scale, device boxes and spacing the
   handoff asked to preserve are untouched. The same change was made to the Architecture
   component for the same reason.
   --------------------------------------------------------------------------- */
#connectivity {
  font-family: inherit; }

/* The "Next: ..." step link is hidden rather than deleted. The delivered script writes
   its label on every step change and binds a click handler to it, so removing it from
   the markup would mean editing that file; display:none also takes it out of the tab
   order and the accessibility tree, which a deletion would have done too.

   The section eyebrow and the documented-topologies link ARE deleted, from the markup —
   nothing in the script touches either. The heading's 15px top margin goes with the
   eyebrow it used to clear. */
#connectivity .conn-next {
  display: none; }

/* The section is brought onto the page's own measure, the one the Architecture section
   and every other section here use: .w1366, which is width 80% capped at 1366px (the
   header's measure, so the edges line up with the logo and search), and 90% below 1024px. The package shipped min(1280px, 100% - 104px) with its own steps at 1150,
   850 and 600px, so it ran up to 80px wider than everything above and below it.

   These sit after the package's own media queries and match their specificity, so they
   win on source order at every width — which is the point: one measure, not five. */
#connectivity .container {
  width: 80%;
  max-width: 1366px;
  margin: 0 auto; }
@media screen and (max-width: 1023px) {
  #connectivity .container {
    width: 90%; }
}

/* The section statement is an h3 now, under the h2 that carries the section's name, so
   the type the package gave that line has to follow it down. Same values as the
   delivered rules for the h2 it used to be, and the same three breakpoint steps. */
#connectivity .section-intro h3 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.4px;
  font-weight: 500;
  margin: 0; }
@media (max-width: 850px) {
  #connectivity .section-intro h3 { font-size: 33px; }
}
@media (max-width: 600px) {
  #connectivity .section-intro h3 {
    font-size: 33px;
    letter-spacing: -1px; }
}

/* The delivered section pads itself 83px top and bottom (54px below 600px), which put
   the Topology title 124px below the section's top edge, where every other section title
   on the page sits at 80px. The top goes back to the 40px that .scroll-section gives the
   rest, less the 1px of the section's own top border, which the others do not have.
   That also matters for the sticky tabs: they share one scroll-margin-top, so the extra
   padding landed this title lower than the others. The bottom is the shared 64px under
   the last content, as on every other section. */
#connectivity.scroll-section { padding-top: 39px; padding-bottom: 64px; }

/* The two scenario headings ("10 GPUs", "8 GPUs + 4 Network cards") and the note under
   each. As delivered they were 24px at weight 500 (22px below 850px) over a 13px note;
   then 2rem over 1rem, which still read small over the full-width explorer beneath.
   They are now the level of the Overview subtitle (.product-lead-subtitle), 2.571rem at
   weight 600, the page's established subheading over its 2.25rem section titles; the
   note, 1.286rem, reads as copy beside the 1.571rem section description rather than as a
   footnote. 36/18px on a wide screen, 33.4/16.7 at 1280px, 30.9/15.4 at 1024px. Left
   aligned, on the explorer's edge. After the package's own media rule, so these win at
   every width. */
#connectivity .conn-scenario-heading {
  margin-bottom: 24px; }
#connectivity .conn-scenario-heading h3 {
  font-size: 2.571rem;
  font-weight: 600; }
#connectivity .conn-scenario-heading p {
  font-size: 1.286rem; }

/* Configuration tabs grouped by mode (js/connectivity.js builds the markup), on the
   explorer's own white. Each mode's name is a centred heading over its grey strip of
   tabs, the selected tab navy (#0c2544, the page's navy); Advanced Mode's note follows its
   tabs in parentheses, and a thin rule divides the two groups.

   The tablist is a grid: one column per mode, sized by how many tabs it holds, with a 1px
   column between them for the rule (the script sets --conn-group-columns); and three
   rows: names, tabs, note. The groups use display: contents so their parts land in those
   rows, which keeps the two names on one line and the two strips level, and lets the rule
   run the full height of both.

   Contrast: names var(--ink) on white 15.4:1. In the strips, tab text #4d6271 on #edf2f5
   5.64:1 and badges #536a79 5.03:1; the selected tab #fff on #0c2544 15.40:1 with its badge
   at 78% white 9.83:1. The note #586774 on white 5.82:1.

   These come after the package's own tab rules at every width, including its 900px
   switch to a two-column grid, and replace them. */
#connectivity .conn-tabs {
  display: grid;
  grid-template-columns: var(--conn-group-columns, 1fr 1px 2fr);
  column-gap: 20px;
  row-gap: 0;
  padding: 0;
  background: none;
  border-radius: 0; }
#connectivity .conn-tab-group {
  display: contents; }
  #connectivity .conn-tab-group:first-child > * {
    grid-column: 1; }
  #connectivity .conn-tab-group:last-child > * {
    grid-column: 3; }
  #connectivity .conn-tab-divider {
    grid-column: 2;
    grid-row: 1 / 4;
    background: var(--line); }
  #connectivity .conn-tab-group-head {
    grid-row: 1;
    margin-bottom: 12px;
    text-align: center; }
  #connectivity .conn-tab-group-name {
    color: var(--ink);
    font-size: 1.143rem;
    font-weight: 700;
    letter-spacing: .02em; }
  #connectivity .conn-tab-group-tabs {
    grid-row: 2;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #edf2f5;
    border-radius: 4px; }
    #connectivity .conn-tab-group-tabs button {
      flex: 1 1 0;
      grid-column: auto;
      /* tall enough for a name and its badge, so a badge-less Standard tab matches */
      min-height: 60px;
      color: #4d6271; }
    #connectivity .conn-tab-group-tabs button:hover {
      background: #e0eaf0; }
    #connectivity .conn-tab-group-tabs button[aria-selected=true] {
      background: #0c2544;
      color: #fff; }
  #connectivity .conn-tab-group-note {
    grid-row: 3;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .929rem;
    line-height: 1.5;
    text-align: center; }
#connectivity .conn-tab-config {
  font-size: 1rem;
  font-weight: 600; }
#connectivity .conn-tab-badge {
  font-size: .714rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #536a79; }
  #connectivity .conn-tabs button[aria-selected=true] .conn-tab-badge {
    color: rgba(255, 255, 255, .78); }
/* One column below 900px: each mode's name, its tabs, then the note; no rule */
@media screen and (max-width: 900px) {
  #connectivity .conn-tabs {
    grid-template-columns: minmax(0, 1fr); }
  #connectivity .conn-tab-group:first-child > *,
  #connectivity .conn-tab-group:last-child > * {
    grid-column: 1;
    grid-row: auto; }
  #connectivity .conn-tab-divider {
    display: none; }
  #connectivity .conn-tab-group:last-child > .conn-tab-group-head {
    margin-top: 20px; } }