/* ── brain.css — the Airdoot brain ("The Airdoot network") ─────────────────────
   A full-width navy band: the section itself is the navy, edge to edge. In the middle, the AI sphere
   (media/home/brain/orb.webp) with a gold name plate. Round it (owner, 2026-09-29, note 4) everyone the brain joins,
   in three labelled frames: 01 Customers, 02 Principal partners, 03 Providers. Every member is a glass icon (.gi,
   app/theme.css) in its feature colour (data-f) and a link. Each frame's label is a pill sitting on its top edge.
   The brain's own parts ("Airdoot's own") are not a frame: a plain caption and one row of small chips hung from
   the name plate by a gold stem, so the three groups stay the only categories.
   Two layouts, by width. brain.js reads which from --s7b-mode and draws the lines to match; without the script
   both still lay out, just without lines.
     ring   (960px and up)  a 3 x 3 grid: Customers across the top, Principal partners | the brain | Providers,
            the brain's chips across the bottom, straight under the name plate. A line runs from every member's
            icon into the brain in the member's colour, warming to gold. Each icon sits on the side of its frame
            nearest the brain (Customers' names above their icons, Principal partners' icons on the right,
            Providers' on the left), so no line crosses text.
     stack  the brain and its chips, then the three frames one under another, joined by a spine down the middle;
            the members three across in each frame (on phones the chips become small tiles, three and two).
   Motion (html.fx-motion only): the brain swells in, the lines grow out of it, the chips, the frames and their
   members rise in (all at once on the ring; each piece as it scrolls in on the stack), then one pulse per line,
   the sphere's slow turn and the rings start. All loops pause off screen and in a hidden tab (.run).
   Reduced motion / ?static=1: finished and still.                                                           */

.s7b {
  --s7b-core: 176px;                            /* the sphere's diameter */
  --s7b-ic: 58px;                               /* a member's glass icon */
  --s7b-mid: 420px;                             /* the ring's middle column: the brain, its rings and room for the lines */
  /* the band's top and bottom room, off the site's section step (79 / 71px at 1366 x 900) */
  --s7b-pt: calc(var(--s7-sec) * .92);
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--s7b-pt) 0 calc(var(--s7-sec) * .82);
  scroll-margin-top: max(0px, calc(var(--s7-clear, 88px) - var(--s7b-pt)));
  background:
    radial-gradient(44% 60% at 50% 58%, rgba(10, 74, 133, .9) 0%, rgba(10, 74, 133, 0) 72%),
    radial-gradient(70% 50% at 50% 0%, rgba(0, 57, 108, .95) 0%, rgba(0, 57, 108, 0) 70%),
    var(--navy-deep);
}
/* the faded blueprint grid, strongest round the brain */
.s7b::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(186, 206, 223, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 206, 223, .05) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center center;
  -webkit-mask-image: radial-gradient(56% 66% at 50% 58%, #000 0%, transparent 80%); mask-image: radial-gradient(56% 66% at 50% 58%, #000 0%, transparent 80%);
}
.s7b .s7b-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.s7b .s7b-head { max-width: 1040px; margin-bottom: clamp(26px, 3vh, 36px); }
.s7b .s7b-head .s7-h2 em { color: var(--gold); }
.s7b .s7b-head .s7-lede { max-width: 72ch; }
.s7b abbr[title] { text-decoration: none; }     /* OES: the expansion is a tooltip, not a dotted underline */

/* ── the orbit: stacked by default (one column: the brain and its chips, then the frames) ── */
.s7b .s7b-orbit {
  --s7b-mode: stack;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 40px;
  max-width: 620px; margin-inline: auto;
}
.s7b .s7b-orbit::before {   /* a soft blue and gold glow under the sphere (brain.js sets --cy, its centre) */
  content: ""; position: absolute; left: 50%; top: var(--cy, 50%); z-index: -1; pointer-events: none;
  width: min(820px, 120%); aspect-ratio: 16 / 9; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(247, 183, 68, .12), rgba(96, 165, 250, .07) 42%, rgba(96, 165, 250, 0));
}
.s7b .s7b-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s7b .s7b-lines .ln { fill: none; stroke-width: 1.2; transition: opacity 300ms ease, stroke 300ms ease, stroke-width 300ms ease; }
.s7b .s7b-lines .tm { fill: var(--lc, var(--mist)); opacity: .6; transition: opacity 300ms ease; }
.s7b .s7b-lines .pl { fill: none; stroke: var(--lc, var(--gold)); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 200; stroke-dashoffset: 6; opacity: 0; }
.s7b .s7b-lines[data-mode="ring"] .sp, .s7b .s7b-lines[data-mode="stack"] .mb { display: none; }   /* each layout's own set (the stem, .st, is in both) */
/* on the stack the brain and its chips come first, then the groups (the source keeps the groups first for reading order) */
.s7b .s7b-core { order: -2; }
.s7b .s7b-own { order: -1; }

/* the brain: the sphere, a thin ring that breathes, a dashed ring that turns, and a gold name plate.
   The sphere fills about 82% of its picture, so the picture is drawn 122% wide to make the sphere the core. */
.s7b .s7b-core { position: relative; z-index: 1; width: var(--s7b-core); aspect-ratio: 1; margin: 34px 0 20px; }
.s7b .s7b-orb {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(247, 183, 68, .22), 0 0 56px 4px rgba(96, 165, 250, .2), 0 0 90px 10px rgba(247, 183, 68, .12), 0 26px 50px -18px rgba(0, 0, 0, .6);
}
.s7b .s7b-orb img { position: absolute; left: -11%; top: -11%; width: 122%; height: 122%; max-width: none; object-fit: contain; }
.s7b .s7b-core::before, .s7b .s7b-core::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.s7b .s7b-core::before { inset: -14px; border: 1px solid rgba(247, 183, 68, .3); }
.s7b .s7b-core::after { inset: -32px; border: 1px dashed rgba(186, 206, 223, .22); }
.s7b .s7b-name {
  position: absolute; left: 50%; top: 100%; z-index: 1; translate: -50% -50%;
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 15px 8px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, #FFD487 0%, var(--gold) 55%, #E9A631 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 22px -10px rgba(0, 0, 0, .6);
  font: 700 10.5px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.s7b .s7b-name b { font: italic 500 19px/.8 var(--display); letter-spacing: 0; text-transform: none; }

/* ── a frame: a hairline box with its label pill on the top edge ── */
.s7b .s7b-grp {
  position: relative; width: 100%; padding: 30px 14px 16px; border-radius: 22px;
  border: 1px solid rgba(186, 206, 223, .2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
}
.s7b .s7b-gh {
  position: absolute; left: 50%; top: 0; z-index: 1; translate: -50% -50%; margin: 0;
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--navy); box-shadow: inset 0 0 0 1px rgba(186, 206, 223, .32), 0 8px 18px -10px rgba(0, 0, 0, .6);
  font: 700 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.s7b .s7b-n { font: 600 10px/1 var(--mono); letter-spacing: .06em; color: #A9BDD1; }

/* ── the members: by default three across in their frame, icon above the name ── */
.s7b .s7b-nodes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px;
}
.s7b .s7b-node { --k: 0; position: relative; min-width: 0; }
.s7b :is(.s7b-node, .s7b-chip):nth-child(2) { --k: 1; } .s7b :is(.s7b-node, .s7b-chip):nth-child(3) { --k: 2; }
.s7b .s7b-chip:nth-child(4) { --k: 3; } .s7b .s7b-chip:nth-child(5) { --k: 4; }
.s7b .s7b-a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  padding: 4px 2px; border-radius: 14px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.s7b :is(.s7b-a, .s7b-ca):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.s7b .s7b-ic { --s: var(--s7b-ic); }
.s7b .s7b-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s7b .s7b-a b { font: 700 14.5px/1.25 var(--font); letter-spacing: -.005em; color: #fff; transition: color 300ms ease; text-wrap: balance; }
.s7b .s7b-go { display: inline-block; width: 13px; height: 13px; margin: 0 0 1px 5px; vertical-align: middle;
  fill: none; stroke: var(--c2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: transform 300ms var(--ease), opacity 300ms ease; }
.s7b .s7b-a small { font: 500 12.5px/1.4 var(--font); color: #A9BDD1; text-wrap: balance; }
.s7b .s7b-nw { white-space: nowrap; }
/* IoT & AI's name in neon (app/neon.css): its chip is the glow's stacking context, so the glow sits on the chip's glass */
.s7b .s7b-soon .s7b-ca { isolation: isolate; }
.s7b .s7b-tag {   /* IoT & AI's "Coming", in its own colours (data-f="iot") */
  display: inline-block; margin-left: 2px; padding: 3px 6px 2px; border-radius: 999px; vertical-align: 2px;
  font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c2) 34%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 48%, transparent);
}
/* hover or focus a member: its title takes its colour, the arrow steps on, its line lights (brain.js) */
.s7b .s7b-a:is(:hover, :focus-visible) b { color: var(--c2); }
.s7b .s7b-a:is(:hover, :focus-visible) .s7b-go { opacity: 1; transform: translateX(3px); }
.s7b .s7b-orbit.has-hot .ln { opacity: .35; }
.s7b .s7b-orbit.has-hot .ln.hot { opacity: 1; stroke: var(--lc); stroke-width: 1.8; }
.s7b .s7b-orbit.has-hot .tm.hot { opacity: 1; }

/* ── Airdoot's own: a small caption between two gold ticks, then one row of chips (a small glass icon and a name,
   in a gold hairline pill; the one-liner is the link's tooltip). No frame and no number, on purpose. ── */
.s7b .s7b-own { position: relative; z-index: 1; width: 100%; margin-top: -14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.s7b .s7b-oh {
  margin: 0; display: inline-flex; align-items: center; gap: 10px;
  font: 700 10.5px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: #A9BDD1;
}
.s7b .s7b-oh::before, .s7b .s7b-oh::after { content: ""; width: 16px; height: 1px; background: rgba(247, 183, 68, .55); }
.s7b .s7b-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.s7b .s7b-chip { --k: 0; display: flex; min-width: 0; }
.s7b .s7b-ca {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(247, 183, 68, .3); background: rgba(255, 255, 255, .05);
  font: 600 13.5px/1.2 var(--font); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: border-color 300ms ease, background 300ms ease, color 300ms ease;
}
.s7b .s7b-ca .gi { --s: 30px; }
.s7b .s7b-ca:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--c2) 70%, transparent); background: rgba(255, 255, 255, .09); color: var(--c2); }

/* ── the ring (960px and up) ── */
@media (min-width: 960px) {
  .s7b .s7b-orbit {
    --s7b-mode: ring;
    max-width: 1120px; row-gap: 0; align-items: center;
    grid-template-columns: minmax(0, 1fr) var(--s7b-mid) minmax(0, 1fr);
    grid-template-areas: "cust cust cust" "part core prov" "own own own";
  }
  .s7b .s7b-core { grid-area: core; margin: 34px 0; }
  .s7b .s7b-grp { width: auto; padding: 30px 20px 18px; }
  .s7b [data-g="cust"] { grid-area: cust; margin-bottom: 26px; }
  .s7b [data-g="part"] { grid-area: part; justify-self: end; }
  .s7b [data-g="prov"] { grid-area: prov; justify-self: start; }
  .s7b .s7b-own { grid-area: own; margin-top: 14px; }
  /* Customers: three across, the name above the icon, so the lines leave from the frame's lower edge */
  .s7b [data-g="cust"] .s7b-nodes { display: flex; gap: 12px 30px; }
  .s7b [data-g="cust"] .s7b-node { width: 196px; }
  .s7b [data-g="cust"] .s7b-a { flex-direction: column-reverse; gap: 12px; }
  /* the two sides: one under another, the icon on the side facing the brain */
  .s7b :is([data-g="part"], [data-g="prov"]) .s7b-nodes { display: flex; flex-direction: column; gap: 12px; }
  .s7b :is([data-g="part"], [data-g="prov"]) .s7b-a { flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 3px 2px; }
  .s7b [data-g="part"] .s7b-a { flex-direction: row-reverse; text-align: right; }
  .s7b :is([data-g="part"], [data-g="prov"]) .s7b-tx { max-width: 196px; }
}
@media (min-width: 960px) and (max-width: 1179px) {
  .s7b { --s7b-core: 150px; --s7b-ic: 50px; --s7b-mid: 330px; }
  .s7b .s7b-a b { font-size: 14px; }
  .s7b .s7b-a small { font-size: 12px; }
  .s7b [data-g="cust"] .s7b-node { width: 180px; }
  .s7b :is([data-g="part"], [data-g="prov"]) .s7b-tx { max-width: 180px; }
  .s7b :is([data-g="part"], [data-g="prov"]) .s7b-a { gap: 12px; }
  .s7b .s7b-chips { gap: 6px; }
  .s7b .s7b-ca { gap: 8px; padding: 4px 12px 4px 4px; font-size: 12.5px; }
  .s7b .s7b-ca .gi { --s: 26px; }
}

/* ── motion (never hides anything unless motion is on). brain.js adds .in to the core, the chips, each frame and each line ── */
.s7b :is(.s7b-grp, .s7b-own) { --gd: 120ms; }
@media (min-width: 960px) { .s7b :is(.s7b-grp, .s7b-own) { --gd: calc(360ms + var(--g) * 110ms); } }   /* the ring comes in as one, piece by piece */
html.fx-motion .s7b .s7b-core { opacity: 0; transform: scale(.82); transition: opacity 700ms ease, transform 1000ms var(--ease); }
html.fx-motion .s7b :is(.s7b-grp, .s7b-own) { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease var(--gd), transform 800ms var(--ease) var(--gd); }
html.fx-motion .s7b :is(.s7b-node, .s7b-chip) { opacity: 0; transform: translateY(10px); transition: opacity 600ms ease, transform 800ms var(--ease); transition-delay: calc(var(--gd) + 160ms + var(--k) * 70ms); }
html.fx-motion .s7b .s7b-lines .ln { stroke-dasharray: 100 100; stroke-dashoffset: -100; transition: stroke-dashoffset 1100ms var(--ease) calc(260ms + var(--i) * 70ms), opacity 300ms ease, stroke 300ms ease, stroke-width 300ms ease; }
html.fx-motion .s7b .s7b-lines .tm { opacity: 0; transition: opacity 500ms ease calc(700ms + var(--i) * 70ms); }
html.fx-motion .s7b .s7b-core.in, html.fx-motion .s7b :is(.s7b-grp, .s7b-own).in, html.fx-motion .s7b :is(.s7b-grp, .s7b-own).in :is(.s7b-node, .s7b-chip) { opacity: 1; transform: none; }
html.fx-motion .s7b .s7b-lines .ln.in { stroke-dashoffset: 0; }
html.fx-motion .s7b .s7b-lines .tm.in { opacity: .6; }
/* the loops: they start after the entrance, in turn round the ring, and pause unless .run */
html.fx-motion .s7b .s7b-lines .pl.in { animation: s7b-flow 3.6s cubic-bezier(.42, 0, .78, .7) calc(1400ms + var(--i) * 400ms) infinite both paused; }
html.fx-motion .s7b .s7b-core.in::before { animation: s7b-breathe 3.6s ease-in-out 1400ms infinite paused; }
html.fx-motion .s7b .s7b-core.in::after { animation: s7b-turn 80s linear infinite paused; }
html.fx-motion .s7b .s7b-core.in .s7b-orb img { animation: s7b-turn 70s linear infinite paused; }
html.fx-motion .s7b .s7b-orbit .gi-b { animation-play-state: paused; }          /* the IoT icon's turning colours */
html.fx-motion .s7b .s7b-orbit.run :is(.pl.in, .s7b-orb img, .gi-b),
html.fx-motion .s7b .s7b-orbit.run .s7b-core.in::before, html.fx-motion .s7b .s7b-orbit.run .s7b-core.in::after { animation-play-state: running; }
html.fx-reduce .s7b .gi-b { animation: none; }
html.fx-reduce .s7b :is(.gi, .gi-b, .s7b-go, .s7b-a b, .s7b-ca) { transition: none; }
@keyframes s7b-flow {
  0% { stroke-dashoffset: 6; opacity: 0; }
  8% { opacity: 1; }
  64% { stroke-dashoffset: -100; opacity: 1; }
  68%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes s7b-breathe { 50% { transform: scale(1.07); opacity: .45; } }
@keyframes s7b-turn { to { transform: rotate(1turn); } }
/* calm (app/fx.js): the brain, the frames and the chips fade in where they are (no swell, no rise); the lines still grow
   out of it and pulse, the core still breathes and the IoT icon's colours still turn; the ring and the orb hold still */
html.fx-calm .s7b :is(.s7b-core, .s7b-grp, .s7b-own, .s7b-node, .s7b-chip) { transform: none; }
html.fx-calm .s7b .s7b-core.in::after, html.fx-calm .s7b .s7b-core.in .s7b-orb img { animation: none; }

/* ── the stack's widths ── */
@media (max-width: 959px) {
  .s7b { --s7b-core: 132px; }
}
@media (max-width: 720px) {
  .s7b { --s7b-core: 112px; --s7b-ic: 48px; }
  .s7b .s7b-head { margin-bottom: 18px; }
  .s7b .s7b-orbit { row-gap: 36px; }
  .s7b .s7b-core { margin: 26px 0 14px; }
  .s7b .s7b-core::before { inset: -10px; }
  .s7b .s7b-core::after { inset: -22px; }
  .s7b .s7b-name { padding: 6px 12px 7px; font-size: 9px; letter-spacing: .18em; }
  .s7b .s7b-name b { font-size: 16px; }
  .s7b .s7b-grp { padding: 28px 10px 14px; border-radius: 20px; }
  .s7b .s7b-nodes { gap: 14px 8px; }
  .s7b .s7b-a { gap: 8px; }
  .s7b .s7b-a b { font-size: 13.5px; }
  .s7b .s7b-a small { font-size: 12px; line-height: 1.35; }
  .s7b .s7b-go { display: none; }                  /* no room for it beside a two-line name; the whole tile is the link */
  .s7b .s7b-own { margin-top: -12px; gap: 10px; }
  .s7b .s7b-oh { font-size: 9.5px; letter-spacing: .18em; }
}
/* phones: five pills would break 1 / 1 / 2 / 1, so the chips become small tiles (icon above the name), three
   then two, still with no frame and no one-liner, so they stay the brain's and don't read as a fourth group */
@media (max-width: 600px) {
  .s7b .s7b-chips { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 6px; }
  .s7b .s7b-chip { grid-column: span 2; }
  .s7b .s7b-chip:nth-child(4) { grid-column: 2 / span 2; }
  .s7b .s7b-ca {
    flex: 1; flex-direction: column; gap: 7px; padding: 4px 2px; border: 0; border-radius: 12px; background: none;
    white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.25;
  }
  .s7b .s7b-ca:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .06); }
  .s7b .s7b-cn { max-width: 100px; text-wrap: balance; }   /* two lines each, so a long name does not run tile to tile */
  .s7b .s7b-ca .gi { --s: 36px; }
}
@media (max-width: 380px) {
  .s7b .s7b-grp { padding-inline: 6px; }
  .s7b .s7b-nodes { column-gap: 6px; }
  .s7b .s7b-a b { font-size: 13px; }
  .s7b .s7b-a small { font-size: 11.5px; }
  .s7b .s7b-ca { font-size: 12px; }
}