/* ── smart.css — the S.M.A.R.T standard, in the site's type ──
   One navy panel, one wave. The panel is inset from the screen edge like the brain's, and only a slight
   gap sits above it: the beyond section already ends in its own padding (owner: "leave a slight margin").
   Wide screens (≥1000px): a 10-column grid with three rows (text above · the wave band · text below);
   every node spans two columns so it sits exactly on its crest or trough, and the fallback SVG in the
   band (viewBox 0 0 1000 100, stretched) lines up with it without JS.
   Narrow screens: the wave turns vertical — a zig-zag down a left rail.
   Type: Newsreader for the heading (S.M.A.R.T. in upright gold over its scribble) and the node letters,
   Manrope for the words and copy, JetBrains Mono for the Coming tag.
   Sized shorter than the original (792px at 1366×900) so it fits one screen with room to spare.

   Every hidden start state is gated on .s7s-live, which smart.js adds only after it has built the
   geometry and only under full motion, so reduced motion, ?static=1 or a script failure all show the
   finished state.                                                                                        */

.s7s-root {
  --s7s-edge: clamp(8px, 1.1vw, 16px);                         /* panel to screen edge (as the brain's) */
  --s7s-wide: clamp(16px, 3.6vw, 48px);                        /* how far the panel may reach past the 1240px column (as the brain's) */
  --s7s-pad: max(16px, var(--s7-gutter) - var(--s7s-edge));    /* the content's side room, so it lines up with the other sections' .s7-wrap */
  --nd: clamp(58px, 4.8vw, 70px);                              /* node disc */
  --amp: clamp(92px, 13vh, 136px);                             /* crest-to-trough height */
  position: relative; background: var(--page); overflow-x: clip;
  /* no top: the beyond section above ends in the site's section step, which is the whole gap; below, the same step
     of page ground before the dotted AC's dark band (round three: even gaps, was 9px over and 36px under) */
  padding: 0 0 var(--s7-sec);
}
.s7s-root .s7s-panel {
  position: relative; isolation: isolate; overflow: clip;
  width: min(var(--s7-max) + 2 * var(--s7s-wide), 100% - 2 * var(--s7s-edge)); margin-inline: auto;
  padding: clamp(36px, 5.6vh, 60px) 0 clamp(34px, 5.4vh, 58px);
  border-radius: var(--r-panel);
  background: radial-gradient(60% 50% at 50% 0%, rgba(0, 57, 108, .9) 0%, rgba(0, 57, 108, 0) 70%), var(--navy-deep);
}
.s7s-root .s7s-inner { position: relative; z-index: 1; width: min(var(--s7-max), 100% - 2 * var(--s7s-pad)); margin-inline: auto; }

/* ground: a soft light well + faint graph-paper dots (static paint) */
.s7s-root .s7s-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 62%, rgba(14, 79, 140, .55), transparent 72%),
    radial-gradient(rgba(186, 206, 223, .11) 1px, transparent 1.4px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(95% 85% at 50% 55%, #000 30%, transparent 88%);
  mask-image: radial-gradient(95% 85% at 50% 55%, #000 30%, transparent 88%);
}

/* ── heading ── */
.s7s-root .s7s-head { margin-bottom: clamp(24px, 4.4vh, 48px); }
.s7s-root .s7s-head .s7-h2 { padding-bottom: .2em; }            /* room for the scribble, which hangs below the line */
.s7s-root .s7s-head .s7-lede { text-wrap: balance; }

/* S.M.A.R.T. in the title: gold, upright (owner, round two: not italic), a touch heavier and wider-set than
   the rest of the line so the acronym holds its own without the italic, over its hand-drawn underline */
.s7s-root .s7s-scrib { position: relative; white-space: nowrap; color: var(--gold); font-style: normal; font-weight: 500; letter-spacing: .01em; padding-right: .04em; }
.s7s-root .s7s-scrib svg { position: absolute; left: -3%; width: 106%; bottom: -.24em; height: .4em; overflow: visible; pointer-events: none; }
.s7s-root .s7s-scrib path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.s7s-root .s7s-scrib path + path { stroke-width: 2.2; opacity: .75; }

/* ── the wave (wide screens) ── */
.s7s-root .s7s-wave {
  position: relative; display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: auto var(--amp) auto;
}
.s7s-root .s7s-band { grid-row: 2; grid-column: 1 / -1; position: relative; z-index: 0; pointer-events: none; }
.s7s-root .s7s-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.s7s-root .s7s-guide { fill: none; stroke: rgba(186, 206, 223, .3); stroke-width: 1.25; stroke-dasharray: 2 7; }
.s7s-root .s7s-glow { fill: none; stroke-width: 12; stroke-linecap: round; opacity: .16; }
.s7s-root .s7s-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.s7s-root .s7s-comet { fill: none; stroke-width: 3.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 5px rgba(255, 212, 135, .95)) drop-shadow(0 0 14px rgba(247, 183, 68, .7)); }
.s7s-root .s7s-dot { fill: #FFF3D6; opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 0 6px #FFD487) drop-shadow(0 0 16px rgba(247, 183, 68, .85)); }
.s7s-root .s7s-dot.on { opacity: 1; }

.s7s-root .s7s-item {
  grid-row: 1 / 4; grid-column: var(--c) / span 2; min-width: 0; position: relative; z-index: 1;
  display: grid; grid-template-rows: subgrid; justify-items: center; text-align: center;
}
.s7s-root .s7s-node {
  grid-row: 2; position: relative; display: grid; place-items: center; width: var(--nd); height: var(--nd); border-radius: 50%;
  font: 400 calc(var(--nd) * .58)/1 var(--display); letter-spacing: 0; color: var(--gold); padding-bottom: .04em;
  background: radial-gradient(120% 120% at 30% 22%, #11528F 0%, #06325E 46%, #021F3C 100%);
  border: 1.5px solid rgba(247, 183, 68, .62);
  box-shadow: 0 0 0 7px rgba(247, 183, 68, .07), 0 0 36px -4px rgba(247, 183, 68, .45), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -8px 18px rgba(0, 0, 0, .25);
  text-shadow: 0 0 18px rgba(247, 183, 68, .45);
}
.s7s-root .s7s-node::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; pointer-events: none; }
.s7s-root .up .s7s-node { align-self: start; margin-top: calc(var(--nd) / -2); }
.s7s-root .dn .s7s-node { align-self: end; margin-bottom: calc(var(--nd) / -2); }
.s7s-root .s7s-txt { --spill: 0px; padding-inline: 10px; margin-inline: calc(-1 * var(--spill)); max-width: calc(100% + 2 * var(--spill)); }
/* small laptops / landscape tablets: a node's neighbours in the same row are two columns away,
   so its text may spill a little past its own two columns (keeps it to 2 lines at 1024) */
@media (min-width: 1000px) and (max-width: 1200px) { .s7s-root .s7s-txt { --spill: 11%; } }
.s7s-root .up .s7s-txt { grid-row: 1; align-self: start; padding-bottom: calc(var(--nd) / 2 + 16px); }
.s7s-root .dn .s7s-txt { grid-row: 3; align-self: start; padding-top: calc(var(--nd) / 2 + 16px); }

.s7s-root .s7s-word {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: 0 0 6px;
  font: 700 clamp(18px, 1.45vw, 22px)/1.2 var(--font); letter-spacing: -.01em; color: #fff;
}
.s7s-root .s7s-copy { margin: 0 auto; max-width: 25ch; text-wrap: balance; font: 500 clamp(13.5px, 1.02vw, 15px)/1.5 var(--font); color: #A9BDD1; }
/* Savvy names the feature, "IoT and AI", in neon (app/neon.css), bold as the hero's; the line is the glow's stacking context */
.s7s-root .s7s-copy { isolation: isolate; }
.s7s-root .s7s-copy .neon-ai { font-weight: 700; }
.s7s-root .s7s-tag {
  display: inline-block; padding: 5px 8px 4px; border: 1px solid rgba(247, 183, 68, .55); border-radius: 999px;
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}

/* ── motion states (only with .s7s-live, under html.fx-motion) ── */
html.fx-motion .s7s-root.s7s-live .s7s-node { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease; }
html.fx-motion .s7s-root.s7s-live .s7s-item:not(.on) .s7s-node { opacity: 0; transform: scale(.35); }
html.fx-motion .s7s-root.s7s-live .s7s-item.on .s7s-node::after { animation: s7sPing 1.1s var(--ease) both; }
html.fx-motion .s7s-root.s7s-live .s7s-txt { transition: opacity .55s var(--ease) .1s, transform .75s var(--ease) .1s; }
html.fx-motion .s7s-root.s7s-live .up:not(.on) .s7s-txt { opacity: 0; transform: translateY(12px); }
html.fx-motion .s7s-root.s7s-live .dn:not(.on) .s7s-txt { opacity: 0; transform: translateY(-12px); }
@keyframes s7sPing { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

html.fx-motion .s7s-root.s7s-live .s7s-head > * { transition: opacity .8s var(--ease), transform .9s var(--ease); }
html.fx-motion .s7s-root.s7s-live .s7s-head > :nth-child(2) { transition-delay: .08s; }
html.fx-motion .s7s-root.s7s-live .s7s-head > :nth-child(3) { transition-delay: .16s; }
html.fx-motion .s7s-root.s7s-live .s7s-head:not(.in) > * { opacity: 0; transform: translateY(18px); }
html.fx-motion .s7s-root.s7s-live .s7s-scrib path { transition: stroke-dashoffset 1s var(--ease) .5s; }
html.fx-motion .s7s-root.s7s-live .s7s-scrib path + path { transition-delay: .95s; }
html.fx-motion .s7s-root.s7s-live .s7s-head:not(.in) .s7s-scrib path { stroke-dashoffset: 1; }

/* ── narrow screens: a vertical zig-zag down a left rail ── */
@media (max-width: 999px) {
  .s7s-root { --nd: 54px; --rail: 116px; }
  .s7s-root .s7s-wave { display: flex; flex-direction: column; gap: 24px; max-width: 520px; margin-inline: auto; padding-block: 20px; }
  .s7s-root .s7s-band { position: absolute; inset: 0; }
  .s7s-root:not(.s7s-geo) .s7s-svg { display: none; }           /* the stretched fallback only fits the wide grid */
  .s7s-root:not(.s7s-geo) .s7s-band::before {                  /* no-JS stand-in: a plain rail */
    content: ""; position: absolute; left: calc(var(--rail) / 2); top: 0; bottom: 0; width: 2px; transform: translateX(-1px);
    background: linear-gradient(transparent, var(--gold) 12%, var(--gold-60) 88%, transparent);
  }
  .s7s-root .s7s-item { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto; align-items: center; justify-items: start; text-align: left; }
  .s7s-root .s7s-node { grid-row: 1; grid-column: 1; margin: 0 !important; }
  .s7s-root .up .s7s-node { justify-self: start; align-self: center; margin-left: 2px !important; }
  .s7s-root .dn .s7s-node { justify-self: end; align-self: center; margin-right: 2px !important; }
  .s7s-root .s7s-txt, .s7s-root .up .s7s-txt, .s7s-root .dn .s7s-txt { grid-row: 1; grid-column: 2; align-self: center; padding: 0 0 0 16px; }
  .s7s-root .s7s-word { justify-content: flex-start; margin-bottom: 3px; }
  .s7s-root .s7s-copy { margin: 0; max-width: 34ch; }
  html.fx-motion .s7s-root.s7s-live .up:not(.on) .s7s-txt, html.fx-motion .s7s-root.s7s-live .dn:not(.on) .s7s-txt { transform: translateX(-10px); }
}
@media (max-width: 600px) {
  .s7s-root { --nd: 48px; --rail: 88px; }
  .s7s-root .s7s-panel { border-radius: 24px; padding: 34px 0 26px; }
  .s7s-root .s7s-head { margin-bottom: 14px; }
  .s7s-root .s7s-wave { gap: 20px; padding-block: 16px; }
  .s7s-root .s7s-txt, .s7s-root .up .s7s-txt, .s7s-root .dn .s7s-txt { padding-left: 14px; }
}

/* calm (app/fx.js): the line still draws with the scroll, its head and the comet still glow along it and each node still
   pings as the line reaches it, but the nodes, the words and the heading fade in where they are (no pop, no rise) */
html.fx-calm .s7s-root.s7s-live .s7s-item:not(.on) .s7s-node { transform: none; }
html.fx-calm .s7s-root.s7s-live :is(.up, .dn):not(.on) .s7s-txt { transform: none; }
html.fx-calm .s7s-root.s7s-live .s7s-head:not(.in) > * { transform: none; }