/* =========================================================
   Integration Hub — the hospital's own systems, connected.

   Prefix ih-, layered on pages/products/products.css (pr-), which by
   now carries the node, its ports, the glyph, six connector shapes,
   the dotted canvas, the product surface, the FAQ, the final CTA and
   the reveal contract. This page writes almost no diagram CSS of its
   own, which is the point of having moved all of that upstairs.

   THE ONE CONTENT DECISION, AND IT GOVERNS THE WHOLE PAGE. The brief
   is explicit: "Do not claim that a specific hospital software, API,
   standard, payment gateway, CRM or ABDM capability is supported
   unless MeloHealth has actually implemented or validated it." So every
   system drawn on this page is a CATEGORY — hospital information
   system, laboratory system, payment gateway — and the only product
   names anywhere on it are the ones the company already documents
   elsewhere: WhatsApp, Instagram and Facebook as channels, and
   Razorpay, which the privacy policy names as a payment processor.

   That is also the answer to "a logo wall can exist, but it must be
   secondary". A wall of vendor logos would be the single most
   dishonest thing we could put on this page, so the Integration
   Library is a library of CONNECTION METHODS instead: what kind of
   system it is, and how a hospital would connect it — supported
   connector, API, webhook or custom. .ih-lib__key prints that legend
   on the page rather than in a footnote.

   THE STANDARDS ARE DRAWN DIFFERENTLY ON PURPOSE. HL7, FHIR, DICOM and
   ABDM connect to the hub with DASHED lines (.ih-std), because they
   are the ecosystem this product is built to work inside, not four
   connectors we ship. Solid means a connection; dashed means context.
   ========================================================= */

/* The longest product headline we have: 49 characters against Workflow
   Builder's 42. Measured, not guessed. "your hospital already runs on."
   needs 597px at 56u and the .82fr column is 505, so it broke to three
   lines ending on "on." — 52u and a 1.12fr column give 554 against 568,
   which is two clean lines with 14px to spare. It costs the diagram
   beside it 36px, and the diagram had them. */
.ih .pr-hero__cols { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.ih .pr-h1 { font-size: calc(52 * var(--u)); line-height: calc(63 * var(--u)); }

/* =========================================================
   THE HUB — the one node everything else points at
   ========================================================= */
.ih-hub { position: relative; display: grid; justify-items: center; gap: calc(7 * var(--u)); width: calc(268 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border: 2px solid var(--brand-ico); border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--brand-soft); text-align: center; }
.ih-hub b { font-family: var(--font-head); font-size: calc(19 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.ih-hub .pr-node__k { color: var(--brand-ink); }
.ih-hub.sm { width: calc(214 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.ih-hub.sm b { font-size: calc(16.5 * var(--u)); line-height: calc(22 * var(--u)); }

/* the bar across the top of a canvas: what the drawing below is showing */

/* =========================================================
   01 MANY SYSTEMS, ONE JOURNEY
   ========================================================= */
/* the eight categories, as one card rather than eight — they are the
   premise of the section, not eight things to read */
.ih-sys { width: calc(420 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .05); }
.ih-sys ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8 * var(--u)) calc(18 * var(--u)); margin-top: calc(13 * var(--u)); }
.ih-sys li { display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 600; }
.ih-sys li::before { content: ""; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(2 * var(--u)); border: 2px solid var(--divider); }

/* =========================================================
   02 THE HOSPITAL CORE — the map, then what moves across it
   ========================================================= */
.ih-flows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(26 * var(--u)); margin-top: calc(44 * var(--u)); padding-top: calc(30 * var(--u)); border-top: 1px solid var(--rule); }
.ih-flows > div { display: grid; align-content: start; gap: calc(10 * var(--u)); }
.ih-flows h3 { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.ih-flows > div > p { font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--prose); }
.ih-dots { display: grid; gap: calc(6 * var(--u)); }
.ih-dots > li { display: flex; align-items: baseline; gap: calc(9 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--text); }
.ih-dots > li::before { content: ""; flex: none; align-self: center; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--brand-ico); }
/* "Potential", not "supported": the brief's own word for these */
.ih-maybe { font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* =========================================================
   03 DIAGNOSTICS — two short runs, side by side
   ========================================================= */
.ih-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--u)); }
.ih-duo > article { display: grid; justify-items: center; align-content: start; }
.ih-duo__head { display: grid; gap: calc(7 * var(--u)); width: 100%; margin-bottom: calc(22 * var(--u)); }
.ih-duo__head p { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }
.ih-duo .pr-node { width: 100%; max-width: calc(260 * var(--u)); }

/* =========================================================
   04 BUSINESS SYSTEMS — four around one
   ========================================================= */
.ih-star { display: grid; grid-template-columns: minmax(0, 1fr) calc(40 * var(--u)) auto calc(40 * var(--u)) minmax(0, 1fr); grid-template-rows: auto calc(34 * var(--u)) auto calc(34 * var(--u)) auto; justify-items: center; align-items: center; }
.ih-star > .n1 { grid-area: 1 / 3; }
.ih-star > .w1 { grid-area: 2 / 3; }
.ih-star > .w2 { grid-area: 3 / 2; }
.ih-star > .c  { grid-area: 3 / 3; }
.ih-star > .w3 { grid-area: 3 / 4; }
.ih-star > .n2 { grid-area: 3 / 1; justify-self: end; }
.ih-star > .n3 { grid-area: 3 / 5; justify-self: start; }
.ih-star > .w4 { grid-area: 4 / 3; }
.ih-star > .n4 { grid-area: 5 / 3; }
.ih-star .pr-wire { height: 100%; width: 100%; }
.ih-star .pr-hwire { width: 100%; }

.ih-defs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(22 * var(--u)); margin-top: calc(44 * var(--u)); padding-top: calc(30 * var(--u)); border-top: 1px solid var(--rule); }
.ih-defs > div { display: grid; align-content: start; gap: calc(8 * var(--u)); }
.ih-defs h3 { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.ih-defs p { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--prose); }

/* =========================================================
   05 CHANNELS
   ========================================================= */
.ih-chans { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(9 * var(--u)); margin-top: calc(26 * var(--u)); }
.ih-chans > li { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); background: #fff; font-size: calc(14.5 * var(--u)); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); }
.ih-chans .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--brand-ink); }

/* =========================================================
   06 API, WEBHOOK, CUSTOM
   ========================================================= */
.ih-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(20 * var(--u)); width: 100%; }
.ih-ways > article { display: grid; align-content: start; justify-items: center; gap: calc(14 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.ih-ways__head { display: grid; justify-items: center; gap: calc(7 * var(--u)); text-align: center; }
/* the method name is a heading, not a node's kind label. It was written as
   .pr-node__k and a bare `.ih-ways__head p` rule — (0,1,1) — was quietly
   retyping it at prose size; it happened to look right, which is exactly
   how that trap survives a review (§14.1). Both are explicit now. */
.ih-ways__k { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text); }
.ih-ways__head > p { font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--prose); }
.ih-ways .pr-node { width: 100%; }
.ih-ways .pr-row { width: 100%; }

/* =========================================================
   07 INTEROPERABILITY — dashed, because context is not a connector
   ========================================================= */
.ih-std { display: grid; justify-items: center; width: 100%; }
.ih-std__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); width: 100%; max-width: calc(880 * var(--u)); }
.ih-std__row > li { display: grid; align-content: start; gap: calc(7 * var(--u)); padding: calc(16 * var(--u)) calc(17 * var(--u)); border: 1px dashed var(--dash); border-radius: calc(12 * var(--u)); background: #fff; }
.ih-std__row b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.ih-std__row span { font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }
/* the dashed rails, drawn the same way .pr-fan draws its solid ones —
   but they never turn blue, because nothing is travelling down them */
.ih-rails { position: relative; width: 100%; max-width: calc(880 * var(--u)); height: calc(52 * var(--u)); }
.ih-rails > i { position: absolute; border-color: var(--dash); }
.ih-rails > i:nth-child(1), .ih-rails > i:nth-child(2), .ih-rails > i:nth-child(3), .ih-rails > i:nth-child(4) { top: 0; width: 0; height: calc(26 * var(--u)); border-left: 2px dashed var(--dash); }
.ih-rails > i:nth-child(1) { left: calc(12.5% - 1px); }
.ih-rails > i:nth-child(2) { left: calc(37.5% - 1px); }
.ih-rails > i:nth-child(3) { left: calc(62.5% - 1px); }
.ih-rails > i:nth-child(4) { left: calc(87.5% - 1px); }
.ih-rails > i:nth-child(5) { top: calc(26 * var(--u)); left: 12.5%; right: 12.5%; height: 0; border-top: 2px dashed var(--dash); }
.ih-rails > i:nth-child(6) { top: calc(26 * var(--u)); left: calc(50% - 1px); bottom: 0; width: 0; border-left: 2px dashed var(--dash); }
/* said in words as well as in line style, because a dash is not a claim
   anybody should have to infer */

/* =========================================================
   08 THE DEMO — choose an event, watch it arrive
   ========================================================= */
.ih-demo { display: grid; gap: calc(26 * var(--u)); }
.ih-evs { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); }
.ih-ev { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: calc(10 * var(--u)); row-gap: calc(8 * var(--u)); padding: calc(11 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; color: inherit; font-size: calc(14.5 * var(--u)); font-weight: 600; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ih-ev:hover { border-color: var(--brand-ico); }
.ih-ev[aria-selected="true"] { border-color: var(--brand-ico); background: var(--brand-soft); }
.ih-ev[aria-selected="true"] .pr-gl { color: var(--brand-ink); }
.ih-ev .bar { grid-column: 1 / -1; height: calc(3 * var(--u)); border-radius: 999px; background: var(--rule); overflow: hidden; }
.ih-ev .bar > i { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--brand-ico); transform: scaleX(0); transform-origin: left; }
.ih-ev:not([aria-selected="true"]) .bar { visibility: hidden; }

.ih-panel { display: grid; justify-items: center; gap: calc(24 * var(--u)); }
.ih-result { display: grid; justify-items: center; gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)); border: 1px solid var(--brand-ico); border-radius: var(--r); background: var(--brand-soft); text-align: center; }
.ih-result b { font-family: var(--font-head); font-size: calc(21 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 500; letter-spacing: -.03em; color: var(--brand-ink); }
.ih-result .pr-fl { color: var(--brand-ink); }
.ih-replay { justify-self: start; }

/* =========================================================
   09 THE PRODUCT
   ========================================================= */
.ih-prod { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: calc(24 * var(--u)); align-items: start; }
.ih-group { margin-top: calc(22 * var(--u)); }
.ih-group:first-of-type { margin-top: calc(6 * var(--u)); }
.ih-group > .pr-k { display: flex; padding-bottom: calc(10 * var(--u)); }
.ih-avail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.ih-avail > li { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(13 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 600; }
.ih-avail .i { color: var(--faint); }
.ih-avail span { margin-left: auto; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--brand-ink); }
.ih-avail span .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--brand-ink); }

.ih-drawer { display: grid; gap: calc(18 * var(--u)); padding: calc(22 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
.ih-drawer__head { display: grid; gap: calc(5 * var(--u)); padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid var(--rule); }
.ih-drawer__head b { font-family: var(--font-head); font-size: calc(21 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.ih-drawer section { display: grid; gap: calc(9 * var(--u)); }
.ih-tags { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.ih-acts { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.ih-acts > li { padding: calc(9 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; font-size: calc(13.5 * var(--u)); font-weight: 600; }
.ih-acts .warn { border-color: var(--rose-ink); color: var(--rose-ink); }

/* =========================================================
   10 CONNECTION HEALTH — a word AND a mark, never a dot alone
   ========================================================= */
.ih-health { max-width: calc(620 * var(--u)); }
.ih-health > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.ih-health > li:last-child { border-bottom: 0; }
.ih-health b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.ih-st { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
.ih-st::before { content: ""; flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--brand-ico); }
.ih-st.sync { color: var(--muted); }
.ih-st.sync::before { background: #fff; border: 2px solid var(--muted); }
.ih-st.warn { color: var(--amber-ink); }
.ih-st.warn::before { border-radius: calc(2 * var(--u)); background: var(--amber-ink); }

/* =========================================================
   THE HUMAN BREAK
   ========================================================= */
.ih-human { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); column-gap: calc(56 * var(--u)); align-items: center; }
/* the left of this frame is the staff at their terminals, which is the
   subject; the right is the counter. Cropping left keeps the people
   who are actually working the systems. */
.ih-human figure { overflow: hidden; border-radius: var(--r-card); }
.ih-human img { width: 100%; height: calc(430 * var(--u)); object-fit: cover; object-position: 28% 52%; }
/* the chain is as wide as one node, not as wide as the column: .pr-chain
   centres its children, so left-aligning it with justify-items collapsed
   every .pr-wire to zero width and stranded the connectors at the edge */
.ih-human .pr-chain { width: calc(216 * var(--u)); margin-top: calc(26 * var(--u)); }

/* =========================================================
   THE LIBRARY — connection methods, not a logo wall
   ========================================================= */
.ih-tools { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); }
.ih-cats { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.ih-cat { padding: calc(9 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ih-cat:hover { border-color: var(--brand-ico); }
.ih-cat[aria-pressed="true"] { border-color: var(--brand-ico); background: var(--brand); }
.ih-search { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-left: auto; padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; }
.ih-search .i { color: var(--faint); }
.ih-search input { width: calc(190 * var(--u)); border: 0; background: none; font: inherit; font-size: calc(14 * var(--u)); color: var(--ink); }
.ih-search input::placeholder { color: var(--faint); }
.ih-search input:focus { outline: none; }

.ih-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); margin-top: calc(22 * var(--u)); }
.ih-grid > li { display: grid; align-content: start; gap: calc(8 * var(--u)); padding: calc(17 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: calc(12 * var(--u)); background: #fff; }
.ih-grid b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
/* .ih-desc, not `> li > span`: the state chip is a span too, and a
   descendant selector at (0,1,1) would quietly restyle it (§14.1) */
.ih-grid .ih-desc { font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }
.ih-grid > li[hidden] { display: none; }
.ih-none { margin-top: calc(22 * var(--u)); font-size: calc(16 * var(--u)); color: var(--muted); }
/* every state is a word. "Available" means a supported connector;
   everything else says exactly how the connection would be made. */
.ih-way { justify-self: start; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--grey); font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ih-way.live { background: var(--brand-tint); color: var(--brand-ink); }
.ih-lib__key { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(26 * var(--u)); margin-top: calc(26 * var(--u)); padding-top: calc(20 * var(--u)); border-top: 1px solid var(--rule); }
.ih-lib__key > li { display: flex; align-items: baseline; gap: calc(9 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--prose); }

/* =========================================================
   THE CLOSING STACK (§9.5)
   ========================================================= */
.ih-close { display: grid; justify-items: center; max-width: calc(440 * var(--u)); margin: calc(56 * var(--u)) auto 0; }
.ih-close > span { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ih-close > span.on { color: var(--brand-ink); }
.ih-close > i { position: relative; width: 2px; height: calc(26 * var(--u)); margin: calc(10 * var(--u)) 0; background: var(--rule); }
.ih-close > i::after { content: ""; position: absolute; inset: 0 0 auto 0; width: 2px; height: 0; background: var(--brand-ico); transition: height .6s var(--ease) var(--wd, 0ms); }
.ih-close.is-in > i::after { height: 100%; }
.ih-back { margin-top: calc(26 * var(--u)); }

/* =========================================================
   MOTION (§9) — every drawing is complete at rest
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ih-close > i::after { height: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ih-panel:not([hidden]) .pr-hwire > i::after { animation: ihDraw .6s var(--ease) var(--wd, 0ms) backwards; }
  @keyframes ihDraw { from { width: 0; } }
  .ih-panel:not([hidden]) .pr-node, .ih-panel:not([hidden]) .ih-result { opacity: 1; transform: none; animation: ihRise .45s var(--ease) var(--wd, 0ms) backwards; }
  @keyframes ihRise { from { opacity: 0; transform: translateY(6px); } }
  .ih-demo.is-cycling .ih-ev[aria-selected="true"] .bar > i { animation: ihFill 6000ms linear forwards; }
  @keyframes ihFill { to { transform: scaleX(1); } }
  /* the library re-settles when a filter changes */
  .ih-grid > li:not([hidden]) { animation: ihRise .35s var(--ease); }
}

/* =========================================================
   Below 1180 --u is 1px. The brief: "Do not shrink the desktop
   ecosystem into a tiny diagram." Every multi-column drawing becomes
   a vertical flow; products.css already turns the fan, the gather and
   the horizontal run for us, so most of this is just the surrounds.
   ========================================================= */
@media (max-width: 1179px) {
  .ih .pr-hero__cols { grid-template-columns: minmax(0, 1fr); }
  .ih .pr-h1 { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }
  .ih-hub, .ih-hub.sm { width: 100%; max-width: 320px; }
  .ih-sys { width: 100%; max-width: 320px; }
  .ih-sys ul { grid-template-columns: minmax(0, 1fr); }

  .ih-flows { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; padding-top: 22px; }
  .ih-duo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ih-duo .pr-node { max-width: 320px; }

  /* the star is four systems around one hub; on a phone it is five
     cards in a column with the hub third, which is the same statement */
  .ih-star { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ih-star > .n1, .ih-star > .w1, .ih-star > .w2, .ih-star > .c,
  .ih-star > .w3, .ih-star > .n2, .ih-star > .n3, .ih-star > .w4, .ih-star > .n4 { grid-area: auto; justify-self: center; }
  .ih-star .pr-wire, .ih-star .pr-hwire { width: 2px; height: 22px; }
  .ih-defs { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; padding-top: 22px; }

  .ih-ways { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ih-ways > article { padding: 20px 18px; }

  .ih-std__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* with the standards in a column the fan of dashed rails has nothing
     to fan to; one dashed stem says the same thing */
  .ih-rails { height: 24px; }
  .ih-rails > i:nth-child(1), .ih-rails > i:nth-child(2),
  .ih-rails > i:nth-child(4), .ih-rails > i:nth-child(5) { display: none; }
  .ih-rails > i:nth-child(3) { left: calc(50% - 1px); height: 100%; }
  .ih-rails > i:nth-child(6) { display: none; }

  .ih-demo { gap: 20px; }
  .ih-evs { flex-direction: column; align-items: stretch; }
  /* justify-items, not justify-content: the label is an anonymous grid
     item in a 1fr track, so it centres itself in the full-width button
     while the glyph sits hard left */
  .ih-ev { grid-template-columns: auto 1fr; justify-items: start; border-radius: 12px; }

  .ih-prod { grid-template-columns: minmax(0, 1fr); }
  .ih-avail { grid-template-columns: minmax(0, 1fr); }
  .ih-health { max-width: none; }

  .ih-human { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ih-human img { height: 240px; }
  .ih-human .pr-chain { width: 100%; max-width: 320px; }

  .ih-tools { align-items: stretch; flex-direction: column; }
  .ih-search { margin-left: 0; }
  .ih-search input { width: 100%; }
  .ih-grid { grid-template-columns: minmax(0, 1fr); }
  .ih-lib__key { gap: 10px; }
  .ih-close { margin-top: 36px; }
  .ih-back { margin-top: 22px; }
}