/* clinixio.ca. The rules after the font are the design canvas's own (project/Apple.dc.html); the
   site's additions are at the end. Colours: Clinixio design system. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

body{margin:0;background:#FFFFFF;-webkit-font-smoothing:antialiased;font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;color:#1B2A4E;display:flex;flex-direction:column;min-height:100vh}
html{scroll-behavior:smooth}
a{color:#12779F}a:hover{color:#02244F}
button,input{font-family:inherit}
.screen{min-height:100vh;min-height:100svh;box-sizing:border-box;padding:88px 24px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.glow{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%, rgba(41,182,232,.12), transparent 60%)}
.hi{color:#12779F}
.eyebrow{margin:0;font-size:12px;font-weight:800;letter-spacing:2.4px;color:#12779F;text-transform:uppercase}
.h2{margin:0;font-size:clamp(26px,3.6vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:#02244F;max-width:820px;text-wrap:balance}
.lead{margin:0;font-size:clamp(16px,1.9vw,21px);line-height:1.45;font-weight:600;color:#4A5A78;max-width:760px;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;border:0;background:#02244F;color:#FFFFFF;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(2,36,79,.18);color:#FFFFFF}
.btn.light{background:#FFFFFF;color:#02244F;border:1.5px solid #DCE6EF}
.btn.light:hover{color:#02244F;border-color:#02244F}
.btn.sky{background:#29B6E8;color:#02244F}
.btn.sky:hover{color:#02244F}
.btn.sm{height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#02244F;display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(2,36,79,.18)}
.video .tag{position:absolute;left:16px;top:14px;width:auto;transform:none;pointer-events:none;transition:opacity .3s ease;padding:6px 12px;border-radius:8px;background:rgba(11,52,102,.9);font-size:13px;font-weight:600;color:#FFFFFF}
.glass{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.subnav{position:sticky;top:64px;z-index:20;width:100%;display:flex;justify-content:center;padding:10px 0;pointer-events:none}
.subnav > div{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:6px;border-radius:14px;background:#FFFFFF;border:1.5px solid #DCE6EF;box-shadow:0 10px 30px rgba(2,36,79,.10)}
.subnav button,.subnav a{text-decoration:none;height:38px;padding:0 14px;border-radius:9px;border:0;background:transparent;color:#02244F;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.subnav button:hover,.subnav a:hover{background:#EEF3F8}
.subnav button.back,.subnav a.back{background:#02244F;color:#FFFFFF}
.subnav .sep{width:1px;height:22px;background:#DCE6EF;margin:0 4px}
.view{animation:cxView .7s cubic-bezier(.2,.8,.2,1) both}
.view .subnav{animation:cxDrop .5s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes cxDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.loadbar{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#12779F,#29B6E8);z-index:40;pointer-events:none;border-radius:0 3px 3px 0}
.loadbar.on{animation:cxLoad .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes cxLoad{0%{width:0;opacity:1}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes cxView{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes cxRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes cxFade{from{opacity:0}to{opacity:1}}
@keyframes cxFrom{from{opacity:0;transform:translateY(-30px) scale(.8)}to{opacity:1;transform:none}}
@keyframes cxTagUp{from{transform:translateY(var(--up,26vh)) scale(1.14)}to{transform:none}}
@keyframes cxWipe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(.92)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes cxGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cxGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cxFall10{0%{opacity:0;transform:translate(var(--x),calc(var(--y) - 30px)) scale(.4);border-color:var(--c);background:#FFFFFF}18%{opacity:1;transform:translate(var(--x),var(--y)) scale(1);border-color:var(--c);background:#FFFFFF}42%{border-color:var(--c);background:#FFFFFF;transform:translate(var(--x),var(--y)) scale(1)}56%{border-color:#29B6E8;background:#02244F;transform:translate(var(--x),var(--y)) scale(1.08)}66%{opacity:1;border-color:#29B6E8;background:#02244F;transform:translate(var(--x),var(--y)) scale(1)}84%{opacity:1;border-color:#29B6E8;background:#02244F;transform:translate(calc(var(--x) * .45),calc(var(--y) * .45)) scale(.8) rotate(10deg)}100%{opacity:0;border-color:#29B6E8;background:#02244F;transform:translate(0,0) scale(.1) rotate(30deg)}}
@keyframes cxPopC{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes cxFadeOut{from{opacity:1}to{opacity:0}}
@keyframes cxEqIn{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes cxEqPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes cxCoin{0%{opacity:0;transform:translate(var(--x),-40px) rotate(var(--r)) scale(.9)}25%{opacity:1;transform:translate(var(--x),0px) rotate(0deg) scale(1)}70%{opacity:1;transform:translate(calc(var(--x) * .35),52px) rotate(calc(var(--r) * .4)) scale(.9)}100%{opacity:0;transform:translate(0,84px) scale(.6)}}
@keyframes cxGlow{0%{opacity:0;transform:scale(.6)}40%{opacity:.5;transform:scale(1.1)}100%{opacity:0;transform:scale(1.6)}}
.hero{position:relative;z-index:1;width:100%;max-width:1120px;flex:1;box-sizing:border-box;padding:0 0 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,5vh,56px)}
.tag{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transform:translateY(24vh) scale(1.15);transition:transform .9s cubic-bezier(.65,0,.35,1)}
.tag h1,.tag .q{margin:0;font-size:clamp(26px,3.3vw,44px);line-height:1.14;letter-spacing:-.025em;font-weight:800;color:#02244F;max-width:900px;text-wrap:balance;transition:opacity .5s ease,transform .5s ease}
.ul{position:relative;color:#12779F;white-space:pre}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.11em;border-radius:3px;background:#29B6E8;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.ul.on::after{transform:scaleX(1)}
.tag .hl img{height:1.05em;width:auto;vertical-align:-.16em;margin-left:.1em}
.typed{white-space:pre}
.caret{display:inline-block;width:3px;height:.9em;margin-left:3px;vertical-align:-.08em;background:#29B6E8;border-radius:2px;animation:cxBlink .8s steps(2,start) infinite}
@keyframes cxBlink{to{visibility:hidden}}
.path{position:absolute;left:0;right:0;top:50%;transform:translateY(-30%);display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,28px);opacity:0;transition:opacity .5s ease}
.pathsub{margin:0;font-size:clamp(30px,4.4vw,60px);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:#02244F;text-align:center;max-width:980px;text-wrap:balance;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease,color .4s ease}
.pathsub .hi{transition:color .4s ease}
.bar{width:min(100%,900px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.seg{display:flex;flex-direction:column}
.trk{position:relative;height:16px;border-radius:999px;background:#DCE6EF;transform-origin:center}
.fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#12779F,#29B6E8);transition:width .9s cubic-bezier(.2,.8,.2,1),background .3s ease}
.logoWrap{position:relative;--cw:clamp(220px,24vw,320px);width:var(--cw);aspect-ratio:1243/276;opacity:0;transform:translateY(16vh) scale(1.6);transition:transform 1s cubic-bezier(.65,0,.35,1),opacity .3s ease}
.logoWrap > *{position:absolute}
.ltr{left:0;top:0;width:100%;height:auto;opacity:0}
@keyframes cxLtr{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cmark{left:0;top:0;width:18.83%;height:auto;opacity:0;-webkit-mask:radial-gradient(circle at 37.2% 20.9%,#000 calc(var(--cw) * .1883 * var(--k1)),transparent calc(var(--cw) * .1883 * var(--k1) + 2px)),radial-gradient(circle at 79.5% 25.2%,#000 calc(var(--cw) * .1883 * var(--k2)),transparent calc(var(--cw) * .1883 * var(--k2) + 2px)),radial-gradient(circle at 16.9% 58.7%,#000 calc(var(--cw) * .1883 * var(--k3)),transparent calc(var(--cw) * .1883 * var(--k3) + 2px)),radial-gradient(circle at 53.0% 82.2%,#000 calc(var(--cw) * .1883 * var(--k4)),transparent calc(var(--cw) * .1883 * var(--k4) + 2px)),radial-gradient(circle at 82.1% 71.7%,#000 calc(var(--cw) * .1883 * var(--k5)),transparent calc(var(--cw) * .1883 * var(--k5) + 2px));mask:radial-gradient(circle at 37.2% 20.9%,#000 calc(var(--cw) * .1883 * var(--k1)),transparent calc(var(--cw) * .1883 * var(--k1) + 2px)),radial-gradient(circle at 79.5% 25.2%,#000 calc(var(--cw) * .1883 * var(--k2)),transparent calc(var(--cw) * .1883 * var(--k2) + 2px)),radial-gradient(circle at 16.9% 58.7%,#000 calc(var(--cw) * .1883 * var(--k3)),transparent calc(var(--cw) * .1883 * var(--k3) + 2px)),radial-gradient(circle at 53.0% 82.2%,#000 calc(var(--cw) * .1883 * var(--k4)),transparent calc(var(--cw) * .1883 * var(--k4) + 2px)),radial-gradient(circle at 82.1% 71.7%,#000 calc(var(--cw) * .1883 * var(--k5)),transparent calc(var(--cw) * .1883 * var(--k5) + 2px))}
@property --k1{syntax:'<number>';inherits:false;initial-value:0}
@property --k2{syntax:'<number>';inherits:false;initial-value:0}
@property --k3{syntax:'<number>';inherits:false;initial-value:0}
@property --k4{syntax:'<number>';inherits:false;initial-value:0}
@property --k5{syntax:'<number>';inherits:false;initial-value:0}
@keyframes cxK1{0%{--k1:0}30%{--k1:0.198}55%{--k1:0.158}100%{--k1:1.4}}
@keyframes cxK2{0%{--k2:0}30%{--k2:0.165}55%{--k2:0.132}100%{--k2:1.4}}
@keyframes cxK3{0%{--k3:0}30%{--k3:0.163}55%{--k3:0.130}100%{--k3:1.4}}
@keyframes cxK4{0%{--k4:0}30%{--k4:0.150}55%{--k4:0.120}100%{--k4:1.4}}
@keyframes cxK5{0%{--k5:0}30%{--k5:0.112}55%{--k5:0.090}100%{--k5:1.4}}
.nd{width:calc(var(--cw) * .05);height:calc(var(--cw) * .05);margin:calc(var(--cw) * -.025) 0 0 calc(var(--cw) * -.025);border-radius:50%;border:1.5px solid #29B6E8;opacity:0}
@keyframes cxNd{0%{opacity:0;transform:scale(.5)}25%{opacity:.7}100%{opacity:0;transform:scale(1.9)}}
.tree{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tree > div{opacity:0}
@keyframes cxCardIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.pil{position:relative}
.chk{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:#1E9E73;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.3);box-shadow:0 6px 16px rgba(30,158,115,.35)}
.proof{opacity:0;transition:opacity .6s ease;margin-top:clamp(6px,2vh,18px)}
/* phases */
.hero.ph1 .tag{transform:none}
.hero.ph4 .caret{display:none}
.hero.ph2 .path{opacity:1}
.hero.ph2 .pathsub{opacity:1;transform:none}
.hero.ph2 .seg:first-child .fill{width:100%;transition-delay:.6s}
.pathsub .red{color:#E8837E;display:inline-block}
.hero.ph3 .pathsub .red{animation:cxPulseRed .6s ease-in-out .2s 2}
@keyframes cxPulseRed{0%,100%{transform:none}50%{transform:scale(1.07)}}
.hero.ph3 .seg:first-child .fill{background:#F0A09B;transition:background .6s ease;animation:cxShake .6s ease .4s both}
.hero.ph3 .seg .trk{animation:cxSink .7s ease-in 1.1s both}
@keyframes cxShake{0%,100%{transform:none}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
@keyframes cxSink{to{opacity:0;transform:translateY(22px)}}
.hero.ph3 .path{animation:cxSwipeUp .7s cubic-bezier(.65,0,.35,1) 1.7s both}
.hero.ph3 .q{transition:opacity .6s ease 1.8s,transform .8s cubic-bezier(.65,0,.35,1) 1.8s;opacity:0;transform:translateY(-40vh)}
@keyframes cxSwipeUp{to{opacity:0;transform:translateY(-140%) scale(.8)}}
.hero.ph4 .path{opacity:0;animation:none}
.hero.ph4 .q{opacity:0;transform:translateY(-40vh)}
.hl{opacity:0;transform:translateY(70vh);transition:opacity .5s ease,transform 1s cubic-bezier(.65,0,.35,1)}
.hero.ph4 .hl{opacity:1;transform:none}
.hero.ph5 .logoWrap{opacity:1}
.hero.ph5 .cmark{opacity:1;animation:cxK1 1.5s cubic-bezier(.65,0,.35,1) 0.00s both,cxK2 1.5s cubic-bezier(.65,0,.35,1) 0.18s both,cxK3 1.5s cubic-bezier(.65,0,.35,1) 0.36s both,cxK4 1.5s cubic-bezier(.65,0,.35,1) 0.54s both,cxK5 1.5s cubic-bezier(.65,0,.35,1) 0.72s both}
.hero.ph5 .nd{animation:cxNd .8s ease-out calc(var(--d) + .25s) both}
.hero.ph5 .ltr{animation:cxLtr .55s cubic-bezier(.2,.8,.2,1) var(--d) both}
.hero.ph6 .cmark{-webkit-mask:none;mask:none;animation:none;opacity:1}
.hero.ph6 .ltr{animation:none;opacity:1}
.hero.ph6 .logoWrap{transform:none}
.hero.ph7 .tree > div{opacity:1;animation:cxCardIn .7s cubic-bezier(.2,.8,.2,1) .1s both}
.hero.ph7 .tree > div:nth-child(3){animation-delay:.35s}
.hero.ph7 .tree > div:nth-child(4){animation-delay:.6s}
.hero.ph8 .chk{opacity:1;transform:none;animation:cxEqPop .5s cubic-bezier(.2,.8,.2,1) both}
.hero.ph8 .tree > div:nth-child(3) .chk{animation-delay:.3s}
.hero.ph8 .tree > div:nth-child(4) .chk{animation-delay:.6s}
.hero.ph9 .proof{opacity:1}
.proof .stat,.proof .marquee{opacity:0}
.hero.ph9 .proof .stat{opacity:1}
.hero.ph9 .proof .sp1{animation:cxCardIn .6s cubic-bezier(.2,.8,.2,1) .1s both}
.hero.ph9 .proof .sp2{animation:cxCardIn .6s cubic-bezier(.2,.8,.2,1) .6s both}
.hero.ph9 .proof .marquee{opacity:1;animation:cxFade .8s ease 1.2s both}
.pil{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;width:100%;height:100%;box-sizing:border-box;padding:clamp(18px,3vh,28px) 16px;border-radius:20px;border:1.5px solid #DCE6EF;background:#FFFFFF;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pil:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,36,79,.12);border-color:#29B6E8}
.pil i{width:56px;height:56px;flex-shrink:0;border-radius:50%;background:#02244F;display:flex;align-items:center;justify-content:center}
.pil i svg{width:26px;height:26px}
.pil i img{width:28px;height:auto;display:block}
.pil .t{display:flex;flex-direction:column;align-items:center;gap:8px}
.pil b{font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-.035em;font-weight:800;color:#02244F;white-space:nowrap}
.pil span.sub{font-size:16px;line-height:1.35;font-weight:600;color:#4A5A78}
.pil em{font-style:normal;font-size:13px;font-weight:700;color:#12779F;display:inline-flex;align-items:center;gap:6px}
.pg{width:100%;max-width:1000px;min-height:0;padding-top:8px;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,22px);text-align:center}
.plat-stage{position:relative;width:100%;max-width:640px;height:clamp(128px,17vh,160px);overflow:hidden;--S:min(14vw,120px)}
.ic10{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;box-sizing:border-box;border-radius:28%;background:#FFFFFF;border:3px solid var(--c);animation:cxFall10 2.6s cubic-bezier(.5,0,.4,1) var(--dl) both}
.plat-caption{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(16px,2vw,22px);font-weight:800;color:#12779F;white-space:nowrap}
.plat-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(50vw,250px);height:auto;animation:cxPopC .6s cubic-bezier(.2,.8,.2,1) 2.2s both}
.cmp-q{font-size:15px;font-weight:800;color:#02244F;margin-right:4px}
.cmp-b{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;padding:7px 14px;border-radius:10px;font-size:18px;font-weight:800;white-space:nowrap}
.cmp-b small{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;opacity:.8;margin-bottom:3px}
.cmp-b.was{background:#FDE2E2;color:#A32D2D;border:1.5px solid #F09595}
.cmp-b.now{background:#E1F5EE;color:#085041;border:1.5px solid #5DCAA5}
.facts2{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:12px 20px}
.cmp2{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;background:#FFFFFF;border:1.5px solid #DCE6EF}
.cmp2 .cmp-q{font-size:16px;margin:0}
.cmp-row{display:inline-flex;align-items:center;gap:10px}
.conf2{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:#E3F4FB;font-size:15px;line-height:1.3;font-weight:700;color:#02244F;text-align:left}
.proof{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.stats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px}
.stat{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:600;color:#1B2A4E;white-space:nowrap}
.stat.big{font-size:clamp(18px,2vw,24px);font-weight:700;color:#02244F;padding:10px 18px;border-radius:14px;border:1.5px solid transparent}
.stat.sp1{background:#E3F4FB;border-color:#B9E3F5}.stat.sp1 b{color:#12779F}
.stat.sp2{background:#E1F5EE;border-color:#5DCAA5;color:#085041}.stat.sp2 b{color:#1E9E73}
.stat b{color:#02244F;font-weight:800}
.marquee{width:100%;max-width:1120px;margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;align-items:center;gap:56px;width:max-content;padding-right:56px;animation:cxMarquee 32s linear infinite}
.marquee .track img{height:30px;width:auto;display:block;flex-shrink:0}
.marquee:hover .track{animation-play-state:paused}
@keyframes cxMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rt{animation:cxRise .7s ease var(--dl,0s) both}
.eq-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.eq{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px}
.eq-box{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:12px;background:#FFFFFF;border:1.5px solid #DCE6EF;font-size:clamp(15px,1.8vw,20px);font-weight:700;color:#02244F;white-space:nowrap}
.eq-box svg{width:20px;height:20px}
.eq-box.bad{background:#FDE2E2;border-color:#F09595;color:#A32D2D}
.eq-box.good{background:#E1F5EE;border-color:#5DCAA5;color:#085041}
.eq-op{font-size:clamp(16px,2vw,22px);font-weight:800;color:#12779F}
.eq.row1{animation:cxEqBig 2.6s cubic-bezier(.65,0,.35,1) .1s both}
.eq.row2{animation:cxEqBig 2.6s cubic-bezier(.65,0,.35,1) 2.8s both}
@keyframes cxEqBig{0%{transform:translateY(24vh) scale(1.55)}68%{transform:translateY(24vh) scale(1.55)}100%{transform:none}}
.pods{width:min(100%,920px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pod{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#FFFFFF;border:1.5px solid #DCE6EF;font-size:14px;line-height:1.3;font-weight:700;color:#02244F;text-align:left}
.pod svg{flex-shrink:0;color:#12779F}
.pod.sky{background:#E3F4FB;border-color:#B9E3F5}
.pod.good{background:#E1F5EE;border-color:#5DCAA5;color:#085041}.pod.good svg{color:#1E9E73}
.pod.warm{background:#FFE6CC;border-color:#F5A962;color:#8A4B12}.pod.warm svg{color:#8A4B12}
.amt{display:inline-block;color:#12779F;white-space:nowrap;animation:cxAmt .6s ease 1.6s 3}
@keyframes cxAmt{0%,100%{transform:none;color:#12779F}50%{transform:scale(1.03);color:#1E9E73}}
.coin-stage{position:relative;width:100%;max-width:520px;height:clamp(70px,12vh,100px);margin-bottom:-10px}
.coin{position:absolute;left:50%;top:0;margin-left:-52px;width:104px;box-sizing:border-box;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#E1F5EE;border:1.5px solid #5DCAA5;font-size:15px;font-weight:800;color:#085041;animation:cxCoin 2.2s cubic-bezier(.4,0,.2,1) var(--dl) both}
.cards{width:min(100%,calc(2 * 23vh * 16 / 9 + 20px));max-width:820px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:10px;text-align:left}
.card h3{margin:0;font-size:17px;font-weight:700;color:#02244F;letter-spacing:-.01em}
footer a{color:#C9D6E6;text-decoration:none;font-size:14px}
footer a:hover{color:#FFFFFF}
/* The footer's booking button: white text on teal. White on sky would read at 2.4:1, below the 4.5:1
   that text this size needs, and sky is for decoration or text on navy (design system). */
footer .btn.sky,footer .btn.sky:hover{background:#12779F;color:#FFFFFF}
/* Computers: « Plus d'information » is always open, so its button goes, and so does the bar's copy of
   the © and conditions lines, which the panel repeats at its foot. Phones keep the button. */
@media (min-width: 761px){footer div:has(> .more-toggle){display:none!important}#footer-more[hidden]{display:block!important}#footer-more{animation:none!important}}
/* Cookie notice: small and quiet, bottom left on computers, a slim bar on phones. « Refuser » and
   « Accepter » look the same, so refusing is as easy as accepting. */
.cookie{position:fixed;left:16px;bottom:16px;z-index:60;width:min(400px,calc(100% - 32px));box-sizing:border-box;background:#FFFFFF;border:1px solid #DCE6EF;border-radius:14px;padding:12px 14px;box-shadow:0 8px 24px rgba(2,36,79,.12);display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.45;color:#1B2A4E;animation:cxRise .4s ease both}
.cookie p{margin:0}
.cookie p a{color:#12779F;font-weight:700}
.cookie .acts{display:flex;gap:8px}
.cookie .acts .btn{flex:1;height:34px;padding:0 12px;font-size:13px;border-radius:9px}
@media (max-height: 780px){.hero{padding-bottom:16px;gap:clamp(14px,3vh,30px)}.tag h1,.tag .q{font-size:clamp(22px,2.6vw,34px)}.pg{gap:clamp(10px,1.6vh,18px)}.pil{padding:14px 14px;gap:10px}.pil i{width:46px;height:46px}.pil b{font-size:clamp(24px,2.7vw,34px)}.proof{gap:10px}.marquee .track img{height:26px}}
.lang{display:inline-flex;border:1.5px solid #DCE6EF;border-radius:10px;overflow:hidden;height:44px}
.lang a{display:inline-flex;align-items:center;text-decoration:none;height:100%;padding:0 12px;border:0;background:#FFFFFF;color:#4A5A78;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
.lang a.on{background:#02244F;color:#FFFFFF}
.mi{display:block;text-decoration:none;text-align:left;padding:11px 14px;border:0;background:transparent;border-radius:10px;font-size:15px;font-weight:700;color:#02244F;cursor:pointer;font-family:inherit}
.mi:hover{background:#EEF3F8}
.msep{height:1px;background:#DCE6EF;margin:4px 8px}
.fl{text-decoration:none;text-align:left;padding:0;border:0;background:transparent;color:#C9D6E6;font-size:14px;font-family:inherit;cursor:pointer}
.fl:hover{color:#FFFFFF}
.linkBtn{padding:0;border:0;background:transparent;color:#12779F;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.pageView{max-width:860px;margin:0 auto;padding:104px 24px 72px;display:flex;flex-direction:column;gap:14px;animation:cxView .5s cubic-bezier(.2,.8,.2,1) both}
.pageView.wide{max-width:1000px}
.pageView h1{margin:0 0 6px;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:#02244F}
.pageView h2{margin:26px 0 4px;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;font-weight:800;color:#02244F}
.pageView h3{margin:0 0 6px;font-size:17px;font-weight:800;color:#02244F}
.pageView p{margin:0;font-size:16px;line-height:1.6;color:#1B2A4E}
.pageView .meta{font-size:14px;color:#4A5A78;font-weight:600}
.pageView .big{font-size:clamp(22px,2.8vw,32px);line-height:1.2;font-weight:800;color:#02244F;letter-spacing:-.02em}
.backlink{text-decoration:none;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1.5px solid #DCE6EF;background:#FFFFFF;color:#02244F;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.backlink:hover{border-color:#02244F}
.faq{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.faq details{background:#FFFFFF;border:1.5px solid #DCE6EF;border-radius:14px;padding:0 18px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:17px;font-weight:700;color:#02244F}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex-shrink:0;color:#12779F;transition:transform .25s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .ans{padding:0 0 18px;display:flex;flex-direction:column;gap:8px}
.faq .ans strong{color:#02244F;font-size:16px;line-height:1.5}
.faq .ans ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.5;color:#1B2A4E}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:10px}
.infoCard{background:#FFFFFF;border:1.5px solid #DCE6EF;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.infoCard svg{margin-bottom:4px}
.partners{display:flex;flex-wrap:wrap;gap:10px}
.partners a{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:12px;background:#FFFFFF;border:1.5px solid #DCE6EF;color:#02244F;font-weight:800;text-decoration:none}
.contactCard{background:#FFFFFF;border:1.5px solid #DCE6EF;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:18px;margin-top:8px}
.contactCard .who{display:flex;flex-direction:column;gap:2px}
.contactCard .who b{font-size:22px;color:#02244F;letter-spacing:-.01em}
.contactCard .who span{font-size:14px;color:#4A5A78;font-weight:600}
.contactCard .lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.contactCard .lines a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#F2F6FA;color:#02244F;text-decoration:none;font-weight:700;font-size:15px}
.contactCard .lines a:hover{background:#E3F4FB}
.contactCard .lines small{display:block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4A5A78;margin-bottom:2px}
/* A long address (waseem.altarbouch@clinixio.ca) wraps inside its box instead of running past it. */
.contactCard .lines a span{min-width:0;overflow-wrap:anywhere}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.pref{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;background:#FFFFFF;border:1.5px solid #DCE6EF;border-radius:16px;padding:18px 20px;margin-top:10px}
.pref p{font-size:14.5px}
.always{flex-shrink:0;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#085041;background:#E1F5EE;padding:8px 12px;border-radius:999px}
.switch{flex-shrink:0;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:46px;height:26px;border-radius:999px;background:#DCE6EF;position:relative;transition:background .2s ease}
.switch .knob{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 6px rgba(2,36,79,.25);transition:transform .2s ease}
.switch input:checked + .track{background:#1E9E73}
.switch input:checked + .track .knob{transform:translateX(20px)}
.switch .lbl{font-size:13px;font-weight:700;color:#02244F}
@media (max-width:700px){.pref{flex-direction:column}}
@media (max-width: 760px){
.hd-access,.hd-tel{display:none}
.hd-book{height:40px!important;padding:0 12px!important;font-size:13px!important}
.lang{height:40px}.lang a{padding:0 9px;font-size:12px}
.tag{width:100%;transform:translateY(22vh) scale(1)}.tag h1,.tag .q{width:100%;max-width:100%;font-size:clamp(24px,7vw,30px);text-wrap:balance}
.typed,.ul{white-space:normal}
.pathsub{font-size:clamp(26px,8vw,34px);padding:0 8px}
.path{gap:14px}.bar{width:min(100%,340px);gap:8px}.trk{height:12px}
.logoWrap{--cw:min(62vw,260px);transform:translateY(14vh) scale(1.25)}
.hero{gap:clamp(14px,2.6vh,26px);padding-bottom:12px}
.tree{gap:10px}.pil{padding:12px 14px}.pil b{font-size:22px}.pil span.sub{font-size:14px}.chk{top:10px;right:10px;width:26px;height:26px}
.stats{flex-direction:column;gap:8px;width:100%}.stat.big{display:block;white-space:normal;text-align:center;font-size:16px;line-height:1.35;padding:9px 12px;width:100%;box-sizing:border-box}
.marquee{margin-top:8px}.marquee .track{gap:34px}.marquee .track img{height:22px}
.subnav{top:60px;padding:6px 0}.subnav > div{padding:4px;gap:2px}.subnav button,.subnav a{height:34px;padding:0 10px;font-size:13px}
.screen{padding:80px 16px 24px}
.h2{font-size:clamp(24px,7vw,32px)}
.plat-stage{--S:min(15vw,60px);height:110px}.ic10{width:30px;height:30px;margin:-15px 0 0 -15px}.plat-logo{width:min(60vw,220px)}
.video{width:100%!important;max-width:100%!important;border-radius:14px}
.facts2{flex-direction:column;align-items:stretch}.cmp2,.conf2{width:100%;box-sizing:border-box;justify-content:center}
.eq{gap:6px}.eq-box{height:34px;padding:0 8px;font-size:13px;gap:5px;border-radius:9px}.eq-box svg{width:15px;height:15px}.eq-box img{height:16px!important}.eq-op{font-size:14px}.eq-wrap{gap:8px}
@keyframes cxEqBig{0%{transform:translateY(18vh) scale(1.12)}68%{transform:translateY(18vh) scale(1.12)}100%{transform:none}}
.pods{grid-template-columns:1fr;gap:8px;width:100%}.pod{padding:10px 12px;font-size:13.5px}
.coin{width:84px;margin-left:-42px;height:30px;font-size:13px}.coin-stage{height:70px}
.cards{width:100%;grid-template-columns:1fr;gap:12px}
.pageView{padding:92px 16px 56px}.pageView h1{font-size:clamp(28px,8vw,36px)}
.cookie{left:10px;bottom:10px;width:calc(100% - 20px);padding:10px 12px;gap:8px;font-size:12.5px}
footer .btn.sky.sm{height:36px;font-size:13px;padding:0 12px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.ic10,.plat-caption,.coin{display:none}}
@media (max-width: 760px){.tree{grid-template-columns:1fr;gap:10px;max-width:420px}.pil{flex-direction:row;text-align:left;justify-content:flex-start;padding:14px 16px;gap:14px}.pil .t{align-items:flex-start;gap:4px}.pil em{display:none}.cards{grid-template-columns:1fr}.coin{display:none}.pods{grid-template-columns:1fr}.subnav{top:60px}}
@media (max-height: 700px){.pil i{display:none}}

/* ── Site additions ─────────────────────────────────────────────────────────────────────────── */

[hidden]{display:none!important}
main{flex:1 0 auto}
:focus-visible{outline:3px solid #12779F;outline-offset:2px}
footer :focus-visible{outline-color:#29B6E8}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;border-radius:12px;background:#FFFFFF;color:#02244F;font-weight:700;box-shadow:0 8px 20px rgba(2,36,79,.18)}
.skip-link:focus{top:12px}

/* Phones: the design's header is wider than the screen below 520 px. « Réserver une rencontre » stays
   in the footer bar of every page; the header keeps the logo, phone, FR/EN and the menu. */
@media (max-width: 520px){header .hd-book{display:none}}
/* Phones: the floating « Réserver une rencontre » that main.js adds in place of the header's. It
   rises in shortly after the page opens, and sits above the cookie notice while that is open. */
.fab-book{display:none}
@media (max-width: 520px){
.fab-book{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px) + var(--cookie-h, 0px));z-index:55;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px 0 16px;border-radius:999px;background:#02244F;color:#FFFFFF;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 10px 24px rgba(2,36,79,.28);opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1),bottom .3s ease,visibility 0s linear .35s}
.fab-book.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.fab-book:hover{color:#FFFFFF}
.fab-book svg{flex-shrink:0}
}
@media (max-width: 380px){header.glass > div{padding-left:16px!important;padding-right:16px!important}header.glass > div > a:first-child img{width:112px!important}}
/* Phones and tablets: the header has no room for « Accéder au logiciel » below 761 px, so the menu
   opens with it, as a button above the links, and the footer bar has it next to « Réserver une
   rencontre », outlined in white so the booking button stays the main one. Below 381 px the bar
   narrows its margins, as the header does, so the two still share a line from 353 px up. */
#menu-principal .mi-app,footer .btn.ft-app{display:none}
@media (max-width: 760px){
#menu-principal .mi-app{display:flex;height:44px;margin:4px 4px 6px;font-size:15px}
footer .btn.ft-app{display:inline-flex;box-sizing:border-box;height:36px;padding:0 12px;font-size:13px;background:transparent;color:#FFFFFF;border:1.5px solid #FFFFFF}
footer .btn.ft-app:hover{background:rgba(255,255,255,.1);color:#FFFFFF}
}
@media (max-width: 380px){
footer > div:first-child,#footer-more > div{padding-left:16px!important;padding-right:16px!important}
footer .btn.sky.sm,footer .btn.ft-app{padding:0 10px}
}

/* The pharmacy logos when « reduce motion » is on (an accessibility setting; Windows turns it on when
   its animation effects are off). Nothing animates then, so the scrolling strip would sit still with
   logos cut off at its faded edges: instead each logo shows once, centred, in two rows on computers.
   The copies that make the loop seamless (empty alt) are hidden. */
@media (prefers-reduced-motion: reduce){
.marquee{-webkit-mask-image:none;mask-image:none}
.marquee .track{width:auto;max-width:900px;margin:0 auto;padding-right:0;flex-wrap:wrap;justify-content:center;row-gap:24px}
.marquee .track img[alt=""]{display:none}
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px){.marquee .track{row-gap:16px}}

/* Videos: the native player fills the design's 16:9 frame. */
.video video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;background:#02244F}
.video.played .tag{opacity:0}
.contactCard .lines svg{flex-shrink:0}
/* The cookie page's switch: its checkbox is invisible, so the focus ring goes on the track. */
.switch input:focus-visible + .track{outline:3px solid #12779F;outline-offset:2px}

/* Legal pages: the in-force text, set like the design's pages. */
.legal-top{width:100%;max-width:860px;box-sizing:border-box;margin:0 auto;padding:104px 24px 0;display:flex}
.legal-doc{width:100%;max-width:860px;box-sizing:border-box;margin:0 auto;padding:104px 24px 72px;color:#1B2A4E;overflow-wrap:anywhere}
.legal-top + .legal-doc{padding-top:14px}
.legal-doc > div > header,.legal-doc > header{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 22px}
.legal-doc h1{margin:0;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:#02244F}
.legal-doc header div p{margin:0;font-size:14px;line-height:1.5;color:#4A5A78;font-weight:600}
.legal-doc .legal-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:2.4px;color:#12779F;text-transform:uppercase}
.legal-doc .legal-lead{margin:0;font-size:clamp(16px,1.9vw,21px);line-height:1.45;font-weight:600;color:#4A5A78}
.legal-doc section{margin:0 0 14px;padding:24px;background:#FFFFFF;border:1.5px solid #DCE6EF;border-radius:16px}
.legal-doc h2{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:clamp(20px,2.4vw,26px);line-height:1.25;letter-spacing:-.02em;font-weight:800;color:#02244F}
.legal-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#E3F4FB;color:#12779F;font-size:15px;font-weight:800;letter-spacing:0}
.legal-doc h3{margin:18px 0 6px;font-size:16px;line-height:1.4;font-weight:800;color:#12779F}
.legal-doc p,.legal-doc li{margin:0 0 10px;font-size:16px;line-height:1.6;color:#1B2A4E}
.legal-doc ul{margin:0 0 12px;padding-left:22px}
.legal-doc a{color:#12779F;text-decoration:underline;text-underline-offset:2px}
.legal-doc .legal-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;margin:0 0 14px;padding:0 14px;box-sizing:border-box;border-radius:10px;border:1.5px solid #DCE6EF;background:#FFFFFF;color:#02244F;font-weight:700;font-size:14px;text-decoration:none}
.legal-doc .legal-back::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.legal-doc .legal-back:hover{border-color:#02244F}
.legal-doc > div:not([class]){display:flex;flex-direction:column}
.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.security-grid section{margin:0;padding:20px}
.security-grid h2{margin:0 0 6px;font-size:17px;letter-spacing:0}
.security-grid p{margin:0}
.legal-doc .security-badges{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.security-badges li{margin:0;display:flex;align-items:center;padding:12px 14px;border-radius:14px;background:#FFFFFF;border:1.5px solid #DCE6EF;font-size:14px;line-height:1.3;font-weight:700;color:#02244F}
.security-badges li:first-child{background:#E3F4FB;border-color:#B9E3F5}
.legal-doc .security-partners{margin:28px 0 0;padding:0;border:0;background:transparent;border-radius:0}
.security-partners h2{margin:0;font-size:12px;font-weight:800;letter-spacing:2.4px;color:#12779F;text-transform:uppercase}
.security-logos{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 18px}
.security-logos a{display:inline-flex;align-items:center;height:44px;padding:0 18px;box-sizing:border-box;border-radius:12px;background:#FFFFFF;border:1.5px solid #DCE6EF}
.security-logos img{display:block;height:22px;width:auto}
.legal-doc .btn{color:#FFFFFF;text-decoration:none}
@media (max-width: 760px){
.legal-top{padding:92px 16px 0}
.legal-doc{padding:92px 16px 56px}
.legal-doc h1{font-size:clamp(28px,8vw,36px)}
.legal-doc section{padding:18px 16px}
.legal-doc .security-badges{grid-template-columns:1fr;gap:8px}
}