/* ── sections/explore.css — Explore: go straight to your page, in the brain's three groups ──
   Owner, 2026-09-29 (note 4): the old line of seven cards, regrouped as the brain above it is: a white panel per
   group (01 Customers, 02 Principal partners, 03 Providers) with its label in navy caps and three rows, each a link:
   the original glass icon (.gi, app/theme.css) in its feature colour, the name, the one-liner and an arrow chip.
   A row tints with its colour on hover or keyboard focus and its arrow chip fills with the dark shade. Under the
   panels, two extras a panel wide each: the Academy, and IoT & AI (the dark card with the turning gradient edge
   and the Coming tag).
   The panels are as wide as the clients' row above them (nearly edge to edge), so the two line up.
   Widths: three panels side by side down to 700px (the one-liners and arrows go below 900px); on phones one panel
   under another, the three members as tinted tiles across, icon above the name.
   Motion: the panels rise in one after another (.rv6, --d). The only loop is the IoT gradient (theme.css's
   gi-spin), paused off screen by explore.js and off under reduced motion. */

.s7e-root {
  --edge: clamp(16px, 1.8vw, 28px);          /* the same ends as the clients' row */
  --gap: clamp(8px, 1.1vw, 16px);
  padding-top: var(--s7-sec-sm);             /* it follows the clients' light band: a shorter step (the clients' bottom is the rest) */
  /* the footer's light "Talk to Airdoot" band follows with its own top room (footer.css), so three quarters of the
     step here: the gap to it is the site's step plus a little pause before the page ends (118px at 1366 x 900) */
  padding-bottom: calc(var(--s7-sec) * .75);
  scroll-margin-top: 36px;
}
.s7e-root .s7e-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.s7e-root .s7e-head { max-width: none; margin-bottom: clamp(18px, 2.2vw, 28px); }

.s7e-root :is(.s7e-groups, .s7e-more) { margin: 0 auto; width: min(1480px, 100% - 2 * var(--edge)); }
.s7e-root .s7e-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* the rows line up across the three panels whatever wraps: each panel and its list take the row tracks of the
   groups grid (subgrid), so a two-line one-liner makes that row taller in all three, not just in its own panel */
@media (min-width: 700px) {
  .s7e-root .s7e-groups { grid-template-rows: auto repeat(3, auto); row-gap: 0; }
  .s7e-root .s7e-grp { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .s7e-root .s7e-list { grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; }
}

/* ── a group: a white panel, its label, three rows ── */
.s7e-root .s7e-grp {
  min-width: 0; padding: 18px 10px 10px; border-radius: 22px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(0, 30, 60, .05), 0 22px 40px -28px rgba(0, 30, 60, .45);
}
.s7e-root .s7e-gh {
  margin: 0 12px 8px; display: flex; align-items: baseline; gap: 9px;
  font: 700 12px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.s7e-root .s7e-n { font: 600 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--gold-ink); }
.s7e-root .s7e-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.s7e-root .s7e-list > li { display: flex; min-width: 0; }

/* ── a row (and, below, an extra): icon, name and one-liner, arrow chip ── */
.s7e-root :is(.s7e-go, .s7e-pill) {
  position: relative; flex: 1; min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 14px; text-decoration: none; color: inherit;
  transition: background .3s ease, transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease;
}
.s7e-root .s7e-go .gi { --s: 46px; }
.s7e-root .s7e-arr {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ct); color: var(--cd);
  transition: background .3s ease, color .3s ease, transform .35s var(--ease);
}
.s7e-root .s7e-arr svg { width: 15px; height: 15px; }
.s7e-root .s7e-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s7e-root .s7e-t { font: 700 16px/1.22 var(--font); letter-spacing: -.01em; color: var(--navy); }
.s7e-root .s7e-l { font: 500 13px/1.4 var(--font); color: var(--muted); text-wrap: balance; }
.s7e-root abbr[title] { text-decoration: none; }   /* OES: the expansion is a tooltip, not a dotted underline */

/* hover (and keyboard focus, which also gets the site's navy ring): the row takes its colour's tint, the arrow chip
   fills with the dark shade (white arrow on it: 4.5:1 or better for every colour) and steps on */
.s7e-root .s7e-go:is(:hover, :focus-visible) { background: var(--ct); }
.s7e-root :is(.s7e-go, .s7e-pill):is(:hover, :focus-visible) .s7e-arr { background: var(--cd); color: #fff; transform: translateX(3px); }
/* theme.css rings every link in gold, under 2:1 on this light ground: navy here, as the header and footer do */
.s7e-root :is(.s7e-go, .s7e-pill):focus-visible { outline: 3px solid var(--navy) !important; outline-offset: 2px; }
html.fx-reduce .s7e-root :is(.s7e-go, .s7e-pill):is(:hover, :focus-visible),
html.fx-reduce .s7e-root :is(.s7e-go, .s7e-pill):is(:hover, :focus-visible) .s7e-arr { transform: none; }

/* ── the two extras: a panel wide each, centred under the panels ── */
.s7e-root .s7e-more {
  list-style: none; padding: 0; margin-top: var(--gap);
  display: grid; grid-template-columns: repeat(2, calc((100% - 2 * var(--gap)) / 3)); justify-content: center; gap: var(--gap);
}
.s7e-root .s7e-more > li { display: flex; min-width: 0; }
.s7e-root .s7e-pill {
  padding: 12px 14px; border-radius: 18px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, #E2E8F0);
  box-shadow: 0 2px 4px rgba(0, 30, 60, .05), 0 18px 34px -26px rgba(0, 30, 60, .45);
}
.s7e-root .s7e-pill .gi { --s: 42px; }
.s7e-root .s7e-pill .s7e-t { font-size: 15px; }
.s7e-root .s7e-pill:is(:hover, :focus-visible) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 2px 4px rgba(0, 30, 60, .05), 0 24px 44px -26px color-mix(in srgb, var(--c) 62%, transparent);
}

/* ── IoT & AI: dark, with a gradient edge that turns ── */
.s7e-root .s7e-iot {
  border: 1.5px solid transparent;
  background: linear-gradient(160deg, #0A4A85, #00396C) padding-box,
              conic-gradient(from var(--gi-a), var(--c2), var(--c), #FFFFFF, var(--c3), var(--c2)) border-box;
  animation: gi-spin 6s linear infinite;
}
.s7e-root .s7e-iot { isolation: isolate; }   /* its name is neon (app/neon.css): the card is the glow's stacking context */
.s7e-root .s7e-iot .s7e-t { color: #fff; }
.s7e-root .s7e-iot .s7e-l { color: #BACEDF; }
.s7e-root .s7e-iot .s7e-arr { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.s7e-root .s7e-iot:is(:hover, :focus-visible) { border-color: transparent; }
.s7e-root .s7e-iot:is(:hover, :focus-visible) .s7e-arr { background: #fff; color: var(--cd); box-shadow: none; }
.s7e-root .s7e-nw { white-space: nowrap; }
.s7e-root .s7e-tag {
  display: inline-block; margin-left: 4px; padding: 3px 6px 2px; border-radius: 999px; vertical-align: 2px;
  font: 600 9px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
}
/* the gradient loops only while the section is on screen (explore.js), and not at all under reduced motion */
.s7e-root.is-off :is(.s7e-iot, .gi-b) { animation-play-state: paused; }
html.fx-reduce .s7e-root :is(.s7e-iot, .gi-b) { animation: none; }

/* ── widths ── */
@media (max-width: 1240px) {
  .s7e-root .s7e-go { gap: 12px; padding: 10px; }
  .s7e-root .s7e-t { font-size: 15px; }
  .s7e-root .s7e-l { font-size: 12.5px; }
}
@media (max-width: 1099px) {
  .s7e-root .s7e-go .gi { --s: 42px; }
  .s7e-root .s7e-pill .gi { --s: 38px; }
  .s7e-root .s7e-arr { width: 28px; height: 28px; border-radius: 8px; }
}
/* tablets: still three side by side, the name alone in each row (and in the extras) */
@media (max-width: 899px) {
  .s7e-root .s7e-grp { padding: 16px 6px 6px; border-radius: 20px; }
  .s7e-root .s7e-gh { margin: 0 10px 6px; font-size: 11px; letter-spacing: .16em; }
  .s7e-root .s7e-go { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px; }
  .s7e-root .s7e-go :is(.s7e-l, .s7e-arr) { display: none; }
  .s7e-root .s7e-more { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
}
/* phones: one panel under another, the members as tinted tiles three across, icon above the name */
@media (max-width: 699px) {
  .s7e-root .s7e-groups { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .s7e-root .s7e-grp { padding: 14px 10px 10px; }
  .s7e-root .s7e-gh { margin: 0 4px 10px; }
  .s7e-root .s7e-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .s7e-root .s7e-go {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    padding: 12px 6px; text-align: center; background: var(--ct);
  }
  .s7e-root .s7e-go:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 16%, #fff); }
  .s7e-root .s7e-go .gi { --s: 40px; }
  .s7e-root .s7e-t { font-size: 13.5px; text-wrap: balance; }
  .s7e-root .s7e-more { gap: 8px; margin-top: 10px; }
  .s7e-root .s7e-pill { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 16px; }
  .s7e-root .s7e-pill :is(.s7e-l, .s7e-arr) { display: none; }
  .s7e-root .s7e-pill .gi { --s: 34px; }
  .s7e-root .s7e-pill .s7e-t { font-size: 13.5px; }
}
@media (max-width: 359px) {
  .s7e-root .s7e-list { gap: 6px; }
  .s7e-root .s7e-go { padding: 10px 4px; }
  .s7e-root .s7e-go .gi { --s: 34px; }
  .s7e-root .s7e-t, .s7e-root .s7e-pill .s7e-t { font-size: 12.5px; }
}