/* About hub: the lower sections in the standard About layout. Copy on the right, a simple animated visual on the left,
   plain alternating backgrounds. */
.hb-sec{position:relative;isolation:isolate;overflow:hidden;padding:76px 0 68px;scroll-margin-top:60px}
.hb-bg-a{background:#eef2f7}
.hb-bg-b{background:#fff}
.hb-shell{width:min(calc(100% - (2 * var(--ah-gutter)) ),var(--ah-shell));margin-inline:auto}
.hb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:40px}
.hb-copy h2{margin:0;color:#0a213f;font-size:clamp(25px,2.35vw,34px);font-weight:850;line-height:1.4;letter-spacing:-.02em;text-wrap:balance}
.hb-copy p{margin:16px 0 0;color:#40546d;font-size:15.5px;font-weight:600;line-height:1.95}
.hb-copy .gs-cta{margin-top:26px}
.hb-sec svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* timeline */
.hb-tl{position:relative;list-style:none;display:grid;gap:24px;margin:0;padding:0 0 0;width:100%;max-width:520px;margin-inline:auto}
.hb-tl__line{position:absolute;top:10px;bottom:10px;right:10px;width:4px;border-radius:2px;background:linear-gradient(180deg,#34506f,#4f7ea6)}
.hb-tl li{position:relative;display:flex;align-items:center;gap:20px}
.hb-tl__dot{flex:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid #34506f;z-index:1}
.hb-tl li.is-edge .hb-tl__dot{background:#3b82ff;border-color:#bcd6ff;box-shadow:0 0 0 6px rgba(59,130,255,.2)}
.hb-tl__body{display:grid;gap:1px}
.hb-tl__body small{color:#4f7ea6;font-size:13px;font-weight:800}
.hb-tl__body b{color:var(--ah-ink);font-size:17px;font-weight:830}
.hb-tl li.is-edge .hb-tl__body b{color:#2563eb}

/* five image nodes on a line */
.hb-path{position:relative;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0;padding:0;width:100%;max-width:640px;margin-inline:auto}
.hb-path__line{position:absolute;top:50px;left:10%;right:10%;height:4px;border-radius:2px;background:linear-gradient(270deg,#34506f,#4f7ea6,#2f9e6b)}
.hb-path li{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:3px;text-align:center}
.hb-path__img{display:grid;place-items:center;width:100px;height:100px;margin-bottom:10px;border:3px solid #4f7ea6;border-radius:50%;background:#fff;box-shadow:0 10px 22px rgba(15,32,52,.14);overflow:hidden}
.hb-path__img img{display:block;width:100%;height:100%;object-fit:cover}
.hb-path b{color:var(--ah-ink);font-size:14.5px;font-weight:830}
.hb-path small{color:#4f7ea6;font-size:11.5px;font-weight:800}

/* access rows */
.hb-rows{list-style:none;display:grid;gap:12px;margin:0;padding:0;width:100%;max-width:560px;margin-inline:auto}
.hb-rows a{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--ah-line);border-radius:14px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 8px 20px rgba(15,32,52,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hb-rows a:hover,.hb-rows a:focus-visible{transform:translateX(-4px);border-color:#4f7ea6;box-shadow:0 14px 28px rgba(15,32,52,.12)}
.hb-rows a:focus-visible{outline:2px solid #4f7ea6;outline-offset:2px}
.hb-row__ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:#eaf0f7;color:#34506f}
.hb-row__ic svg{width:26px;height:26px}
.hb-row__txt{display:grid;gap:2px;flex:1}
.hb-row__txt b{color:var(--ah-ink);font-size:16px;font-weight:830}
.hb-row__txt small{color:var(--ah-muted);font-size:13px;font-weight:650}
.hb-row__go{display:grid;place-items:center;width:28px;height:28px;color:#4f7ea6;transition:transform .25s ease}
.hb-row__go svg{width:18px;height:18px}
.hb-rows a:hover .hb-row__go{transform:translateX(-4px)}

/* entrance */
@media(prefers-reduced-motion:no-preference){
  .hb-in{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i, 0) * .2s + .12s)}
  .is-revealed .hb-in{opacity:1;transform:none}
  .hb-tl__line{transform:scaleY(0);transform-origin:top;transition:transform 1.3s cubic-bezier(.4,0,.2,1) .2s}
  .hb-path__line{transform:scaleX(0);transform-origin:right;transition:transform 1.3s cubic-bezier(.4,0,.2,1) .2s}
  .is-revealed .hb-tl__line,.is-revealed .hb-path__line{transform:none}
}

@media(max-width:1040px){.hb-grid{grid-template-columns:1fr;gap:34px}.hb-sec{padding:52px 0 46px}}
@media(max-width:620px){
  .hb-sec{padding:40px 0 36px}
  .hb-copy h2{font-size:26px}
  .hb-copy p{font-size:14px}
  .hb-path{gap:4px}
  .hb-path__img{width:58px;height:58px;border-width:2px}
  .hb-path__line{top:30px}
  .hb-path b{font-size:11.5px}
  .hb-path small{font-size:11px}
  .hb-rows a{padding:12px 14px;gap:12px}
  .hb-row__ic{width:40px;height:40px}
}

/* Alert flow: five coloured steps read right to left. No connecting line or arrows; the step numbers carry the order. */
@media(min-width:861px){.ah-system-flow{direction:rtl}}
.ah-system-flow::before,.ah-system-stage:not(:last-child)::after,.ah-system-stage:not(:last-child)::before{display:none!important}
.ah-system-stage__icon{position:relative;background:color-mix(in srgb,var(--c, #3b82ff) 14%,#fff);color:var(--c, #3b82ff);border:1.5px solid color-mix(in srgb,var(--c, #3b82ff) 38%,#fff)}
.ah-system-stage__icon::after{content:attr(data-n);position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c, #3b82ff);color:#fff;font-size:12px;font-weight:800;line-height:1;box-shadow:0 4px 10px color-mix(in srgb,var(--c, #3b82ff) 40%,transparent)}
@media(prefers-reduced-motion:no-preference){.ah-system-stage__icon{animation:none}}

/* Example states: a compact chip that hugs its content and centres under the flow */
.ah-system-events{display:flex;width:fit-content;max-width:100%;margin:26px auto 0;height:auto;min-height:48px;padding:10px 20px;border-radius:999px;background:#fff;border:1px solid #d9e5ee;box-shadow:0 6px 16px rgba(15,32,52,.07)}
.ah-system-events ul{flex:none;gap:22px}
.ah-event-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eaf0f7;color:#34506f}
.ah-event-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ah-system-events li{gap:8px;color:#2d4260;font-weight:700}
.ah-system-events li+li::before{inset-inline-start:-12px}
@media(max-width:860px){.ah-system-events{border-radius:18px;padding:12px 16px}.ah-system-events ul{flex-wrap:wrap;gap:10px 18px}}

/* Alert path animation: a highlight starts at step 1 (right) and walks through all five steps, then repeats */
@media(prefers-reduced-motion:no-preference){
  .ah-system-stage__icon,.ah-system-stage strong{animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused}
  .ah-system.is-revealed .ah-system-stage__icon,.ah-system.is-revealed .ah-system-stage strong{animation-play-state:running}
  .ah-system-stage__icon{animation-name:ah-step-icon}
  .ah-system-stage strong{animation-name:ah-step-title}
  .ah-system-stage:nth-child(1) :is(.ah-system-stage__icon,strong){animation-delay:0s}
  .ah-system-stage:nth-child(2) :is(.ah-system-stage__icon,strong){animation-delay:1.4s}
  .ah-system-stage:nth-child(3) :is(.ah-system-stage__icon,strong){animation-delay:2.8s}
  .ah-system-stage:nth-child(4) :is(.ah-system-stage__icon,strong){animation-delay:4.2s}
  .ah-system-stage:nth-child(5) :is(.ah-system-stage__icon,strong){animation-delay:5.6s}
  .ah-system-stage__icon::before{content:"";position:absolute;inset:-6px;border-radius:20px;border:2px solid var(--c, #3b82ff);opacity:0;animation:ah-step-ring 9s ease-out infinite paused}
  .ah-system.is-revealed .ah-system-stage__icon::before{animation-play-state:running}
  .ah-system-stage:nth-child(1) .ah-system-stage__icon::before{animation-delay:0s}
  .ah-system-stage:nth-child(2) .ah-system-stage__icon::before{animation-delay:1.4s}
  .ah-system-stage:nth-child(3) .ah-system-stage__icon::before{animation-delay:2.8s}
  .ah-system-stage:nth-child(4) .ah-system-stage__icon::before{animation-delay:4.2s}
  .ah-system-stage:nth-child(5) .ah-system-stage__icon::before{animation-delay:5.6s}
}
@keyframes ah-step-icon{
  0%,22%{transform:none;background:var(--c);color:#fff;box-shadow:0 12px 24px color-mix(in srgb,var(--c) 40%,transparent)}
  4%{transform:scale(1.12);background:var(--c);color:#fff;box-shadow:0 14px 28px color-mix(in srgb,var(--c) 45%,transparent)}
  18%{transform:scale(1.08);background:var(--c);color:#fff}
  30%,100%{transform:none;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);box-shadow:none}
}
@keyframes ah-step-title{0%,22%{color:var(--ah-blue)}30%,100%{color:#0c2038}}
@keyframes ah-step-ring{0%{opacity:.7;transform:scale(.9)}16%{opacity:0;transform:scale(1.25)}100%{opacity:0}}