/* AI and digital transformation (2026-10-02), the second service page. Copy from the reference AI & Automation page
   and the homepage's AI card, in the V3 look: the homepage gradient leaned teal (AI is coded teal) with clouds in the
   hero, glass cards, graded photos with grain and line drawings. Signature: the hero card where everyday tools connect
   into one workflow while the weekly admin figure eases down. Loaded after v3.css and only by this page. */

/* film grain, the same monochrome noise the homepage photo tiles carry; sits on top of an .ai-grain block */
.ai-grain{position:relative;isolation:isolate}
.ai-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:var(--gr,.55);mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
.ai-grain>.wrap{position:relative;z-index:1}
@keyframes aidrift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.2%,.8%)}}

/* the second line of a heading in mid green */
h1 .tone,h2 .tone{display:block;color:#3F5C3B}

/* shared teal icon circle */
.ai-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:#DDEFF0;color:#1E6577}
.ai-ico .ic{width:19px;height:19px}

/* ---- 1. hero: the homepage gradient leaned towards teal, clouds on top; copy left, the tools card right ---- */
.ai-transformation-page .flow{background:linear-gradient(180deg,rgba(255,255,255,0) 82%,#FFFFFF 100%),linear-gradient(180deg,rgba(171,217,99,.85) 0%,rgba(171,217,99,0) 20%),
  linear-gradient(212deg,#ABD963 0%,#C6E57C 12%,#E6F0B6 26%,#D9EDDA 38%,#BCE2DE 52%,#A6D6D8 64%,#C4E5E4 80%,#EAF4F0 100%);background-color:#fff}
.ai-hero{min-height:0;padding-top:calc(64px + clamp(2.25rem,7vh,4.5rem));padding-bottom:clamp(3rem,8vh,5rem)}
.ai-hero>.wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,4.5vw,4rem);align-items:center;width:100%}
.ai-htext{display:grid;gap:1.2rem;justify-items:start}
.ai-htext .crumb{margin:0;color:var(--ink2)}
.ai-htext h1{font-size:clamp(2.1rem,3.3vw,2.9rem);line-height:1.06}
.ai-htext .lede{color:var(--ink2);max-width:52ch;line-height:1.65}
.ai-mt{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;color:#1E6577}
.ai-mt .ic{width:16px;height:16px}
.ai-htext .btn{margin-top:.2rem}
.js .ai-htext>*{animation:rise 1s var(--ease) both}
.js .ai-htext>*:nth-child(2){animation-delay:.08s}.js .ai-htext>*:nth-child(3){animation-delay:.16s}
.js .ai-htext>*:nth-child(4){animation-delay:.24s}.js .ai-htext>*:nth-child(5){animation-delay:.32s}

/* the card: frosted glass; the weekly figure on top, the tools and their links in the middle, patient records apart */
.ai-net{position:relative;justify-self:end;width:min(480px,100%);padding:1.15rem 1.3rem 1.1rem;border-radius:28px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 26px 50px rgba(14,60,76,.16),0 4px 14px rgba(14,60,76,.06),inset 0 1px 0 #fff}
.js .ai-net{animation:rise 1s var(--ease) .2s both}
.ai-ntop{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:.15rem .2rem .95rem;border-bottom:1px solid rgba(14,60,76,.08)}
.ai-hrs{display:grid;gap:.3rem}
.ai-hrs>span{font-size:.8rem;color:var(--muted);line-height:1.2}
.ai-hrs b{display:flex;align-items:baseline;gap:.3rem;font:600 2.3rem/1 var(--display);letter-spacing:-.045em;color:#16485A}
.ai-num{font-variant-numeric:tabular-nums;min-width:1.25em}
.ai-hrs small{font:600 .95rem/1 var(--sans);letter-spacing:-.01em;color:#1E6577}
.ai-spkw{display:grid;justify-items:end;gap:.25rem}
.ai-spk{display:block;width:124px;height:46px;overflow:visible}
.ai-spk path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ai-spk0{stroke:rgba(30,101,119,.2);stroke-width:1.6;stroke-dasharray:2 4}
.ai-spk1{stroke:#1E6577;stroke-width:2.4}
.ai-spke{fill:#C6E57C;stroke:#16485A;stroke-width:1.8}
.ai-eg{font-size:.72rem;color:var(--dim);line-height:1}

.ai-stage{position:relative;aspect-ratio:480/300;margin:1.15rem 0 1.05rem;container-type:inline-size}
.ai-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ai-links path{fill:none;stroke-linecap:round}
.ai-base path{stroke:rgba(30,101,119,.26);stroke-width:1.6;stroke-dasharray:3 6}
.ai-lf{stroke:#2A8AA3;stroke-width:2.2}
.ai-dot{fill:#C6E57C;stroke:#16485A;stroke-width:1.6}
.ai-hub{position:absolute;left:50%;top:44%;width:clamp(40px,12cqw,58px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  background:#16485A;color:#C6E57C;box-shadow:0 0 0 7px rgba(42,138,163,.14),0 12px 26px rgba(14,60,76,.25);transition:transform .35s var(--ease)}
.ai-hub .ic{width:46%;height:46%}
.ai-hub::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(198,229,124,.85);opacity:0;pointer-events:none}
.ai-net.live .ai-hub::after{animation:aipulse 2.6s ease-out infinite}
.ai-net.paused .ai-hub::after{animation-play-state:paused}
.ai-hub.ping{transform:translate(-50%,-50%) scale(1.07)}
@keyframes aipulse{0%{transform:scale(1);opacity:.8}75%,100%{transform:scale(1.55);opacity:0}}
.ai-node{position:absolute;top:calc(var(--y)/300*100%);display:inline-flex;align-items:center;gap:.42em;padding:.28em .8em .28em .28em;border-radius:999px;transform:translateY(-50%);
  font:600 clamp(.7rem,2.75cqw,.82rem)/1 var(--sans);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;
  background:#fff;border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(14,60,76,.1);transition:background .5s var(--ease),color .5s,box-shadow .5s}
.ai-node.l{left:0}
.ai-node.r{right:0}
.ai-node.b{left:50%;transform:translate(-50%,-50%)}
.ai-ni{width:2.15em;height:2.15em;border-radius:50%;display:grid;place-items:center;flex:none;background:#DDEFF0;color:#1E6577;transition:background .35s,color .35s}
.ai-ni .ic{width:55%;height:55%}
.ai-node.ping .ai-ni{background:#C6E57C;color:#0E3A1F}
/* not yet connected: the tool waits, faded, and its link shows only as a faint dotted line */
.js .ai-node:not(.on){background:rgba(255,255,255,.42);color:#8C9893;box-shadow:none}
.js .ai-node:not(.on) .ai-ni{background:rgba(34,53,42,.06);color:#9AA095}
.js .ai-lf{stroke-dasharray:1 2;stroke-dashoffset:1.01;transition:stroke-dashoffset .75s var(--ease)}
.js .ai-lf.on{stroke-dashoffset:0}
.js .ai-spk1{stroke-dasharray:1 2;stroke-dashoffset:1.01;transition:stroke-dashoffset .5s var(--ease)}
.js .ai-spke{opacity:0;transition:opacity .4s var(--ease)}
.js .ai-net.live .ai-spke{opacity:1}
/* patient records: apart, under a dashed line, greyed and locked */
.ai-out{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.9rem .2rem .1rem;border-top:1.5px dashed rgba(34,53,42,.18)}
.ai-out .ai-node.off{position:static;transform:none;font-size:.8rem;background:rgba(255,255,255,.3);border:1px dashed rgba(34,53,42,.24);color:#7E8A84;box-shadow:none}
.ai-out .ai-node.off .ai-ni{background:rgba(34,53,42,.07);color:#7E8A84}
.ai-oos{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}
.ai-oos .ic{width:15px;height:15px}

/* ---- 2. start with the task: heading left, its paragraph right, four points underneath ---- */
section.ai-task{padding-top:clamp(2rem,5vh,3.5rem)}
.ai-tsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5.5vw,5rem);align-items:end}
.ai-tsplit h2{font-size:clamp(2rem,3.4vw,3rem)}
.ai-tsplit .lede{color:var(--ink2);max-width:46ch;padding-bottom:.35rem}

.ai-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.2rem);margin-top:clamp(2rem,5vh,3rem);padding-top:clamp(1.5rem,3.4vh,2.1rem);border-top:1px solid var(--line)}
.ai-four article{display:grid;gap:.55rem;align-content:start}
.ai-four h3{font-size:1.08rem;line-height:1.25;letter-spacing:-.02em;margin-top:.35rem}
.ai-four p{font-size:.9rem;line-height:1.55;color:var(--muted);max-width:30ch}

/* ---- 3. what we install: graded open-sky photo with the heading, eight small glass cards around it ---- */
section.ai-inst{background:radial-gradient(45% 60% at 3% 18%,rgba(166,214,216,.55) 0%,rgba(166,214,216,0) 70%),radial-gradient(42% 58% at 98% 92%,rgba(198,229,124,.42) 0%,rgba(198,229,124,0) 70%),linear-gradient(180deg,#F4F9F6 0%,#EDF6F1 100%);--gr:.3}
.ai-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.ai-skyt{grid-column:1/3;grid-row:1/3;border-radius:24px;overflow:hidden;min-height:300px;display:flex;align-items:flex-start;padding:clamp(1.5rem,2.8vw,2.3rem);background:#2A7F97;--gr:.55;box-shadow:0 22px 50px rgba(5,32,42,.18)}
.ai-skyt .ph{position:absolute;inset:-3%;z-index:-2;background:url(img/ai-flow.jpg) 30% 50%/cover no-repeat}
.ai-skyt::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 90% at 0% 0%,rgba(5,32,42,.64) 0%,rgba(5,32,42,.3) 55%,rgba(5,32,42,0) 85%)}
.js .ai-skyt .ph{animation:aidrift 38s ease-in-out infinite alternate}
.ai-skyt h2{position:relative;z-index:1;color:#fff;font-size:clamp(1.75rem,2.7vw,2.45rem);max-width:13ch;text-shadow:0 2px 24px rgba(5,32,42,.3)}
.ai-skyt h2 .tone{color:#E3F08C}
.ai-svcs{display:contents}
.ai-svc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;row-gap:.6rem;align-items:center;align-content:start;padding:1.1rem 1.15rem 1.2rem;border-radius:20px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 16px 40px rgba(14,60,76,.08),inset 0 1px 0 #fff;transition:translate .45s var(--ease),box-shadow .45s var(--ease)}
.ai-svc:hover{translate:0 -3px;box-shadow:0 22px 48px rgba(14,60,76,.13),inset 0 1px 0 #fff}
.ai-svc .ai-ico{width:38px;height:38px;transition:background .3s,color .3s}
.ai-svc .ai-ico .ic{width:18px;height:18px}
.ai-svc:hover .ai-ico{background:#16485A;color:#C6E57C}
.ai-svc h3{font-size:1.02rem;line-height:1.22;letter-spacing:-.02em}
.ai-svc p{grid-column:1/-1;font-size:.88rem;line-height:1.5;color:var(--muted)}
.js .ai-svc{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease)}
.js .ai-bento.in .ai-svc{opacity:1;transform:none;transition-delay:calc(.1s + var(--k)*.07s),calc(.1s + var(--k)*.07s),0s,0s}

/* ---- 4. the example flow: four steps on the process gradient, a token runs the line as you scroll ---- */
.ai-cap{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:500;color:var(--muted)}
.ai-cap .ic{width:15px;height:15px;color:#8A6F0C}
.ai-ex .shead h2{font-size:clamp(1.9rem,3.2vw,2.75rem)}
.ai-ex .shead .lede{max-width:46ch}
.ai-track{--p:1;border-radius:28px;overflow:hidden;padding:clamp(2rem,5vh,2.9rem) clamp(.75rem,1.8vw,1.4rem) clamp(1.9rem,4.4vh,2.6rem);
  background:linear-gradient(212deg,#E2F0C2 0%,#EEF4D2 30%,#DDEFE6 64%,#C6E5E3 100%);--gr:.35;max-width:1080px;margin:0 auto}
.ai-tin{position:relative;z-index:1}
.ai-rail{position:absolute;left:12.5%;right:12.5%;top:32px;height:2px;margin-top:-1px;border-radius:2px;background:rgba(34,53,42,.14)}
.ai-fill{position:absolute;inset:0;border-radius:inherit;background:#1E6577;transform-origin:0 50%;transform:scaleX(var(--p));transition:transform .12s linear}
.ai-run{position:absolute;inset:0;transform:translateX(calc(var(--p)*100%));transition:transform .12s linear}
.ai-token{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#C6E57C;border:2px solid #16485A;
  box-shadow:0 0 0 6px rgba(198,229,124,.4),0 6px 14px rgba(14,60,76,.25)}
.ai-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ai-step{position:relative;z-index:2;display:grid;justify-items:center;align-content:start;text-align:center;gap:1rem;padding:0 .5rem}
.ai-sn{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#16485A;color:#C6E57C;
  box-shadow:0 0 0 7px rgba(42,138,163,.16),0 12px 26px rgba(14,60,76,.22);transition:background .5s var(--ease),color .5s,box-shadow .5s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.ai-sn .ic{width:24px;height:24px}
.ai-step.ai-hu .ai-sn{background:#F0DB6A;color:#4A3F08;box-shadow:0 0 0 7px rgba(217,184,30,.2),0 12px 26px rgba(74,63,8,.16)}
.ai-sx{display:grid;gap:.8rem;justify-items:center}
.ai-sx h3{font-size:1.2rem;letter-spacing:-.025em}
.ai-ev{display:flex;align-items:flex-start;gap:.6rem;text-align:left;padding:.75rem .95rem .8rem .8rem;border-radius:16px;width:214px;max-width:100%;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);box-shadow:0 12px 30px rgba(34,53,42,.08),inset 0 1px 0 #fff;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ai-ev .ic{width:20px;height:20px;padding:3.5px;border-radius:50%;background:#C6E57C;color:#0E3A1F;stroke-width:2.6;margin-top:.05rem;transition:background .4s,color .4s}
.ai-ev span{display:grid;gap:.12rem;font-size:.8rem;line-height:1.35;color:var(--muted)}
.ai-ev b{font:600 .9rem/1.3 var(--sans);color:var(--ink)}
.ai-hu .ai-ev .ic{background:#F0DB6A;color:#4A3F08}
/* waiting steps: a pale node and a faded card; each lights up as the token reaches it */
.js .ai-step:not(.on) .ai-sn{background:#fff;color:#9AA095;box-shadow:0 0 0 1px rgba(34,53,42,.1),0 8px 18px rgba(34,53,42,.06)}
.js .ai-step:not(.on) .ai-ev{opacity:.4;transform:translateY(6px)}
.js .ai-step:not(.on) .ai-ev .ic{background:rgba(34,53,42,.08);color:#9AA095}
.js .ai-step.on .ai-sn{animation:aipop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes aipop{40%{transform:scale(1.1)}}

/* ---- 5. scope and oversight: the shoreline band, text left, three white glass cards right inside a drawn boundary ---- */
section.ai-scope{overflow:hidden;background:#16485A;padding-block:clamp(4.5rem,11vh,7rem);--gr:.7}
.ai-sph{position:absolute;inset:-3%;z-index:-2;background:url(img/ai-shore.jpg) 50% 60%/cover no-repeat}
.js .ai-sph{animation:aidrift 38s ease-in-out infinite alternate}
.ai-scope::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,32,42,.84) 0%,rgba(5,32,42,.64) 40%,rgba(5,32,42,.34) 100%)}
.ai-scope>.wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.ai-stext{display:grid;gap:1.15rem;justify-items:start}
.ai-stext h2{color:#fff;font-size:clamp(2rem,3.4vw,3rem);text-shadow:0 2px 24px rgba(5,32,42,.35)}
.ai-stext h2 .tone{color:#A6D6D8}
.ai-stext .lede{color:rgba(255,255,255,.9);max-width:36ch;font-size:clamp(1.02rem,1.25vw,1.15rem);text-shadow:0 1px 16px rgba(5,32,42,.4)}
.ai-plink{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;padding-bottom:.25rem;color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .3s}
.ai-plink .ic{width:17px;height:17px;transition:transform .35s var(--ease)}
.ai-plink:hover{border-color:#fff}
.ai-plink:hover .ic{transform:translateX(3px)}
.ai-plink:focus-visible{outline-color:#C6E57C}
.ai-rules{position:relative;display:grid;gap:.85rem;padding:clamp(.9rem,1.6vw,1.2rem)}
.ai-bound{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ai-bound rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.5);stroke-width:1.5}
.ai-rules article{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.05rem;align-items:start;padding:1.25rem 1.5rem 1.3rem 1.25rem;border-radius:20px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 20px 48px rgba(5,32,42,.22),inset 0 1px 0 #fff}
.ai-rules .ai-ico{width:44px;height:44px;background:#16485A;color:#A6D6D8}
.ai-rules .ai-ico .ic{width:20px;height:20px}
.ai-rules h3{font-size:1.16rem;line-height:1.2;margin:.15rem 0 .3rem}
.ai-rules p{font-size:.93rem;line-height:1.55;color:var(--muted)}
/* on screen: the boundary draws itself around the space, then the three cards settle inside it */
.js .ai-bound rect{stroke-dasharray:1 2;stroke-dashoffset:1.01;fill-opacity:0;transition:stroke-dashoffset 1.5s var(--ease) .1s,fill-opacity .8s var(--ease) 1.2s}
.js .ai-rules.in .ai-bound rect{stroke-dashoffset:0;fill-opacity:1}
.js .ai-rules article{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(.55s + var(--k)*.15s)}
.js .ai-rules.in article{opacity:1;transform:none}

/* ---- 6. questions: the shared FAQ accordion from ind.css; only its link colour is set here ---- */
.iq-a a{color:#1E6577;font-weight:600}

/* ---- tablets ---- */
@media (max-width:1080px){
  .ai-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ai-skyt{grid-column:1/3}
  .ai-four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.8rem}
  .ai-four p{max-width:40ch}
}
@media (max-width:960px){
  .ai-scope>.wrap{grid-template-columns:1fr}
  .ai-stext .lede{max-width:52ch}
  .ai-rules{max-width:620px}
}
/* ---- phones ---- */
@media (max-width:860px){
  .ai-hero>.wrap{grid-template-columns:1fr}
  .ai-net{justify-self:stretch;width:100%;max-width:520px;margin-inline:auto;padding:1rem 1rem 1rem}
  .ai-tsplit{grid-template-columns:1fr;gap:1rem}
  .ai-four{grid-template-columns:1fr;gap:1.1rem;margin-top:1.8rem;padding-top:1.5rem}
  .ai-four article{grid-template-columns:auto minmax(0,1fr);column-gap:.95rem;row-gap:.2rem}
  .ai-four .ai-ico{grid-row:1/3}
  .ai-four h3{margin-top:.15rem}
  .ai-four p{max-width:none}
  .ai-bento{display:block}
  .ai-skyt{min-height:340px;padding:1.5rem 1.4rem}
  .ai-skyt .ph{background-position:22% 50%}
  .ai-skyt::before{background:linear-gradient(180deg,rgba(5,32,42,.5) 0%,rgba(5,32,42,.2) 38%,rgba(5,32,42,0) 60%)}
  .ai-skyt h2{font-size:1.7rem;max-width:15ch}
  .ai-svcs{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:.8rem calc(-1*var(--pad)) 0;padding:0 var(--pad) .6rem;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .ai-svcs::-webkit-scrollbar{display:none}
  .ai-svc{flex:0 0 70%;scroll-snap-align:start}
  .ai-track{padding:1.6rem 1.1rem 1.6rem 1rem;border-radius:24px}
  .ai-steps{grid-template-columns:1fr;row-gap:1.3rem}
  .ai-step{grid-template-columns:52px minmax(0,1fr);justify-items:start;text-align:left;column-gap:1rem;padding:0}
  .ai-sn{width:52px;height:52px}
  .ai-sn .ic{width:21px;height:21px}
  .ai-sx{justify-items:start;gap:.55rem;padding-top:.75rem}
  .ai-sx h3{font-size:1.12rem}
  .ai-ev{width:100%;max-width:300px}
  .ai-rail{left:26px;right:auto;top:26px;bottom:26px;width:2px;height:auto;margin:0 0 0 -1px}
  .ai-fill{transform-origin:50% 0;transform:scaleY(var(--p))}
  .ai-run{transform:translateY(calc(var(--p)*100%))}
  .ai-token{left:50%;top:0}
  section.ai-scope{padding-block:3.5rem}
  .ai-scope::before{background:linear-gradient(180deg,rgba(5,32,42,.82) 0%,rgba(5,32,42,.62) 50%,rgba(5,32,42,.5) 100%)}
  .ai-rules{padding:.75rem}
  .ai-rules article{padding:1.1rem 1.15rem 1.15rem 1rem;gap:.9rem}
  .ai-rules .ai-ico{width:40px;height:40px}
}
@media (max-width:520px){
  .ai-hrs b{font-size:2rem}
  .ai-spk{width:100px;height:38px}
  .ai-svc{flex-basis:74%}
}
@media (prefers-reduced-motion:reduce){
  .js .ai-htext>*,.js .ai-net,.js .ai-skyt .ph,.js .ai-sph{animation:none!important}
  .ai-net.live .ai-hub::after{animation:none}
  .ai-fill,.ai-run{transition:none}
  .js .ai-step.on .ai-sn{animation:none}
}