/* kliniX.my — one stylesheet, CSP style-src 'self' (no inline styles anywhere).
   Layout: >=1200 desktop (mockup Main.dc.html), 768-1199 tablet, <=767 phone (mockup Mobile.dc.html).
   Old Safari (iOS/iPadOS 15): each clip-overflow rule has an overflow:hidden fallback before it, cqw has a vw fallback,
   and :focus-visible never shares a selector list with :hover (Safari < 15.4 would drop the whole rule). */

/* ---------- fonts (Geist + Geist Mono, SIL OFL 1.1, latin subset) ---------- */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/geist-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/geist-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/geist-mono-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --bg:#fbfbfd; --bg2:#f5f5f7; --ink:#1d1d1f; --ink2:#424245; --mute:#6e6e73; --mute2:#626267;
  --line:#e3e3e8; --lime:#c9f53f; --blue:#45b8f0; --link:#0066cc; --link-h:#004f9e; --err:#b3000f;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.2,.9,.3,1.25);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:32px; --maxw:1200px; --secpad:clamp(96px,11vw,160px);
  color-scheme:light;
}
@media (max-width:767px){:root{--gut:24px}}
@media (max-width:359px){:root{--gut:16px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:64px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{display:block}
main:focus{outline:none}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,video{display:block;max-width:100%}
svg{flex-shrink:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-h)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:8px}
::selection{background:var(--lime);color:var(--ink)}
.wrap{width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto}
.nw{white-space:nowrap}
.br-sm,.sm-only{display:none}
@media (min-width:768px){.v-sm{display:none!important}}
@media (max-width:767px){.v-lg{display:none!important}}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}

.skip{position:absolute;left:12px;top:-80px;z-index:100;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:980px;background:var(--ink);color:#fff;font-size:15px;font-weight:500;transition:top .2s}
.skip:focus{top:10px;color:#fff}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;height:52px;background:rgba(251,251,253,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(29,29,31,.08)}
.hdr__row{height:51px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:9px;height:44px;color:var(--ink);border-radius:10px}
.brand:hover{color:var(--ink)}
.brand svg{transition:transform .5s var(--spring)}
.brand:hover svg{transform:rotate(90deg) scale(1.06)}
.brand:focus-visible svg{transform:rotate(90deg) scale(1.06)}
.brand__name{font-size:19px;font-weight:600;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:20px}
.nav a{position:relative;display:flex;align-items:center;height:44px;padding:0 10px;font-size:13px;color:var(--ink2);transition:color .25s}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--ink)}
.nav a:focus-visible{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a:focus-visible::after{transform:scaleX(1)}
.hdr__end{justify-self:end;display:flex;align-items:center;gap:16px}

.lang{display:flex;align-items:center;height:30px;padding:0 2px;border-radius:980px;background:rgba(29,29,31,.06)}
.lang a{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin:-7px 0;border-radius:980px}
.lang a span{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:980px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:#515154;transition:background-color .25s,color .25s,box-shadow .25s,transform .25s var(--ease)}
.lang a[aria-current="page"] span{background:#fff;box-shadow:0 1px 3px rgba(29,29,31,.14);color:var(--ink)}
.lang a:not([aria-current]):hover span{color:var(--ink);background:rgba(255,255,255,.7);transform:translateY(-1px)}
.lang a:not([aria-current]):focus-visible span{color:var(--ink);background:rgba(255,255,255,.7);transform:translateY(-1px)}
.lang__sep{display:none}

.pill-link{display:flex;align-items:center;height:44px;border-radius:980px}
.pill-link span{display:inline-flex;align-items:center;height:30px;padding:0 16px;border-radius:980px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pill-link:hover span{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(29,29,31,.6),0 0 0 3px rgba(201,245,63,.6),0 0 22px 2px rgba(69,184,240,.28)}
.pill-link:focus-visible span{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(29,29,31,.6),0 0 0 3px rgba(201,245,63,.6),0 0 22px 2px rgba(69,184,240,.28)}

@media (max-width:859px){
  .nav{display:none}
  .hdr__row{grid-template-columns:auto 1fr}
  .hdr__end{gap:6px}
}

/* ---------- buttons + links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border:0;border-radius:980px;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,opacity .25s}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{color:#fff;background:#000;transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(29,29,31,.6),0 0 0 4px rgba(201,245,63,.55),0 0 36px 6px rgba(69,184,240,.22)}
.btn--dark:focus-visible{color:#fff;background:#000;transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(29,29,31,.6),0 0 0 4px rgba(201,245,63,.55),0 0 36px 6px rgba(69,184,240,.22)}
.btn:active{transform:translateY(0) scale(.98)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.tlink{display:inline-flex;align-items:center;gap:5px;height:44px;font-size:19px;letter-spacing:-.01em;color:var(--link);border-radius:8px}
.tlink:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.tlink__arr{display:inline-block;transition:transform .35s var(--ease)}
.tlink:hover .tlink__arr{transform:translateX(4px)}
.tlink:focus-visible .tlink__arr{transform:translateX(4px)}

/* ---------- small shared bits ---------- */
.badge{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 16px 0 13px;border-radius:980px;background:#fff;border:1px solid rgba(29,29,31,.1);box-shadow:0 2px 12px rgba(29,29,31,.05);font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.badge::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(201,245,63,.45) 44%,rgba(255,255,255,.95) 50%,rgba(69,184,240,.3) 56%,transparent 70%);transform:translateX(-110%);animation:kx-shimmer 5.5s ease-in-out 1.8s infinite}
.live{position:relative;display:inline-block;flex:none;width:9px;height:9px}
.live::before,.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lime)}
.live::before{opacity:0;animation:kx-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.live::after{box-shadow:inset 0 0 0 1px rgba(80,110,0,.35)}

.eyebrow{font-family:var(--mono);font-size:13px;line-height:16px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.h2{margin-top:18px;font-size:clamp(40px,4.2vw + 12px,72px);line-height:1.05;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.h2--proof{font-size:clamp(30px,3.4vw + 12px,60px);line-height:1.08}
.lede{margin-top:18px;font-size:21px;line-height:1.4;letter-spacing:-.01em;color:var(--mute);text-wrap:balance}
.sec{position:relative;overflow:hidden;overflow:clip;padding:var(--secpad) 0}
.sec--alt{background:var(--bg2)}
.sec--alt .eyebrow,.sec--alt .lede{color:var(--mute2)}
.sec__head{text-align:center}

.appicon{width:100%;height:100%;border-radius:24%;background:linear-gradient(155deg,#272b29 0%,#0d0f0e 55%,#050606 100%);box-shadow:0 44px 80px -24px rgba(11,13,12,.5),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.appicon svg{width:64.6%;height:64.6%}

.glass{position:absolute;pointer-events:none}
.glass--bubble,.glass--p1{aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 48px -14px rgba(29,29,31,.16),inset 0 -10px 22px rgba(69,184,240,.14)}
.glass--tile,.glass--p2{aspect-ratio:1;border-radius:31%;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 48px -14px rgba(29,29,31,.16),inset 0 -10px 22px rgba(201,245,63,.2)}
.glass--lime,.glass--p3{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 30%,#f3ffd0 0%,#c9f53f 55%,#9cc72a 100%);box-shadow:0 10px 20px -6px rgba(120,160,20,.5)}
.glass--blue,.glass--p4{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 30%,#e3f5fe 0%,#45b8f0 60%,#2a93c9 100%);box-shadow:0 8px 16px -6px rgba(42,147,201,.55)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;overflow:clip;padding:104px 0 40px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg)}
.hero__copy{display:flex;flex-direction:column;align-items:center;width:min(var(--maxw),100% - 2*var(--gut))}
.hero__title{margin-top:28px;font-size:clamp(48px,7.5vw + 4px,112px);line-height:1.02;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.hero__sub{margin-top:22px;font-size:clamp(21px,1.2vw + 11px,28px);line-height:1.25;font-weight:500;letter-spacing:-.015em;color:var(--mute)}
.hero__ctas{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px}
.a-up{animation:kx-up 1s var(--ease) both}
.d0{animation-delay:.05s}.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}

.hero__art{position:relative;flex-shrink:0;width:100%;max-width:1440px;aspect-ratio:1440/600;margin-top:40px;container-type:inline-size;
  --k:.33;--rr:.2778;--r:min(27.78vw,400px);--start:180deg;--dur:72s;--mark:min(16.111vw,232px);--lift:min(3.06vw,44px);
  animation:kx-fade 1.4s ease .6s both}
.hglow{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none}
.hglow--lime{left:26.39%;top:8.33%;width:31.94%;background:radial-gradient(closest-side,rgba(201,245,63,.66),rgba(201,245,63,.3) 50%,rgba(201,245,63,0));animation:kx-glow 9s ease-in-out infinite}
.hglow--blue{left:43.06%;top:11.67%;width:30.56%;background:radial-gradient(closest-side,rgba(69,184,240,.5),rgba(69,184,240,.2) 50%,rgba(69,184,240,0));animation:kx-glow 9s ease-in-out -4.5s infinite}
.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rings--circle,.hsat{display:none}
.ring-dash{animation:kx-dash 14s linear infinite reverse}
.ring-arc{transform-box:fill-box;transform-origin:center;animation:kx-spin-rev 16s linear infinite}
.glass--bubble{left:17.36%;top:5%;width:7.78%;animation:kx-float 9s ease-in-out -3s infinite}
.glass--tile{left:79.86%;top:71.67%;width:5.83%;animation:kx-tilt 10s ease-in-out -2s infinite;transform:rotate(14deg)}
.glass--lime{left:80%;top:18.33%;width:1.94%;animation:kx-float 6s ease-in-out -1s infinite}
.glass--blue{left:18.19%;top:75.33%;width:1.39%;animation:kx-float 8s ease-in-out -5s infinite}
.hshadow{position:absolute;left:42.36%;top:66%;width:15.28%;height:5.67%;border-radius:50%;background:rgba(29,29,31,.22);filter:blur(16px);animation:kx-shadow 7s ease-in-out infinite}
.hmark{position:absolute;z-index:3;left:calc(50% - var(--mark)/2);top:calc(50% - var(--mark)/2 - var(--lift));width:var(--mark);aspect-ratio:1;animation:kx-float 7s ease-in-out infinite}
.hmark .appicon{rotate:0deg}
.hsat{position:absolute;left:50%;top:50%;width:0;height:0;animation:kx-spin-rev 11s linear infinite}
.hsat::before{content:"";position:absolute;left:-4px;top:calc(min(342px,100vw - 2*var(--gut))*-.263 - 4px);width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px 3px rgba(69,184,240,.55)}

/* orbit: an ellipse = a spinning circle squashed by scaleY(--k); each chip counter-spins and un-squashes, so it stays upright and undistorted.
   This is the no-JS fallback; app.js takes over (.is-3d below). The icon floats --lift above the ring centre, so the far arc passes behind it (z 2 < 3). */
.orbit{position:absolute;z-index:2;left:50%;top:50%;width:0;height:0;transform:scaleY(var(--k));pointer-events:none}
.orbit__arm,.orbit__pos,.orbit__c,.orbit__u{position:absolute;left:0;top:0;width:0;height:0}
.orbit__arm{--i:0;rotate:calc(var(--start) + var(--i)*60deg);animation:kx-spin-rev var(--dur) linear infinite}
.orbit__arm:nth-child(2){--i:1}.orbit__arm:nth-child(3){--i:2}.orbit__arm:nth-child(4){--i:3}.orbit__arm:nth-child(5){--i:4}.orbit__arm:nth-child(6){--i:5}
.orbit__pos{transform:translateX(var(--r))}
.orbit__c{rotate:calc(-1*(var(--start) + var(--i)*60deg));animation:kx-spin var(--dur) linear infinite}
.orbit__u{transform:scaleY(calc(1/var(--k)))}
.chip{position:absolute;left:0;top:0;translate:-50% -50%;display:flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 8px;border-radius:980px;background:rgba(255,255,255,.92);border:1px solid rgba(29,29,31,.08);box-shadow:0 14px 34px -12px rgba(29,29,31,.22);white-space:nowrap;animation:kx-depth var(--dur) linear infinite;animation-delay:calc((var(--i) - 6)*var(--dur)/6)}
.chip__ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--ink)}
.chip__ic svg{width:16px;height:16px}
.chip__t{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.chip__n{font-family:var(--mono);font-size:11px;font-weight:500;color:#515154}

/* 24 Sep (g2) — app.js drives the orbit (.is-3d): chips ride the drawn ellipse with real depth (the far half passes behind
   the icon, a little smaller and dimmer), the ring plane tips toward a mouse (the chips stay upright and crisp), press-drag
   spins it with inertia, a click on the icon pulses. On the phone ring the CSS spin cruises (.is-live without .is-3d) and
   app.js only takes over while a finger is on it. Without JS the CSS spin above runs instead. */
.hero__scene{position:absolute;inset:0}
.hero__art.is-3d,.hero__art.is-live{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hero__art.is-live{cursor:grab}
.hero__art.is-grabbing{cursor:grabbing}
.is-3d .orbit{z-index:auto;transform:none}
.is-3d .orbit__arm{z-index:4;rotate:none;animation:none}
.is-3d .orbit__pos,.is-3d .orbit__u{transform:none}
.is-3d .orbit__c{rotate:none;animation:none}
.is-3d .chip{scale:none;animation:none}
.is-3d .ring-dash,.is-3d .ring-arc,.is-3d .hsat{animation:none}
.is-3d .hmark .appicon,.is-live .hmark .appicon{position:relative;overflow:hidden;overflow:clip;box-shadow:0 26px 40px -26px rgba(11,13,12,.6),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.16)}
.is-live .hmark .appicon{cursor:pointer}
@media (hover:hover) and (pointer:fine){.is-3d .rings--ellipse{will-change:transform}} /* the ring tilt then moves a layer instead of repainting the art */
.appicon__spec{position:absolute;left:-50%;top:-50%;width:200%;height:200%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.24),rgba(255,255,255,.07) 40%,rgba(255,255,255,0) 72%);opacity:.5}
.hmark__sh{position:absolute;z-index:-1;left:0;right:0;top:36%;bottom:-20%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(11,13,12,.42),rgba(11,13,12,.14) 60%,rgba(11,13,12,0))}
.chip__sh{position:absolute;left:12%;right:12%;top:calc(100% + 3px);height:14px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(29,29,31,.3),rgba(29,29,31,0));opacity:0}
.chip__hl{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1.5px rgba(160,205,20,.9),0 0 0 5px rgba(201,245,63,.26),0 16px 36px -12px rgba(160,205,20,.55);opacity:0}
.hripple{position:absolute;z-index:1;left:50%;top:50%;border-radius:50%;pointer-events:none;border:1.5px solid rgba(160,205,20,.9);box-shadow:0 0 26px rgba(201,245,63,.45),inset 0 0 26px rgba(201,245,63,.25);opacity:0}
.hripple--blue{border-color:rgba(69,184,240,.85);box-shadow:0 0 26px rgba(69,184,240,.35),inset 0 0 26px rgba(69,184,240,.2)}
@media (max-width:767px){
  .is-3d .hmark .appicon,.is-live .hmark .appicon{box-shadow:0 30px 60px -18px rgba(29,29,31,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
  .hmark__sh{display:none}
  .js .hero__art .chip{animation:none} /* with JS the chips ride the ring exactly (the float is the no-JS look) */
}

/* ---------- film (the one dark band) ---------- */
.film{position:relative;overflow:hidden;overflow:clip;padding:150px 0 140px;background:linear-gradient(180deg,#000 0%,#0b0d0c 100%);color:#f5f5f7;text-align:center}
.film::before{content:"";position:absolute;left:50%;top:-260px;width:800px;height:520px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(201,245,63,.12),rgba(201,245,63,0));pointer-events:none}
.film .eyebrow{color:#a1a1a6}
.film .h2{color:#fff}
.film .lede{color:#a1a1a6}
.film__stage{position:relative;width:min(1200px,100%);margin:56px auto 0}
.film__glow{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;animation:kx-glow 10s ease-in-out infinite}
.film__glow--lime{left:-8%;top:-14%;width:48%;background:radial-gradient(closest-side,rgba(201,245,63,.2),rgba(201,245,63,0))}
.film__glow--blue{right:-8%;bottom:-22%;width:52%;background:radial-gradient(closest-side,rgba(69,184,240,.24),rgba(69,184,240,0));animation-delay:-5s}
.film__frame{position:relative;z-index:1;aspect-ratio:16/9;border-radius:28px;overflow:hidden;overflow:clip;background:#000;box-shadow:0 60px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.film__frame:hover,.film__frame:focus-within{transform:scale(1.012);box-shadow:0 70px 140px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.2),0 0 90px -10px rgba(201,245,63,.2)}
.film__frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.film__frame video:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:24px}
.film__cap{margin-top:32px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;line-height:20px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#a1a1a6}
/* film header (24 Sep g): the real kliniX lockup inside the headline (1 SVG unit = .001em, "klini" ascender = .74em,
   baseline 220 units above the SVG bottom), a slow light sweep clipped to the glyphs, a soft lime/blue glow, a play button */
.kxw{position:relative;isolation:isolate;display:inline-block;width:4.346em;height:1.18em;margin:0 .02em;vertical-align:-.22em}
.kxw::before{content:"";position:absolute;z-index:-1;left:-16%;right:-16%;top:-46%;bottom:-46%;pointer-events:none;background:radial-gradient(ellipse 34% 40% at 39% 54%,rgba(201,245,63,.2),rgba(201,245,63,0)),radial-gradient(ellipse 21% 44% at 77% 50%,rgba(69,184,240,.3),rgba(69,184,240,0));animation:kx-glow 9s ease-in-out infinite}
.kxw__svg{display:block;width:100%;height:100%;overflow:visible}
.kxw__sweep{animation:none}
.js .sec__head.in .kxw__sweep{animation:kx-sweep 2.4s cubic-bezier(.45,0,.2,1) .5s 1 both} /* one glint when the header is revealed */
.film__play{display:inline-flex;align-items:center;gap:12px;height:52px;margin-top:34px;padding:0 24px 0 8px;border:0;border-radius:980px;background:#fff;color:var(--ink);font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1;cursor:pointer;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 44px -18px rgba(201,245,63,.45);transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .4s var(--ease),visibility .4s}
.film__play-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--ink);transition:transform .45s var(--spring)}
.film__play-ic svg{width:14px;height:14px;margin-left:2px}
.film__play-sep{width:3px;height:3px;border-radius:50%;background:#c7c7cc}
.film__play-t{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;color:#515154}
.film__play:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(201,245,63,.5),0 18px 40px -14px rgba(201,245,63,.55),0 0 44px 6px rgba(69,184,240,.22)}
.film__play:focus-visible{outline:2px solid #fff;outline-offset:3px;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 44px -18px rgba(201,245,63,.45)}
.film__play:hover .film__play-ic{transform:scale(1.08)}
.film__play:active{transform:scale(.98)}
html:not(.js) .film__play{display:none}
.film:has(.film__stage.is-playing) .kxw::before{animation-play-state:paused}
.film:has(.film__stage.is-playing) .film__play{opacity:0;visibility:hidden;pointer-events:none} /* the film has taken over; its own controls pause it */
@media (forced-colors:active){#kxw-k,#kxw-ini{fill:CanvasText}.kxw__sweep,.kxw::before{display:none}}

/* ---------- flow ---------- */
.flow{position:relative;margin-top:96px}
.flow__track{position:absolute;left:8.333%;right:8.333%;top:75px;height:2px;pointer-events:none}
.flow__line,.flow__fill{position:absolute;inset:0;border-radius:2px}
.flow__line{background:var(--line)}
.flow__fill{background:var(--ink);transform-origin:left center;transition:transform 1.8s cubic-bezier(.6,0,.2,1) .25s}
.flow__runner{position:absolute;inset:0;animation:kx-travel-x 6s linear infinite}
.flow__dot{position:absolute;z-index:1;left:-9px;top:-8px;width:18px;height:18px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink),0 0 0 7px rgba(201,245,63,.35),0 0 24px 4px rgba(201,245,63,.75)}
.flow__list{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.flow__step{display:flex;flex-direction:column;align-items:center;text-align:center}
.flow__head{display:contents}
.flow__num{order:0;height:16px;font-family:var(--mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;color:var(--mute)}
.flow__node{order:1;position:relative;display:block;margin-top:18px;width:84px;height:84px}
.flow__node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(160,205,20,.9);opacity:0;pointer-events:none}
.flow__ping{position:absolute;inset:0;border-radius:50%;background:rgba(201,245,63,.55);opacity:0;animation:kx-node-ping 6s cubic-bezier(.2,.6,.3,1) infinite}
.flow__disc{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#fff;border:1px solid rgba(29,29,31,.12);box-shadow:0 12px 30px -14px rgba(29,29,31,.3);color:var(--ink);animation:kx-lit 6s ease-out infinite;transition:transform .45s var(--spring),box-shadow .45s var(--ease)}
.flow__disc svg{width:30px;height:30px;transition:transform .45s var(--spring)}
.flow__step:nth-child(2) .flow__ping,.flow__step:nth-child(2) .flow__disc{animation-delay:1s}
.flow__step:nth-child(3) .flow__ping,.flow__step:nth-child(3) .flow__disc{animation-delay:2s}
.flow__step:nth-child(4) .flow__ping,.flow__step:nth-child(4) .flow__disc{animation-delay:3s}
.flow__step:nth-child(5) .flow__ping,.flow__step:nth-child(5) .flow__disc{animation-delay:4s}
.flow__step:nth-child(6) .flow__ping,.flow__step:nth-child(6) .flow__disc{animation-delay:5s}
.flow__step:hover .flow__disc{transform:scale(1.08);box-shadow:0 18px 36px -14px rgba(29,29,31,.35),0 0 0 6px rgba(201,245,63,.35)}
.flow__step:hover .flow__disc svg{transform:scale(1.1) rotate(-6deg)}
.flow__step:hover .flow__node::after{animation:kx-ring 1.3s ease-out infinite}
.flow__t{order:2;margin-top:24px;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.flow__d{order:3;margin-top:8px;max-width:168px;font-size:15px;line-height:1.4;color:var(--mute)}
.flow__glint,.flow__trail{display:none}
/* the parts of each station icon that move when the station "lands" (app.js §6) */
.ic-plus,.ic-tk,.ic-rcpt{transform-box:fill-box;transform-origin:center}
.ic-steth{transform-box:fill-box;transform-origin:50% 0}
.ic-hand,.ic-pill{transform-box:view-box;transform-origin:12px 12px}
.ic-check,.ic-lines{stroke-dasharray:1}
/* sound toggle: off by default, shown by app.js only where Web Audio exists */
.flow__foot{position:relative;z-index:2;display:flex;justify-content:center;margin-top:64px}
.snd{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 19px 0 16px;border:1px solid rgba(29,29,31,.12);border-radius:980px;background:#fff;color:var(--ink2);font-size:15px;font-weight:500;letter-spacing:-.005em;cursor:pointer;box-shadow:0 1px 2px rgba(29,29,31,.04);-webkit-tap-highlight-color:transparent;transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.snd[hidden]{display:none}
.snd{position:relative}
.snd::after{content:"";position:absolute;inset:-10px -8px;border-radius:980px} /* hit area ≥ 44 px on screen even under the .75/.85 page zoom */
.snd:hover{color:var(--ink);border-color:rgba(29,29,31,.24);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(29,29,31,.45)}
.snd:active{transform:scale(.97)}
.snd:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:980px}
.snd__ic{display:flex;width:18px;height:18px;transition:color .35s var(--ease)}
.snd__ic svg{width:18px;height:18px}
.snd__w{opacity:0;transition:opacity .3s var(--ease)}
.snd__x{transition:opacity .3s var(--ease)}
.snd__eq{display:inline-flex;align-items:flex-end;gap:2px;width:0;height:12px;margin-left:-10px;opacity:0;overflow:hidden;transition:width .35s var(--ease),margin .35s var(--ease),opacity .35s var(--ease)}
.snd[aria-pressed="true"] .snd__eq{width:10px;margin-left:0;opacity:1}
.snd__eq i{display:block;width:2px;height:12px;border-radius:1px;background:currentColor;opacity:.4;transform:scaleY(.25);transform-origin:50% 100%;transition:transform .35s var(--ease),opacity .35s,background-color .35s}
.snd[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 12px 26px -14px rgba(29,29,31,.6),0 0 0 4px rgba(201,245,63,.32)}
.snd[aria-pressed="true"] .snd__ic{color:var(--lime)}
.snd[aria-pressed="true"] .snd__w{opacity:1}
.snd[aria-pressed="true"] .snd__x{opacity:0}
.snd[aria-pressed="true"] .snd__eq i{background:var(--lime);opacity:1;transform:scaleY(.42)}
.snd[aria-pressed="true"] .snd__eq i:nth-child(2){transform:scaleY(.7)}
.snd.is-beat .snd__eq i{animation:kx-eq .5s var(--ease)}
.snd.is-beat .snd__eq i:nth-child(2){animation-delay:.05s}
.snd.is-beat .snd__eq i:nth-child(3){animation-delay:.1s}
@keyframes kx-eq{0%,100%{transform:scaleY(.42)}30%{transform:scaleY(1)}}

/* ---------- modules (bento) ---------- */
.bento{margin-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(280px,auto);gap:20px}
.tile{position:relative;overflow:hidden;overflow:clip;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px;border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(29,29,31,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile>*{position:relative}
.tile__ic{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:26px;background:linear-gradient(160deg,#fff 0%,#eeeff2 100%);box-shadow:inset 0 0 0 1px rgba(29,29,31,.07),0 10px 18px -14px rgba(29,29,31,.26);color:var(--ink);isolation:isolate;transition:transform .5s var(--spring),box-shadow .5s var(--ease)}
.tile__ic::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(160deg,#fbfff0 0%,#e6f7ae 100%);opacity:0;transition:opacity .45s var(--ease)}
.tile:nth-child(even) .tile__ic::before{background:linear-gradient(160deg,#f6fbff 0%,#d6effc 100%)}
.kx-ic{display:block;width:62px;height:62px;overflow:visible}
.tile h3{font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.tile p{margin-top:8px;font-size:17px;line-height:1.45;color:var(--mute)}
.tile__live{position:absolute;right:34px;top:71px;width:10px;height:10px}
.tile:hover{transform:perspective(1100px) translateY(-6px) rotateX(2.5deg) rotateY(-1.5deg);box-shadow:0 34px 60px -30px rgba(29,29,31,.32),0 0 0 1px rgba(201,245,63,.75),0 26px 70px -26px rgba(201,245,63,.65)}
.tile:nth-child(even):hover{transform:perspective(1100px) translateY(-6px) rotateX(2.5deg) rotateY(1.5deg);box-shadow:0 34px 60px -30px rgba(29,29,31,.32),0 0 0 1px rgba(69,184,240,.6),0 26px 70px -26px rgba(69,184,240,.6)}
.tile:hover .tile__ic{transform:translateY(-4px) rotate(-8deg) scale(1.06)}
.tile:hover .tile__ic::before,.tile.is-play .tile__ic::before{opacity:1}
.tile--emr{grid-column:span 2;grid-row:span 2;padding:44px;background:linear-gradient(160deg,#222624 0%,#0d0f0e 55%,#060707 100%);color:#f5f5f7}
.tile--emr .tile__ic{width:96px;height:96px;border-radius:28px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 18px 34px -20px rgba(0,0,0,.8);color:#f5f5f7}
.tile--emr .tile__ic::before{background:radial-gradient(circle at 30% 20%,rgba(201,245,63,.24),rgba(201,245,63,.05) 70%)}
.tile--emr .kx-ic{width:66px;height:66px}
.tile--emr h3{font-size:clamp(30px,2.2vw + 8px,40px);line-height:1.1;letter-spacing:-.03em;color:#fff}
.tile--emr p{margin-top:10px;max-width:380px;font-size:19px;color:#a1a1a6}
.tile__glow{position:absolute!important;aspect-ratio:1;border-radius:50%;pointer-events:none}
.tile__glow--lime{right:-140px;top:-170px;width:480px;background:radial-gradient(closest-side,rgba(201,245,63,.2),rgba(201,245,63,0));animation:kx-glow 10s ease-in-out infinite}
.tile__glow--blue{left:-180px;bottom:-230px;width:520px;background:radial-gradient(closest-side,rgba(69,184,240,.16),rgba(69,184,240,0));animation:kx-glow 12s ease-in-out -6s infinite}
.tile--emr:hover .tile__glow--lime{animation-duration:4s}
.tile__art{display:block}
.emr-art{display:block;width:100%;height:auto}
.ecg-art{display:block;width:100%;max-width:294px;height:auto}
.ecg-trace{animation:kx-trace 5s ease-in-out 1s infinite}
.emr-grow{transform-box:fill-box;transform-origin:left center;transition:transform 1.8s cubic-bezier(.6,0,.2,1) .4s}
.tile--bill{grid-column:span 2;padding:40px;background:linear-gradient(125deg,#f8fce9 0%,#ebf6c6 100%)}
.tile--bill .tile__ic{background:rgba(255,255,255,.75)}
.tile.tile--bill .tile__ic::before{background:#fff}
.tile--bill .tile__txt{max-width:min(300px,52%)}
.tile--bill h3{font-size:30px;line-height:1.12;letter-spacing:-.025em}
.tile--bill p{color:#3a3a3c}
.tile__orb{position:absolute!important;right:34px;top:14px;width:clamp(170px,17.5vw,252px)}
.tile__orb svg{display:block;width:100%;height:auto;overflow:visible}
.tile--bill:hover .tile__orb{transform:scale(1.04) rotate(-4deg)}
.tile__orb{transition:transform .8s var(--spring)}
.tile__row{display:none}
.bill-row{display:block;width:100%;max-width:294px;height:auto;overflow:visible}

/* ---------- proof ---------- */
.proof{margin-top:88px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
.stat{display:flex;flex-direction:column;align-items:center;padding:0 12px;text-align:center}
.stat--mid{border-left:1px solid var(--line);border-right:1px solid var(--line)}
.stat__n{display:flex;align-items:flex-start;justify-content:center;font-size:clamp(56px,8.33vw,120px);line-height:1;font-weight:600;letter-spacing:-.045em;white-space:nowrap}
.stat__rm{margin:.117em .067em 0 0;font-size:.433em;line-height:1;letter-spacing:-.02em}
.stat__bar{display:none;width:28px;height:4px;margin:14px auto;border-radius:4px;background:var(--lime)}
.stat__bar--blue{background:var(--blue)}
.stat__bar--ink{background:var(--ink)}
.stat__l{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:clamp(17px,.9vw + 8px,21px);line-height:1.4;color:var(--mute)}

/* ---------- made for Malaysian clinics ---------- */
.my{display:flex;flex-direction:column}
.my__head{order:1;text-align:center}
.my__head .h2{margin-top:0}
.my__cards{order:2}
.ticker{order:3}
.mycards{margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mycard{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:flex;flex-direction:column;gap:36px;min-height:400px;padding:40px;border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(29,29,31,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* hover: lift, a thin lime→blue gradient border and a soft glow (both pseudo layers fade in; no layout change) */
.mycard::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;background:linear-gradient(140deg,rgba(201,245,63,.95) 0%,rgba(69,184,240,.8) 55%,rgba(69,184,240,.2) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.mycard::after{content:"";position:absolute;z-index:-1;left:-25%;right:-25%;top:-45%;height:95%;background:radial-gradient(closest-side,rgba(201,245,63,.26),rgba(201,245,63,0));opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.mycard:nth-child(2)::after{background:radial-gradient(closest-side,rgba(69,184,240,.22),rgba(69,184,240,0))}
.mycard:hover{transform:translateY(-6px);box-shadow:0 28px 40px -22px rgba(29,29,31,.28),0 24px 42px -24px rgba(69,184,240,.6)} /* both shadows stay inside the 20px gap */
.mycard:nth-child(2):hover{box-shadow:0 28px 40px -22px rgba(29,29,31,.28),0 24px 42px -24px rgba(160,205,20,.65)}
.mycard:hover::before,.mycard:hover::after{opacity:1}
.mycard__art svg{display:block;width:100%;max-width:306px;height:auto;overflow:visible}
.mycard h3{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.mycard p{margin-top:8px;font-size:17px;line-height:1.45;color:var(--mute)}
.myart text{font-family:var(--sans)}
/* MyInvois: the invoice sends, LHDN receives, a "validated" stamp pops (6 s loop; the still frame = validated) */
.mi-src,.mi-dst,.mi-ring,.mi-stamp{transform-box:fill-box;transform-origin:center}
.mi-lhdn{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;fill:#0a6fa8}
.mi-stamp__t{font-size:14px;font-weight:600;letter-spacing:-.01em;fill:#1d1d1f}
.mi-src{animation:kx-mi-src 6s var(--ease) infinite}
.mi-pkt{opacity:0;animation:kx-mi-pkt 6s cubic-bezier(.55,0,.3,1) infinite}
.mi-ring{opacity:0;animation:kx-mi-ring 6s ease-out infinite}
.mi-dst{animation:kx-mi-dst 6s var(--ease) infinite}
.mi-up{opacity:0;animation:kx-mi-up 6s linear infinite}
.mi-ok{animation:kx-mi-ok 6s linear infinite}
.mi-stamp{transform:rotate(-6deg);animation:kx-mi-stamp 6s var(--ease) infinite}
.mi-tick{stroke-dasharray:1;animation:kx-mi-tick 6s var(--ease) infinite}
@keyframes kx-mi-src{0%,5%,22%,100%{transform:none}12%{transform:translateY(-5px) scale(1.03)}}
@keyframes kx-mi-pkt{0%,12%{opacity:0;transform:translateX(0)}17%{opacity:1;transform:translateX(4px)}40%{opacity:1;transform:translateX(62px)}45%,100%{opacity:0;transform:translateX(70px)}}
@keyframes kx-mi-ring{0%,43%{opacity:0;transform:scale(.9)}48%{opacity:.9;transform:scale(.96)}74%,100%{opacity:0;transform:scale(1.28)}}
@keyframes kx-mi-dst{0%,43%,62%,100%{transform:none}50%{transform:scale(1.06)}}
@keyframes kx-mi-up{0%,50%{opacity:1}54%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes kx-mi-ok{0%,50%{opacity:0}54%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes kx-mi-stamp{0%,50%{opacity:0;transform:rotate(-16deg) scale(1.7)}56%{opacity:1;transform:rotate(-4deg) scale(.93)}61%{opacity:1;transform:rotate(-7deg) scale(1.04)}66%,88%{opacity:1;transform:rotate(-6deg) scale(1)}95%,100%{opacity:0;transform:rotate(-6deg) scale(.96)}}
@keyframes kx-mi-tick{0%,57%{stroke-dashoffset:1}67%,100%{stroke-dashoffset:0}}
/* Panel claims: the claim rides the track Prepared → Submitted and waits there; Paid stays pending, as in the film
   (7 s loop; the still frame = submitted) */
.pc-l{font-size:14px;font-weight:500;fill:var(--ink)}
.pc-f{stroke-dasharray:1}
.pc-n circle{transform-box:fill-box;transform-origin:center;fill:#1d1d1f;stroke:#1d1d1f}
.pc-n2 circle{fill:#c9f53f}
.pc-t{stroke:#c9f53f;stroke-dasharray:1}
.pc-n2 .pc-t{stroke:#1d1d1f}
.pc-n3 circle{fill:#fff;stroke:rgba(29,29,31,.18)}
.pc-l3{fill:#86868b}
.pc-ping{transform-box:fill-box;transform-origin:center;opacity:0;animation:kx-pc-ping 7s ease-out infinite}
.pc-chip{transform:translateX(105px);animation:kx-pc-chip 7s cubic-bezier(.6,0,.3,1) infinite}
.pc-f1{animation:kx-pc-f1 7s cubic-bezier(.6,0,.3,1) infinite}
.pc-n1 circle{animation:kx-pc-c1 7s var(--ease) infinite}
.pc-n2 circle{animation:kx-pc-c2 7s var(--ease) infinite}
.pc-n1 .pc-t{animation:kx-pc-t1 7s var(--ease) infinite}
.pc-n2 .pc-t{animation:kx-pc-t2 7s var(--ease) infinite}
.pc-l1{animation:kx-pc-l1 7s linear infinite}
.pc-l2{animation:kx-pc-l2 7s linear infinite}
@keyframes kx-pc-chip{0%{opacity:0;transform:translateX(0) translateY(6px)}5%,28%{opacity:1;transform:translateX(0) translateY(0)}46%,88%{opacity:1;transform:translateX(105px) translateY(0)}96%,100%{opacity:0;transform:translateX(105px) translateY(0)}}
@keyframes kx-pc-f1{0%,28%{stroke-dashoffset:1;opacity:1}46%,89%{stroke-dashoffset:0;opacity:1}96%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes kx-pc-c1{0%,5%{fill:#fff;stroke:rgba(29,29,31,.18);transform:none}9%{fill:#1d1d1f;stroke:#1d1d1f;transform:scale(1.18)}13%,89%{fill:#1d1d1f;stroke:#1d1d1f;transform:none}96%,100%{fill:#fff;stroke:rgba(29,29,31,.18);transform:none}}
@keyframes kx-pc-c2{0%,43%{fill:#fff;stroke:rgba(29,29,31,.18);transform:none}47%{fill:#c9f53f;stroke:#1d1d1f;transform:scale(1.22)}52%,89%{fill:#c9f53f;stroke:#1d1d1f;transform:none}96%,100%{fill:#fff;stroke:rgba(29,29,31,.18);transform:none}}
@keyframes kx-pc-t1{0%,7%{stroke-dashoffset:1;opacity:1}14%,89%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes kx-pc-t2{0%,45%{stroke-dashoffset:1;opacity:1}53%,89%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes kx-pc-l1{0%,6%{fill:#86868b}10%,89%{fill:#1d1d1f}96%,100%{fill:#86868b}}
@keyframes kx-pc-l2{0%,44%{fill:#86868b}48%,89%{fill:#1d1d1f}96%,100%{fill:#86868b}}
@keyframes kx-pc-ping{0%,46%{opacity:0;transform:none}48%{opacity:.85;transform:none}68%,100%{opacity:0;transform:scale(2.3)}}
/* the art labels stay ≥ 11 px on screen under the .75 desktop zoom */
@media (min-width:1024px){.pc-l{font-size:16px}.mi-lhdn{font-size:15px}.mi-stamp__t{font-size:15px}}
/* One system: the old tools' dashed lines converge into the kliniX mark and leave as one solid line (5 s loop) */
.one-p{stroke-dasharray:.14 1.4;stroke-dashoffset:.14;animation:kx-one-p 5s cubic-bezier(.45,0,.25,1) infinite}
.one-x{stroke-dasharray:.34 1.6;stroke-dashoffset:.34;animation:kx-one-x 5s cubic-bezier(.45,0,.25,1) infinite}
.one-mark,.one-glow,.one-end,.one-ping,.one-g{transform-box:fill-box;transform-origin:center}
.one-mark{animation:kx-one-mark 5s var(--ease) infinite}
.one-glow{opacity:.3;animation:kx-one-glow 5s ease-out infinite}
.one-end{animation:kx-one-end 5s var(--ease) infinite}
.one-ping{opacity:0;animation:kx-one-ping 5s ease-out infinite}
.one-g{animation:kx-one-g 5s var(--ease) infinite}
.one-g2{animation-delay:.06s}.one-g3{animation-delay:.12s}.one-g4{animation-delay:.18s}
@keyframes kx-one-p{0%{stroke-dashoffset:.14}42%,100%{stroke-dashoffset:-1}}
@keyframes kx-one-x{0%,45%{stroke-dashoffset:.34}72%,100%{stroke-dashoffset:-1}}
@keyframes kx-one-mark{0%,39%,58%,100%{transform:none}46%{transform:scale(1.1)}}
@keyframes kx-one-glow{0%,38%{opacity:.3;transform:scale(.9)}47%{opacity:1;transform:scale(1.12)}82%,100%{opacity:.3;transform:scale(.9)}}
@keyframes kx-one-end{0%,68%,86%,100%{transform:none}74%{transform:scale(1.45)}}
@keyframes kx-one-ping{0%,69%{opacity:0;transform:none}72%{opacity:.8;transform:none}92%,100%{opacity:0;transform:scale(2.6)}}
@keyframes kx-one-g{0%,12%,100%{transform:none}5%{transform:translateX(3px)}}
.ticker{margin-top:88px;overflow:hidden;overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
.ticker__track{display:flex;width:max-content;will-change:transform;animation:kx-marquee 48s linear infinite}
html:not(.js) .ticker:hover .ticker__track{animation-play-state:paused} /* with JS the pause eases in and out (app.js §7) */
.ticker__set{display:flex;align-items:center;gap:40px;padding-right:40px;height:48px}
.tk{display:inline-flex;align-items:center;gap:40px;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);white-space:nowrap}
.tk__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px rgba(80,110,0,.4)}
.tk__dot--blue{background:var(--blue);box-shadow:none}

/* ---------- pilot ---------- */
.pilot{padding:calc(var(--secpad) + 20px) 0 calc(var(--secpad) + 10px);text-align:center}
.pilot__in{position:relative;display:flex;flex-direction:column;align-items:center}
.pdeco{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none}
.pdeco--lime{left:calc(50% - 420px);top:90px;width:540px;background:radial-gradient(closest-side,rgba(201,245,63,.34),rgba(201,245,63,0));animation:kx-glow 11s ease-in-out infinite}
.pdeco--blue{left:calc(50% - 100px);top:170px;width:560px;background:radial-gradient(closest-side,rgba(69,184,240,.24),rgba(69,184,240,0));animation:kx-glow 11s ease-in-out -5.5s infinite}
.glass--p1{left:calc(50% - 530px);top:61%;width:96px;animation:kx-float 9s ease-in-out -2s infinite}
.glass--p2{left:calc(50% + 440px);top:18%;width:72px;animation:kx-tilt 10s ease-in-out -6s infinite;transform:rotate(14deg)}
.glass--p3{left:calc(50% + 510px);top:70%;width:24px;animation:kx-float 6s ease-in-out -1s infinite}
.glass--p4{left:calc(50% - 480px);top:27%;width:18px;animation:kx-float 8s ease-in-out -4s infinite}
.pilot__icon{width:96px;height:96px;animation:kx-float 7s ease-in-out infinite}
.pilot__icon .appicon{border-radius:24px;box-shadow:0 24px 48px -16px rgba(11,13,12,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.pilot .badge{margin-top:32px}
.pilot .h2{margin-top:24px}
.pilot .lede{margin:20px auto 0;max-width:620px;color:var(--mute2)}
.pilot__q{margin-top:36px;font-size:17px;line-height:24px;color:var(--mute2)}
.pilot__q a,.signup__msg a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

.signup{position:relative;margin:44px auto 0;width:min(540px,100%);text-align:left}
.signup__label{display:block;margin-bottom:10px;padding-left:24px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.signup__row{display:flex;gap:12px}
.signup input[type="email"]{flex:1;min-width:0;height:56px;padding:0 24px;border-radius:980px;border:1px solid #86868b;background:#fff;font-size:17px;color:var(--ink);transition:border-color .2s,box-shadow .25s}
.signup input[type="email"]::placeholder{color:#6e6e73;opacity:1}
.signup input[type="email"]:hover{border-color:#515154;box-shadow:0 6px 20px -12px rgba(29,29,31,.35)}
.signup input[type="email"]:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-color:var(--link);box-shadow:none}
.signup input[aria-invalid="true"]{border-color:#d70015;box-shadow:0 0 0 4px rgba(215,0,21,.12)}
.signup input[aria-invalid="true"]:focus-visible{border-color:#d70015}
.signup__btn{height:56px;padding:0 34px}
.signup__btn.is-busy .signup__btn-t{opacity:.6}
.signup__btn.is-busy::after{content:"";width:16px;height:16px;margin-left:10px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:kx-spin .8s linear infinite}
.signup__msg{min-height:20px;margin-top:10px;padding-left:24px;font-size:14px;line-height:20px;color:var(--err)}
.signup__msg:empty{margin-top:0;min-height:0}
.signup__status:empty{display:none}
.signup__note{margin-top:16px;text-align:center;font-size:14px;line-height:20px;color:var(--mute2)}
.signup__note+.signup__note{margin-top:6px}
.signup__note a{text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.signup.is-done .signup__label,.signup.is-done .signup__row,.signup.is-done .signup__msg{display:none}
.ok{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:24px;background:#fff;border:1px solid rgba(29,29,31,.08);box-shadow:0 24px 50px -30px rgba(29,29,31,.35);animation:kx-pop .6s var(--spring) both}
.ok__ic{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink)}
.ok__t{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.ok__t:focus{outline:none}
.ok__b{margin-top:4px;font-size:15px;line-height:1.45;color:var(--mute)}
.ok__tag{display:inline-block;margin-top:10px;padding:3px 9px;border-radius:980px;background:#ecf7cb;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* ---------- footer ---------- */
.ftr{padding:40px 0 44px;background:var(--bg2);border-top:1px solid rgba(29,29,31,.08)}
.ftr__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 28px}
.ftr__id{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px}
.brand--ftr .brand__name{font-size:17px}
.ftr__tag{margin-left:10px;font-size:13px;color:var(--mute2)}
.ftr__links{display:flex;align-items:center;flex-wrap:wrap;gap:0 28px}
.ftr__links>a{display:inline-flex;align-items:center;height:44px;font-size:13px;color:var(--ink2);text-decoration:underline;text-decoration-color:rgba(66,66,69,.35);text-underline-offset:3px;transition:text-decoration-color .25s,color .25s}
.ftr__links>a:hover{color:var(--ink);text-decoration-color:currentColor}
.ftr__links>a:focus-visible{color:var(--ink);text-decoration-color:currentColor}
.lang--text{height:auto;padding:0;background:none;font-size:13px}
.lang--text a{margin:0;min-width:44px}
.lang--text a span{height:auto;padding:0;background:none!important;box-shadow:none!important;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink2)}
.lang--text a[aria-current="page"] span{font-weight:600;color:var(--ink)}
.lang--text a:not([aria-current]):hover span{text-decoration:underline;text-underline-offset:3px;transform:none}
.lang--text .lang__sep{display:inline;color:#b0b0b5}
.ftr__rule{height:1px;margin:22px 0 20px;background:#d2d2d7}
.ftr__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;font-size:12px;line-height:16px;color:var(--mute2)}

/* ---------- reveal (only when app.js has set html.js; content is visible without JS) ---------- */
.js .rv{opacity:0;translate:0 32px;transition:opacity .9s var(--ease) var(--rd,0s),translate .9s var(--ease) var(--rd,0s)}
.js .rv--rise{translate:0 64px;transition-duration:1.1s}
.js .rv.in{opacity:1;translate:none}
.js .tile.rv,.js .mycard.rv{transition:opacity .9s var(--ease) var(--rd,0s),translate .9s var(--ease) var(--rd,0s),transform .5s var(--ease),box-shadow .5s var(--ease)}
[data-d="1"]{--rd:.08s}[data-d="2"]{--rd:.16s}[data-d="3"]{--rd:.24s}[data-d="4"]{--rd:.32s}[data-d="5"]{--rd:.4s}
.js .flow:not(.in) .flow__fill{transform:scaleX(0)}
.js .tile--emr:not(.in) .emr-grow{transform:scaleX(0)}
.js .flow:not(.in) .flow__runner,.js .flow:not(.in) .flow__ping,.js .flow:not(.in) .flow__disc{animation-play-state:paused}
.js .flow:not(.in) .flow__runner{visibility:hidden}
.js .is-off,.js .is-off *,.js .is-off *::before,.js .is-off *::after{animation-play-state:paused!important}

/* ---------- decorative SVG motion ---------- */
.dash{animation:kx-dash 6s linear infinite}
.fl{animation:kx-float-s 7s ease-in-out infinite}
.fl-5{animation-duration:5s}.fl-6{animation-duration:6s;animation-delay:-2s}.fl-7{animation-duration:5.5s;animation-delay:-3.5s}
.sping{transform-box:fill-box;transform-origin:center;opacity:0;animation:kx-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.sping--slow{animation-duration:2.8s}
.spin-40{transform-box:fill-box;transform-origin:center;animation:kx-spin 40s linear infinite}

/* ---------- keyframes ---------- */
@keyframes kx-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes kx-fade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes kx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes kx-float-s{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes kx-tilt{0%,100%{transform:rotate(14deg) translateY(0)}50%{transform:rotate(22deg) translateY(-16px)}}
@keyframes kx-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.55}}
@keyframes kx-glow{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes kx-ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(2.6);opacity:0}}
@keyframes kx-node-ping{0%{transform:scale(1);opacity:.9}30%,100%{transform:scale(1.9);opacity:0}}
@keyframes kx-ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes kx-lit{0%{background-color:#c9f53f;border-color:rgba(29,29,31,.3)}24%,100%{background-color:#fff;border-color:rgba(29,29,31,.12)}}
@keyframes kx-lit-dark{0%{background-color:#c9f53f;color:#1d1d1f}24%,100%{background-color:#1d1d1f;color:#fff}}
@keyframes kx-trace{0%{stroke-dashoffset:1;opacity:1}65%{stroke-dashoffset:0;opacity:1}90%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes kx-travel-x{0%{transform:translateX(0);opacity:0}5%{opacity:1}83.333%{transform:translateX(100%);opacity:1}90%,100%{transform:translateX(100%);opacity:0}}
@keyframes kx-travel-y{0%{transform:translateY(0);opacity:0}5%{opacity:1}83.333%{transform:translateY(100%);opacity:1}90%,100%{transform:translateY(100%);opacity:0}}
@keyframes kx-dash{to{stroke-dashoffset:-100}}
@keyframes kx-spin{to{transform:rotate(360deg)}}
@keyframes kx-spin-rev{to{transform:rotate(-360deg)}}
@keyframes kx-depth{0%{scale:.95}25%{scale:1.05}50%{scale:.95}75%{scale:.86}100%{scale:.95}}
@keyframes kx-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes kx-shimmer{0%{transform:translateX(-110%)}45%,100%{transform:translateX(110%)}}
@keyframes kx-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes kx-sweep{from{transform:translateX(0)}to{transform:translateX(5600px)}}

/* ===================================================================== tablet + desktop tweaks */
@media (max-width:1199px){
  .tile{padding:28px}
  .tile__live{right:30px;top:67px}
  .tile--emr{padding:36px}
  .tile--bill{padding:32px}
  .tile h3{font-size:22px}
  .tile p{font-size:16px}
  .mycard{padding:32px;min-height:0}
  .mycard h3{font-size:24px}
}
@media (max-width:1099px){
  .glass--p1,.glass--p2,.glass--p3,.glass--p4{display:none}
}
@media (max-width:1023px){
  .chip{height:38px;gap:8px;padding:0 14px 0 6px}
  .chip__ic{width:26px;height:26px}
  .chip__ic svg{width:14px;height:14px}
  .chip__t{font-size:13px}
  .chip__n{display:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:16px}
  .tile{min-height:240px}
  .tile--emr{grid-row:auto}
  .tile--emr .tile__art{margin:8px 0}
  /* Made for Malaysian clinics: one card per row, the story art beside the words */
  .mycards{grid-template-columns:minmax(0,1fr);gap:16px;margin:56px auto 0;max-width:760px}
  .mycard{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:40px;padding:28px 36px 28px 28px;min-height:0}
  .mycard h3{font-size:26px}
}
/* flow turns vertical below 900 (6 columns get too narrow) */
@media (max-width:899px){
  .flow{width:min(100%,420px);margin:48px auto 0}
  .flow__track{left:18.5px;right:auto;top:20px;width:3px;height:460px}
  .flow__line{background:rgba(29,29,31,.08)}
  .flow__fill{transform-origin:center top}
  .js .flow:not(.in) .flow__fill{transform:scaleY(0)}
  .flow__runner{animation-name:kx-travel-y}
  .flow__dot{left:-4.5px;top:-6px;width:12px;height:12px;box-shadow:0 0 0 1.5px var(--ink),0 0 0 4px rgba(201,245,63,.35),0 0 16px 4px rgba(201,245,63,.6)}
  .flow__list{display:block}
  .flow__step{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;align-items:start;align-content:start;height:92px;text-align:left}
  .flow__step:last-child{height:auto}
  .flow__node{grid-column:1;grid-row:1/span 2;margin:0;width:40px;height:40px}
  .flow__node::after{inset:-5px}
  .flow__disc{box-shadow:0 6px 16px -8px rgba(29,29,31,.35)}
  .flow__disc svg{width:19px;height:19px}
  .flow__head{grid-column:2;display:flex;align-items:baseline;gap:10px;padding-top:6px}
  .flow__t{order:0;margin:0;font-size:21px}
  .flow__num{order:1;height:auto;font-size:11px;line-height:1;font-weight:600;letter-spacing:.1em}
  .flow__d{grid-column:2;margin-top:4px;max-width:none;font-size:16px;line-height:1.35}
  .flow__step:last-child .flow__disc{background:#1d1d1f;border-color:#1d1d1f;color:#fff;box-shadow:0 0 0 4px rgba(69,184,240,.18),0 6px 16px -8px rgba(29,29,31,.5);animation-name:kx-lit-dark}
}

/* ===================================================================== phone (Mobile.dc.html) */
@media (max-width:767px){
  .br-sm{display:inline}
  .br-lg{display:none}
  .sm-only{display:inline}
  .hero{padding:48px 0 64px}
  .badge{height:32px;gap:10px;padding:0 14px 0 12px;font-size:13px;box-shadow:0 6px 16px -10px rgba(29,29,31,.35)}
  .live{width:8px;height:8px}
  .hero__title{margin-top:24px;font-size:clamp(40px,12.3vw,48px);line-height:1.04}
  .hero__sub{margin-top:14px;font-size:21px;line-height:1.3;font-weight:400;letter-spacing:-.01em}
  .hero__ctas{margin-top:28px;gap:12px 22px}
  .hero__ctas .btn{height:48px;padding:0 22px;font-size:16px}
  .tlink{font-size:16px}
  .hero__art{width:min(342px,100% - 2*var(--gut));aspect-ratio:342/348;
    --k:1;--rr:.3743;--lift:0px;--r:calc(min(342px,100vw - 2*var(--gut))*.3743);--start:270deg;--dur:90s;--mark:calc(min(342px,100vw - 2*var(--gut))*.386);
    animation:kx-up 1.1s var(--ease) .55s both}
  .rings--ellipse,.glass--bubble,.glass--tile,.glass--lime,.glass--blue,.hshadow{display:none}
  .rings--circle,.hsat{display:block}
  .hglow--lime{left:10.53%;top:16.67%;width:55.56%;background:radial-gradient(closest-side,rgba(201,245,63,.6),rgba(201,245,63,0))}
  .hglow--blue{left:37.43%;top:32.18%;width:52.63%;background:radial-gradient(closest-side,rgba(69,184,240,.45),rgba(69,184,240,0))}
  .hmark .appicon{border-radius:25.8%;box-shadow:0 30px 60px -18px rgba(29,29,31,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
  .hmark .appicon svg{width:63.6%;height:63.6%}
  .chip{height:30px;gap:5px;padding:0 9px 0 4px;box-shadow:0 10px 24px -12px rgba(29,29,31,.4);background:rgba(255,255,255,.94);
    scale:none;animation:kx-float-s 6s ease-in-out infinite;animation-delay:calc(var(--i)*-1s)}
  .chip__ic{width:22px;height:22px}
  .chip__ic svg{width:12px;height:12px}
  .chip__t{font-size:12px}

  .eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em}
  .h2{margin-top:12px;font-size:min(40px,10.1vw)}
  .lede{margin-top:14px;font-size:19px;line-height:1.35}

  .film{padding:96px 0 88px}
  .film .h2{font-size:36px;line-height:1.08}
  .film__stage{margin-top:40px}
  .film__sub{margin-top:12px;font-size:17px;line-height:1.4}
  .film__cap{margin-top:24px;line-height:16px;font-weight:600;letter-spacing:.12em}
  .film__play{height:48px;margin-top:26px;padding:0 20px 0 6px;font-size:16px;gap:10px}

  .bento{margin-top:40px;gap:12px}
  .tile{min-height:0;gap:0;padding:20px;border-radius:24px;justify-content:flex-start}
  .tile__ic{width:52px;height:52px;border-radius:16px}
  .kx-ic{width:36px;height:36px}
  .tile__txt{margin-top:16px}
  .tile h3{font-size:18px;line-height:1.2}
  .tile p{margin-top:6px;font-size:14px;line-height:1.4}
  .tile__live{right:20px;top:20px;width:8px;height:8px}
  .tile:hover{transform:translateY(-4px)}
  .tile:nth-child(even):hover{transform:translateY(-4px)}
  .tile--emr,.tile--bill{padding:24px;border-radius:28px}
  .tile--emr .tile__ic{width:52px;height:52px;border-radius:16px}
  .tile--emr .kx-ic{width:38px;height:38px}
  .tile--emr .tile__art{order:3;margin:20px 0 0}
  .tile--emr h3,.tile--bill h3{font-size:24px;line-height:1.2;letter-spacing:-.025em}
  .tile--emr p,.tile--bill p{margin-top:6px;font-size:16px;line-height:1.4}
  .tile__glow--lime{right:-60px;top:-70px;width:220px}
  .tile__glow--blue{display:none}
  .tile--bill{background:#ecf7cb}
  .tile--bill .tile__ic{background:#fff}
  .tile--bill .tile__txt{max-width:none}
  .tile--bill p{color:#515154}
  .tile__orb{display:none}
  .tile__row{display:block;margin-top:16px}

  .proof{margin-top:56px;grid-template-columns:minmax(0,1fr)}
  .h2--proof{font-size:30px;line-height:1.15;letter-spacing:-.03em}
  .stat{padding:32px 0;border-top:1px solid rgba(29,29,31,.1)}
  .stat:first-child{padding-top:0;border-top:0}
  .stat:last-child{padding-bottom:0}
  .stat--mid{border-left:0;border-right:0}
  .stat__n{display:block;font-size:84px;letter-spacing:-.05em}
  .stat__rm{margin:0 4px 0 0;font-size:40px;letter-spacing:-.03em}
  .stat__bar{display:block}
  .stat__l{margin-top:0;font-size:17px}
  .stat__l .live{display:none}

  /* Made for Malaysian clinics on a phone: ticker first, then the cards (art on top, words below) */
  .ticker{order:2;margin-top:36px}
  .my__cards{order:3}
  .mycards{gap:12px;margin-top:28px;max-width:460px}
  .mycard{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px 20px 24px;border-radius:24px}
  .mycard__art{margin:-14px 0 -8px}
  .mycard__art svg{max-width:none}
  .mycard h3{font-size:21px;line-height:1.2}
  .mycard p{margin-top:4px;font-size:16px;line-height:1.4}
  .mycard:hover{transform:translateY(-4px)}
  .ticker__track{animation-duration:30s}
  .ticker__set{gap:10px;padding-right:10px;height:auto}
  .tk{gap:8px;height:38px;padding:0 16px;border-radius:980px;background:#fff;border:1px solid rgba(29,29,31,.08);font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
  .tk__dot{width:6px;height:6px;box-shadow:0 0 0 1px rgba(29,29,31,.18)}
  .tk__dot--blue{box-shadow:none}

  .pilot{padding:96px 0 104px}
  .pilot__icon{display:none}
  .pilot .badge{margin-top:0;height:30px;gap:8px;padding:0 14px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  .pilot .h2{margin-top:20px}
  .pilot .lede{margin-top:14px;max-width:340px;font-size:17px;line-height:1.45}
  .pdeco--lime{left:-40px;top:auto;bottom:220px;width:240px;background:radial-gradient(closest-side,rgba(201,245,63,.4),rgba(201,245,63,0))}
  .pdeco--blue{left:auto;right:-60px;top:auto;bottom:120px;width:240px;background:radial-gradient(closest-side,rgba(69,184,240,.32),rgba(69,184,240,0))}
  .glass--p1,.glass--p2,.glass--p3,.glass--p4{display:none}
  .pilot__q{margin-top:28px;font-size:15px}

  .ftr{padding:40px 0 48px}
  .ftr__top{display:block}
  .ftr__id{display:block}
  .ftr__tag{display:block;margin:4px 0 0;font-size:14px;line-height:20px;color:var(--mute)}
  .ftr__links{margin-top:20px;padding-top:4px;border-top:1px solid rgba(29,29,31,.1);gap:0 20px}
  .ftr__rule{display:none}
  .ftr__bottom{display:block;margin-top:12px;padding-top:16px;border-top:1px solid rgba(29,29,31,.1);font-size:12px;line-height:18px;color:var(--mute)}
  .ftr__bottom span{display:block}
  .ftr__bottom span+span{margin-top:2px}
}
/* the film is 9:16 on a portrait phone (app.js picks the 9:16 file with the same query) */
@media (max-width:767px) and (orientation:portrait){
  .film__stage{width:min(318px,100%)}
  .film__frame{aspect-ratio:9/16;border-radius:30px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 100px -30px rgba(69,184,240,.35),0 30px 80px -40px rgba(201,245,63,.3)}
  .film__glow--lime{left:-40px;top:60px;width:220px}
  .film__glow--blue{right:-50px;bottom:40px;width:240px}
  html:not(.js) .film__stage{width:100%}
  html:not(.js) .film__frame{aspect-ratio:16/9;border-radius:28px}
}
/* container-query units where supported (Safari 16+, Chromium, Firefox); the vw values above are the fallback */
@supports (width:1cqw){
  .hero__art{--r:27.78cqw;--mark:16.111cqw;--lift:3.06cqw}
  .hsat::before{top:calc(-26.3cqw - 4px)}
  @media (max-width:767px){.hero__art{--r:37.43cqw;--mark:38.6cqw;--lift:0px}}
}
/* the signup form becomes a card with stacked field + full-width button */
@media (max-width:599px){
  .signup{margin-top:36px;padding:24px;border-radius:28px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(29,29,31,.08);box-shadow:0 30px 60px -30px rgba(29,29,31,.3)}
  .signup__label{padding-left:0;margin-bottom:8px}
  .signup__row{flex-direction:column;gap:12px}
  .signup input[type="email"]{width:100%;flex:none;height:52px;padding:0 16px;border-radius:14px}
  .signup__btn{width:100%;height:52px}
  .signup__msg{padding-left:0}
  .signup__note{margin-top:14px}
  .signup__note--sm{font-size:12px;line-height:18px}
  .ok{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
}

/* ---------- flow, driven by app.js §6 (.flow.is-js): the dot runs station to station with a comet trail, the line fills
   behind it, and each station "lands" (spring pop, lime→blue tint, ripple, a small icon gesture, number + caption brighten).
   Without JS the CSS loop above runs instead. */
.flow.is-js .flow__runner{animation:none;opacity:0;transition:opacity .35s var(--ease);will-change:transform}
.flow.is-js.is-moving .flow__runner{opacity:1}
.flow.is-js .flow__fill{top:-.5px;bottom:-.5px;background:linear-gradient(90deg,#45b8f0 0%,#a6dc34 58%,#c9f53f 100%);box-shadow:0 0 12px rgba(201,245,63,.6);transform:scaleX(0);transition:opacity .6s var(--ease);will-change:transform}
.flow.is-js.is-reset .flow__fill{opacity:0}
.flow.is-js .flow__trail{display:block;position:absolute;right:100%;top:50%;width:170px;height:12px;margin-top:-6px;background:linear-gradient(90deg,rgba(69,184,240,0) 0%,rgba(201,245,63,.55) 45%,rgba(214,255,96,1) 88%,#fff 100%);-webkit-clip-path:polygon(0 44%,100% 0,100% 100%,0 56%);clip-path:polygon(0 44%,100% 0,100% 100%,0 56%);transform-origin:100% 50%;transform:scaleX(0)} /* a comet: wide and bright at the dot, thin and gone at the tail */
.flow.is-js .flow__glint{display:block;position:absolute;left:0;right:0;top:-6px;bottom:-6px;overflow:hidden;overflow:clip;pointer-events:none}
.flow.is-js .flow__glint::before{content:"";position:absolute;top:0;bottom:0;left:0;width:16%;background:radial-gradient(closest-side,#fff 0%,rgba(226,255,138,.95) 30%,rgba(201,245,63,0) 100%);opacity:0;transform:translateX(-100%)}
.flow.is-js.is-done .flow__glint::before{animation:kx-glint 1.05s cubic-bezier(.45,0,.2,1) both}
.flow.is-js .flow__ping{animation:none}
.flow.is-js .flow__step .flow__disc{animation:none;color:#86868b;transition:transform .45s var(--spring),box-shadow .5s var(--ease),border-color .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease)}
.flow.is-js .flow__disc::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:linear-gradient(150deg,#f3fccf 0%,#fbfdf2 48%,#e4f4fd 100%);opacity:0;transition:opacity .5s var(--ease)}
.flow.is-js .flow__disc svg{position:relative}
.flow.is-js .flow__step:hover .flow__disc{transform:none}
.flow.is-js .flow__step:hover .flow__disc svg{transform:none}
.flow.is-js .flow__step:hover .flow__node::after{animation:none}
.flow.is-js .flow__step.is-on .flow__disc,.flow.is-js .flow__step.is-hover .flow__disc{color:var(--ink);border-color:rgba(150,196,30,.55);box-shadow:0 0 0 6px rgba(201,245,63,.2),0 16px 32px -16px rgba(86,120,8,.45)}
.flow.is-js .flow__step.is-on .flow__disc::before,.flow.is-js .flow__step.is-hover .flow__disc::before{opacity:1}
.flow.is-js .flow__step:last-child .flow__disc{background-color:#fff;border-color:rgba(29,29,31,.12)}
.flow.is-js .flow__step:last-child.is-on .flow__disc{background-color:var(--ink);border-color:var(--ink);color:var(--lime);box-shadow:0 0 0 6px rgba(69,184,240,.18),0 0 34px 2px rgba(201,245,63,.5),0 16px 32px -16px rgba(29,29,31,.55)}
.flow.is-js .flow__step:last-child.is-on .flow__disc::before{opacity:0}
.flow.is-js .flow__num,.flow.is-js .flow__d{transition:color .5s var(--ease),background-color .5s var(--ease)}
.flow.is-js .flow__num{padding:0 6px;border-radius:6px;background-color:rgba(201,245,63,0)}
.flow.is-js .is-on .flow__num,.flow.is-js .is-hover .flow__num{color:var(--ink);background-color:var(--lime)}
.flow.is-js .is-on .flow__d,.flow.is-js .is-hover .flow__d{color:var(--ink2)}
.flow.is-js .flow__step:not(.is-on):not(.is-hover) .ic-check,.flow.is-js .flow__step:not(.is-on):not(.is-hover) .ic-lines{stroke-dashoffset:1}
/* landing */
.flow.is-js .flow__step.is-land .flow__disc{animation:kx-land .74s linear}
.flow.is-js .flow__step.is-land .flow__node::after{border-color:rgba(69,184,240,.75);animation:kx-land-ring 1.1s cubic-bezier(.2,.6,.3,1) .1s both}
.flow.is-js .is-land .ic-plus{animation:kx-ic-plus .75s var(--ease) .1s both}
.flow.is-js .is-land .ic-hand{animation:kx-ic-hand .88s steps(4,end) .08s both}
.flow.is-js .is-land .ic-tk{animation:kx-ic-tk .7s var(--ease) .08s both}
.flow.is-js .is-land .ic-steth{animation:kx-ic-swing 1s ease-in-out .06s both}
.flow.is-js .is-land .ic-pill{animation:kx-ic-pill .85s cubic-bezier(.3,1.4,.5,1) .06s both}
.flow.is-js .is-land .ic-check{animation:kx-draw .5s var(--ease) .14s both}
.flow.is-js .is-land .ic-rcpt{animation:kx-ic-rcpt .7s var(--ease) .04s both}
.flow.is-js .is-land .ic-lines{animation:kx-draw .65s var(--ease) .18s both}
/* after the last station: a glint runs back along the line while the stations nod in a wave */
.flow.is-js.is-done .flow__step .flow__disc{animation:kx-nod .6s var(--ease) both}
.flow.is-js.is-done .flow__step:nth-child(2) .flow__disc{animation-delay:.08s}
.flow.is-js.is-done .flow__step:nth-child(3) .flow__disc{animation-delay:.16s}
.flow.is-js.is-done .flow__step:nth-child(4) .flow__disc{animation-delay:.24s}
.flow.is-js.is-done .flow__step:nth-child(5) .flow__disc{animation-delay:.32s}
.flow.is-js.is-done .flow__step:nth-child(6) .flow__disc{animation-delay:.4s}
.flow.is-js.is-done .flow__step.is-hover.is-land .flow__disc{animation:kx-land .74s linear}
/* reduced motion: every station shown reached, lighter, nothing moves */
.flow.is-still .flow__runner{display:none}
.flow.is-still .flow__step.is-on .flow__disc{box-shadow:0 12px 30px -14px rgba(29,29,31,.3)}
.flow.is-still .flow__step:last-child.is-on .flow__disc{box-shadow:0 0 0 5px rgba(69,184,240,.16),0 12px 30px -14px rgba(29,29,31,.45)}
@keyframes kx-land{0%{transform:scale(1)}16%{transform:scale(.9)}46%{transform:scale(1.14)}70%{transform:scale(.97)}86%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes kx-land-ring{0%{transform:scale(.94);opacity:.95}100%{transform:scale(1.55);opacity:0}}
@keyframes kx-ic-plus{0%{transform:rotate(0) scale(1)}45%{transform:rotate(120deg) scale(1.4)}100%{transform:rotate(180deg) scale(1)}}
@keyframes kx-ic-hand{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes kx-ic-tk{0%,100%{transform:none}35%{transform:translateY(-2px) rotate(-12deg)}70%{transform:rotate(5deg)}}
@keyframes kx-ic-swing{0%,100%{transform:rotate(0)}22%{transform:rotate(-16deg)}50%{transform:rotate(11deg)}75%{transform:rotate(-5deg)}90%{transform:rotate(2deg)}}
@keyframes kx-ic-pill{from{transform:rotate(0)}to{transform:rotate(180deg)}}
@keyframes kx-ic-rcpt{0%{transform:translateY(-4px);opacity:.3}60%{transform:translateY(1px);opacity:1}100%{transform:none;opacity:1}}
@keyframes kx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kx-nod{0%,100%{transform:scale(1)}40%{transform:scale(1.08)}}
@keyframes kx-glint{0%{opacity:1;transform:translateX(-100%)}85%{opacity:1}100%{opacity:0;transform:translateX(625%)}}
@keyframes kx-glint-y{0%{opacity:1;transform:translateY(-100%)}85%{opacity:1}100%{opacity:0;transform:translateY(625%)}}
@media (max-width:899px){
  .flow__foot{justify-content:flex-start;margin-top:36px}
  .flow.is-js .flow__fill{top:0;bottom:0;left:-.5px;right:-.5px;background:linear-gradient(180deg,#45b8f0 0%,#a6dc34 58%,#c9f53f 100%);transform:scaleY(0)}
  .flow.is-js .flow__trail{right:auto;left:50%;top:auto;bottom:100%;width:10px;height:90px;margin:0 0 0 -5px;background:linear-gradient(180deg,rgba(69,184,240,0) 0%,rgba(201,245,63,.55) 45%,rgba(214,255,96,1) 88%,#fff 100%);-webkit-clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 100%;transform:scaleY(0)}
  .flow.is-js .flow__step:last-child .flow__disc{box-shadow:0 6px 16px -8px rgba(29,29,31,.35)}
  .flow.is-js .flow__glint{left:-5px;right:-5px;top:0;bottom:0}
  .flow.is-js .flow__glint::before{top:0;left:0;right:0;bottom:auto;width:auto;height:16%;transform:translateY(-100%)}
  .flow.is-js.is-done .flow__glint::before{animation-name:kx-glint-y}
  .flow.is-js .flow__step.is-on .flow__disc,.flow.is-js .flow__step.is-hover .flow__disc{box-shadow:0 0 0 4px rgba(201,245,63,.22),0 8px 18px -8px rgba(86,120,8,.45)}
  .flow.is-js .flow__step:last-child.is-on .flow__disc{box-shadow:0 0 0 4px rgba(69,184,240,.18),0 0 22px 2px rgba(201,245,63,.5),0 8px 18px -8px rgba(29,29,31,.5)}
  .flow.is-js .flow__num{padding:3px 5px;border-radius:5px}
}

/* ---------- touch devices: no sticky hover lifts ---------- */
@media (hover:none){
  .tile:hover,.tile:nth-child(even):hover,.mycard:hover{transform:none}
  .mycard:hover::before,.mycard:hover::after{opacity:0}
}

/* ---------- reduced motion: everything still, all content visible ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;translate:none}
  .js .flow:not(.in) .flow__fill,.js .tile--emr:not(.in) .emr-grow{transform:none}
  .js .flow:not(.in) .flow__runner{visibility:visible}
  .flow__runner{opacity:0}
  .tile:hover,.tile:nth-child(even):hover,.mycard:hover,.btn:hover,.film__frame:hover,.film__frame:focus-within,.flow__step:hover .flow__disc,.flow__step:hover .flow__disc svg,.tile:hover .tile__ic,.brand:hover svg,.pill-link:hover span,.tlink:hover .tlink__arr,.tile--bill:hover .tile__orb{transform:none}
  .btn--dark:focus-visible,.brand:focus-visible svg,.pill-link:focus-visible span,.tlink:focus-visible .tlink__arr,.lang a:not([aria-current]):focus-visible span{transform:none}
  .film__play:hover,.film__play:active,.film__play:hover .film__play-ic{transform:none}
  .film__play:focus-visible{transform:none}
  .snd:hover,.snd:active,.mycard:hover{transform:none}
  .js .flow.is-still .flow__fill{transform:none}
  .hglow,.glass,.hmark,.hmark .appicon{translate:none;rotate:none}
}

@media print{
  .js .rv{opacity:1;translate:none}
  .hdr{position:static}
  .hero__art,.film__stage,.ticker,.pdeco,.glass{display:none}
}

/* 24 Sep: jeda cahaya latar filem semasa video dimainkan (kurangkan kerja GPU, main lebih lancar) */
.film__stage.is-playing .film__glow{animation-play-state:paused}

/* 24 Sep — skala keseluruhan lebih kecil (Faiz: "resolution besar, turun 3 notch").
   Sama kesan dengan zoom pelayar 75% (desktop) / 85% (tablet). Telefon tidak disentuh. */
@media (min-width:1024px){body{zoom:.75}.hdr{zoom:1.2}}
@media (min-width:768px) and (max-width:1023.98px){body{zoom:.85}}

/* 25 Sep — pautan media sosial di footer (@klinix.os) */
.soc{display:flex;align-items:center;gap:6px}
.soc__a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#424245;transition:color .25s var(--ease),background-color .25s var(--ease),transform .35s var(--ease)}
.soc__a svg{width:18px;height:18px}
.soc__a:hover{color:#1d1d1f;background:rgba(29,29,31,.06);transform:translateY(-2px)}
.soc__a:focus-visible{outline:2px solid #0071e3;outline-offset:2px;color:#1d1d1f}
@media (max-width:767px){.soc{margin-left:-10px}}
@media (prefers-reduced-motion:reduce){.soc__a,.soc__a:hover{transition:none;transform:none}}

/* 25 Sep (c) — Modul: the whole grid ~80% (Faiz: "still too big, 2–3 notch down"). Only the grid is scaled; the section
   heading stays like every other section's. In the grid's own (zoomed) pixels 1200 = 960 on the page, and 90 = the 72
   the other sections leave under their heading. Phones are left at their size. */
@media (min-width:768px){
  .bento{zoom:.8;max-width:1200px;margin:90px auto 0}
  .tile p{font-size:18px} /* the descriptions keep ~85% (at 80% they would be 10 px on screen) */
  .tile--emr h3{font-size:34px}
  .tile--emr p{font-size:20px}
  .tile--bill h3{font-size:28px}
}
/* tablets: the grid fills a narrower column, so it takes 80% of the column like on a desktop (960 of 1200) */
@media (min-width:768px) and (max-width:1023.98px){.bento{max-width:80%}}
/* the page's .75 zoom makes 1024–1199 lay the grid out exactly as ≥ 1200 does, so it gets the same sizes */
@media (min-width:1024px){
  .tile{padding:32px}
  .tile--emr{padding:44px}
  .tile--bill{padding:40px}
  .tile h3{font-size:24px}
  .tile--emr h3{font-size:40px}
  .tile--bill h3{font-size:30px}
  .tile__live{right:34px;top:71px}
}
.tile{-webkit-tap-highlight-color:transparent}

/* each module icon's own small gesture, on hover (or on a tap: .is-play from app.js §9) */
.kx-ic .i-ecg,.kx-ic .i-chk{stroke-dasharray:1}
.kx-ic .i-ecg-dot,.kx-ic .i-num,.kx-ic .i-rx,.kx-ic .i-cap,.kx-ic .i-sh,.kx-ic .i-day,.kx-ic .i-ps,.kx-ic .i-heart,.kx-ic .i-star{transform-box:fill-box;transform-origin:center}
.kx-ic .i-steth{transform-box:view-box;transform-origin:15px 6px}
.kx-ic .i-tk,.kx-ic .i-rcpt{transform-box:view-box;transform-origin:24px 30px}
.kx-ic .i-scan{opacity:0}
.tile:hover .i-ecg,.tile.is-play .i-ecg{animation:kx-draw .9s cubic-bezier(.5,0,.2,1) both}
.tile:hover .i-ecg-dot,.tile.is-play .i-ecg-dot{animation:kx-ic-pulse .7s var(--ease) .7s both}
.tile:hover .i-tk,.tile.is-play .i-tk{animation:kx-ic-tilt .8s var(--spring) both}
.tile:hover .i-num,.tile.is-play .i-num{animation:kx-ic-flip .55s var(--ease) .08s both}
.tile:hover .i-steth,.tile.is-play .i-steth{animation:kx-ic-swing 1.1s ease-in-out both}
.tile:hover .i-rx,.tile.is-play .i-rx{animation:kx-ic-pop .7s var(--spring) .12s both}
.tile:hover .i-cap,.tile.is-play .i-cap{animation:kx-ic-hop .85s var(--spring) both}
.tile:hover .i-sh,.tile.is-play .i-sh{animation:kx-ic-pop .7s var(--spring) both}
.tile:hover .i-chk,.tile.is-play .i-chk{animation:kx-draw .45s var(--ease) .22s both}
.tile:hover .i-rcpt,.tile.is-play .i-rcpt{animation:kx-ic-print .8s var(--spring) both}
.tile:hover .i-scan,.tile.is-play .i-scan{animation:kx-ic-scan .9s ease-in-out .15s both}
.tile:hover .i-day,.tile.is-play .i-day{animation:kx-ic-day .95s var(--ease) both}
.tile:hover .i-ps,.tile.is-play .i-ps{animation:kx-ic-bob .8s var(--spring) .1s both}
.tile:hover .i-heart,.tile.is-play .i-heart{animation:kx-ic-beat 1s ease-in-out both}
.tile:hover .i-star,.tile.is-play .i-star{animation:kx-ic-spin .9s var(--spring) .08s both}
@keyframes kx-ic-pulse{0%,100%{transform:none}40%{transform:scale(1.6)}}
@keyframes kx-ic-tilt{0%,100%{transform:none}40%{transform:translateY(-1.5px) rotate(-7deg)}}
@keyframes kx-ic-flip{0%,100%{transform:none}45%{transform:scaleY(.08)}}
@keyframes kx-ic-swing{0%,100%{transform:none}28%{transform:rotate(9deg)}58%{transform:rotate(-5deg)}82%{transform:rotate(2deg)}}
@keyframes kx-ic-pop{0%,100%{transform:none}40%{transform:scale(1.18)}}
@keyframes kx-ic-hop{0%,100%{transform:none}42%{transform:translate(1.5px,-5px) rotate(-14deg)}}
@keyframes kx-ic-print{0%,100%{transform:none}35%{transform:translateY(-3px)}}
@keyframes kx-ic-scan{0%{opacity:0;transform:translateY(-5.5px)}20%,75%{opacity:1}100%{opacity:0;transform:translateY(6px)}}
@keyframes kx-ic-day{0%,22%{transform:translateX(-13.5px)}44%,62%{transform:translateX(-6.75px)}84%,100%{transform:none}}
@keyframes kx-ic-bob{0%,100%{transform:none}40%{transform:translateY(-2.5px)}}
@keyframes kx-ic-beat{0%,70%,100%{transform:none}18%{transform:scale(1.12)}34%{transform:scale(.97)}50%{transform:scale(1.07)}}
@keyframes kx-ic-spin{0%{transform:none}60%{transform:rotate(160deg) scale(1.25)}100%{transform:rotate(144deg)}}

/* 25 Sep (c) — footer hover in brand lime (Faiz: "hovering lime pls"). Lime text on this light footer would fail
   contrast, so the words stay dark and the lime is a highlighter that sweeps in under them; the social icons get a lime
   disc with the dark glyph on it. Hit areas stay 44 px. */
.ftr__links>a{position:relative;z-index:0}
.ftr__links>a::after,.lang--text a span::after{content:"";position:absolute;z-index:-1;left:-3px;right:-3px;border-radius:3px;background:var(--lime);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.ftr__links>a::after{top:50%;height:9px}
.ftr__links>a:hover{color:var(--ink);text-decoration-color:transparent}
.ftr__links>a:focus-visible{color:var(--ink);text-decoration-color:transparent}
.ftr__links>a:hover::after{transform:none}
.ftr__links>a:focus-visible::after{transform:none}
.lang--text a span{position:relative;z-index:0}
.lang--text a span::after{top:50%;height:9px}
.lang--text a:not([aria-current]):hover span{text-decoration:none;color:var(--ink)}
.lang--text a:not([aria-current]):hover span::after{transform:none}
.lang--text a:focus-visible span::after{transform:none}
.soc__a{transition:color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease),transform .35s var(--ease)}
.soc__a:hover{color:#1d1d1f;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(29,29,31,.08),0 10px 20px -10px rgba(104,140,0,.6)}
.soc__a:focus-visible{color:#1d1d1f;background:var(--lime)}
@media (prefers-reduced-motion:reduce){.ftr__links>a::after,.lang--text a span::after{transition:none}}

/* 25 Sep (d) — review fixes.
   Sound button before the first gesture: the sound is on but nothing can be heard yet, so the meter rests flat and grey
   (app.js §6 drops .is-standby as soon as a click / tap / key has let the page make sound). */
.snd.is-standby[aria-pressed] .snd__eq i,.snd.is-standby[aria-pressed] .snd__eq i:nth-child(2){background:currentColor;opacity:.4;transform:scaleY(.25)}
/* tablets: the EMR tile's chart keeps its shape at a fixed height, so the tile comes down like the rest of the grid */
@media (min-width:768px) and (max-width:1023.98px){
  .tile--emr .emr-art{width:auto;height:160px;max-width:100%}
  /* the two wide tiles' titles stay at (just under) their old on-screen size instead of growing past it */
  .tile--emr h3,.tile--bill h3{font-size:25px}
}
/* desktop: the descriptions read at the flow's size (19 × .8 × .75 ≈ 11.4 px on screen) */
@media (min-width:1024px){.tile p{font-size:19px}}
/* phones: the bigger icon chip is paid for by a slightly tighter chip and gap, so the tiles stay their old height */
@media (max-width:767px){
  .tile__ic,.tile--emr .tile__ic{width:48px;height:48px;border-radius:15px}
  .kx-ic{width:34px;height:34px}
  .tile--emr .kx-ic{width:35px;height:35px}
  .tile__txt{margin-top:12px}
}