/* JointBrex | white base, label green + slate navy */
:root{
  --jb-green:#1A8F55; --jb-green-dk:#12704A; --jb-lime:#3DDC84; --jb-mint:#EAF6EF; --jb-mint-2:#D3EEDD; --jb-slate:#12324A; --jb-slate-2:#1C4766;
  --jb-ink:#13293A; --jb-text:#334452; --jb-soft:#647482; --jb-line:#E2EAE6;
  --jb-head-f:"Red Hat Display",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --jb-body-f:"Red Hat Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--jb-body-f);font-size:1.04rem;line-height:1.72;color:var(--jb-text);background:#fff}
h1,h2,h3,h4{font-family:var(--jb-head-f);font-weight:800;line-height:1.12;letter-spacing:-.5px;color:var(--jb-ink)}
h2{font-size:clamp(1.9rem,3.9vw,2.7rem);margin-bottom:.7rem}
h3{font-size:1.1rem;font-weight:700}
p{max-width:72ch}
a{color:var(--jb-green-dk);text-underline-offset:3px}
a:hover{color:var(--jb-slate)}
:focus-visible{outline:3px solid var(--jb-lime);outline-offset:3px}
.jb-skip{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--jb-green);color:#fff;padding:.6rem 1rem;font-weight:600}
.jb-skip:focus{left:0}
.jb-sec{padding:clamp(3.2rem,7vw,5.4rem) 0;overflow-x:clip}
.jb-mint,.jb-ash,.jb-cream,.jb-gray,.jb-warm,.jb-tint{background:var(--jb-mint)}
.jb-slate{background:var(--jb-slate);color:#C7D6E2}
.jb-slate h2,.jb-slate h3{color:#fff}
.jb-kicker{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.8rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--jb-green);margin-bottom:.5rem}
.jb-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jb-lime);box-shadow:0 0 0 4px rgba(61,220,132,.2)}
.jb-slate .jb-kicker{color:var(--jb-lime)}
.jb-title{text-align:center;max-width:740px;margin:0 auto 2.2rem}
.jb-title .jb-kicker{justify-content:center}
.jb-title p{margin:0 auto;color:var(--jb-soft)}
.jb-note,.jb-small{font-size:.88rem;color:var(--jb-soft)}
.jb-lead,.jb-intro{font-size:1.08rem;color:var(--jb-soft)}

/* header: shrinks after scroll */
.jb-head{background:transparent;transition:background .3s,box-shadow .3s;border-bottom:1px solid transparent}
.jb-head.is-solid,.jb-head:not(.jb-head-home){background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-color:var(--jb-line);box-shadow:0 6px 20px rgba(19,41,58,.06)}
.jb-head .navbar{padding:.85rem .75rem;transition:padding .3s}
.jb-head.is-solid .navbar{padding:.45rem .75rem}
.jb-logo{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-family:var(--jb-head-f);font-weight:900;font-size:1.55rem;color:var(--jb-slate)}
.jb-logo:hover{color:var(--jb-slate)}
.jb-logo img{width:34px;height:34px;object-fit:contain;transition:transform .3s}
.jb-head.is-solid .jb-logo img{transform:scale(.85)}
.jb-logo b{color:var(--jb-green)}
.jb-head .nav-link{font-weight:600;color:var(--jb-text);padding:.5rem .75rem!important;white-space:nowrap;border-radius:999px}
.jb-head .nav-link:hover{color:var(--jb-green-dk);background:var(--jb-mint)}
.jb-burger{border:0;background:var(--jb-mint);width:44px;height:44px;border-radius:50%;display:grid;place-content:center;gap:4px}
.jb-burger i{display:block;width:18px;height:2px;background:var(--jb-green-dk)}
@media (max-width:991.98px){.jb-head .navbar-collapse{background:#fff;border-radius:16px;padding:.6rem .8rem 1rem;margin-top:.5rem;box-shadow:0 14px 30px rgba(19,41,58,.12)}}

/* buttons */
.jb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-family:var(--jb-head-f);font-weight:800;font-size:1.02rem;color:#fff;background:var(--jb-green);border:0;border-radius:14px;padding:.95rem 1.7rem;box-shadow:0 10px 0 -3px var(--jb-green-dk),0 16px 26px rgba(26,143,85,.25);transition:transform .15s,box-shadow .15s,background .2s;white-space:nowrap}
.jb-btn:hover{color:#fff;background:#1D9E5E;transform:translateY(2px);box-shadow:0 7px 0 -3px var(--jb-green-dk),0 12px 20px rgba(26,143,85,.25)}
.jb-btn svg{width:1.1em;height:1.1em}
.jb-btn-line{background:#fff;color:var(--jb-slate);box-shadow:inset 0 0 0 2px var(--jb-slate)}
.jb-btn-line:hover{background:var(--jb-slate);color:#fff;box-shadow:inset 0 0 0 2px var(--jb-slate)}
.jb-btn-sm{font-size:.92rem;padding:.55rem 1.1rem;box-shadow:0 6px 0 -2px var(--jb-green-dk)}
.jb-btn-block{width:100%}
@media (max-width:575.98px){.jb-btn{white-space:normal;text-align:center}}

/* hero: knee joint */
.jb-hero{position:relative;overflow:hidden;margin-top:-80px;padding:calc(80px + clamp(1.5rem,4vw,3rem)) 0 clamp(3rem,6vw,5rem);background:radial-gradient(ellipse 55% 75% at 78% 45%,var(--jb-mint),#fff 66%)}
.jb-hero .container{position:relative;z-index:1}
.jb-stage{position:relative;width:min(500px,90vw);aspect-ratio:1;margin:0 auto}
.jb-knee{position:absolute;inset:0;width:100%;height:100%}
.jb-arc{fill:none;stroke-width:2;stroke-dasharray:6 12;transform-origin:200px 200px}
.jb-arc.a1{stroke:rgba(26,143,85,.45);animation:jbSpin 26s linear infinite}
.jb-arc.a2{stroke:rgba(18,50,74,.25);stroke-dasharray:2 10;animation:jbSpin 18s linear infinite reverse}
.jb-arc.a3{stroke:rgba(61,220,132,.35);stroke-dasharray:30 18;animation:jbSpin 40s linear infinite}
@keyframes jbSpin{to{transform:rotate(360deg)}}
.jb-glow{transform-origin:200px 200px;animation:jbGlow 3.2s ease-in-out infinite}
@keyframes jbGlow{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.jb-tibia{transform-origin:200px 204px;animation:jbFlex 3.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes jbFlex{0%,100%{transform:rotate(0)}45%,55%{transform:rotate(-34deg)}}
.jb-cart{fill:var(--jb-lime);opacity:.85;transform-origin:200px 203px;animation:jbCush 3.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes jbCush{0%,100%{transform:scale(1,1)}45%,55%{transform:scale(1.08,.6)}}
.jb-rom{fill:none;stroke:var(--jb-green);stroke-width:4;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;animation:jbRom 3.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes jbRom{0%,100%{stroke-dashoffset:140}45%,55%{stroke-dashoffset:0}}
.jb-hero-img{position:absolute;right:-4%;bottom:0;width:58%;height:auto;filter:drop-shadow(0 22px 26px rgba(19,41,58,.25));animation:jbIn 1s cubic-bezier(.2,1.2,.3,1) .2s both}
@keyframes jbIn{from{transform:translate(30px,30px);opacity:0}to{transform:none;opacity:1}}
.jb-chip{position:absolute;background:#fff;border:1px solid var(--jb-line);border-radius:999px;padding:.3rem .85rem;font-weight:700;font-size:.82rem;color:var(--jb-slate);box-shadow:0 10px 22px rgba(19,41,58,.1);animation:jbBob 5s ease-in-out infinite}
.jb-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--jb-lime);margin-right:.4rem}
.jb-chip.c1{left:4%;top:44%}.jb-chip.c2{left:6%;top:12%;animation-delay:1.3s}.jb-chip.c3{right:6%;top:16%;animation-delay:2.4s}
@keyframes jbBob{50%{transform:translateY(-10px)}}
.jb-hero h1{font-size:clamp(2.2rem,4.8vw,3.5rem);margin-bottom:1rem}
.jb-hero h1 span{background:linear-gradient(transparent 62%,var(--jb-mint-2) 62%);color:var(--jb-green-dk)}
.jb-hero-ticks{list-style:none;padding:0;margin:1rem 0 1.3rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem}
.jb-hero-ticks li{position:relative;padding-left:1.7rem;font-size:.96rem;font-weight:500}
.jb-hero-ticks li::before{content:"\2713";position:absolute;left:0;top:.15rem;width:20px;height:20px;border-radius:6px;background:var(--jb-green);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center}
@media (max-width:575.98px){.jb-hero-ticks{grid-template-columns:1fr}}
.jb-hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.jb-trust{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1.1rem;font-size:.85rem;color:var(--jb-soft)}
.jb-trust span::before{content:"\25CF";color:var(--jb-lime);margin-right:.35rem;font-size:.6rem;vertical-align:2px}

/* why */
.jb-why{position:relative;height:100%;background:#fff;border:1px solid var(--jb-line);border-radius:18px;padding:1.4rem 1.2rem 1.2rem;overflow:hidden}
.jb-why::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--jb-mint)}
.jb-why-ico{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--jb-green);color:#fff;margin-bottom:.8rem}
.jb-why-ico svg{width:24px;height:24px}
.jb-why p{margin:0;font-size:.92rem;color:var(--jb-soft)}
.jb-shot{width:100%;height:auto;border-radius:22px;box-shadow:0 22px 44px rgba(19,41,58,.12)}

/* advantages */
.jb-adv{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.jb-adv li{background:#fff;border:1px solid var(--jb-line);border-radius:16px;padding:1.1rem;transition:transform .25s,border-color .25s}
.jb-adv li:hover{transform:translateY(-4px);border-color:var(--jb-green)}
.jb-adv b{display:block;font-family:var(--jb-head-f);font-weight:900;font-size:1.7rem;color:var(--jb-mint-2);line-height:1;-webkit-text-stroke:1px var(--jb-green)}
.jb-adv h3{font-size:1rem;margin:.4rem 0 .2rem}
.jb-adv p{margin:0;font-size:.88rem;color:var(--jb-soft)}
@media (max-width:1199.98px){.jb-adv{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767.98px){.jb-adv{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.jb-adv{grid-template-columns:1fr}}

/* how it works rings */
.jb-rings{width:100%;max-width:360px;display:block;margin:0 auto}
.jb-rings circle{fill:none;stroke-width:22;transition:stroke .4s,stroke-width .4s}
.jb-rings .r0{stroke:rgba(255,255,255,.08)}.jb-rings .r1{stroke:rgba(255,255,255,.12)}.jb-rings .r2{stroke:rgba(255,255,255,.18)}
.jb-rings.on0 .r0,.jb-rings.on1 .r1,.jb-rings.on2 .r2{stroke:var(--jb-lime);stroke-width:26}
.jb-rings .core{fill:var(--jb-green);stroke:none}
.jb-rings text{fill:#fff;font-family:var(--jb-head-f);font-weight:900;font-size:13px;text-anchor:middle;letter-spacing:1px}
.jb-fronts{list-style:none;padding:0;margin:1rem 0}
.jb-front{display:flex;gap:1rem;padding:1rem;border-radius:16px;cursor:default;transition:background .3s}
.jb-front:hover,.jb-front.is-hot{background:rgba(255,255,255,.06)}
.jb-front-dot{flex:none;width:16px;height:16px;border-radius:50%;margin-top:.4rem;background:var(--jb-lime);box-shadow:0 0 0 5px rgba(61,220,132,.2)}
.jb-front small{text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--jb-lime);font-size:.75rem}
.jb-front h3{margin:.15rem 0 .25rem;font-size:1.2rem}
.jb-front p{margin:0;font-size:.95rem}
.jb-note-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:1rem 1.1rem;font-size:.92rem}
.jb-note-box b{color:#fff}

/* pricing */
.jb-pack{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--jb-line);border-radius:24px;overflow:hidden;box-shadow:0 12px 30px rgba(19,41,58,.06);padding-bottom:1.3rem}
.jb-pack-head{width:100%;padding:1.1rem 1rem;background:var(--jb-mint);border-bottom:1px solid var(--jb-line)}
.jb-pack-head span{font-size:.78rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--jb-green-dk)}
.jb-pack-head h3{font-size:1.7rem;margin:.1rem 0}
.jb-pack-head small{color:var(--jb-soft)}
.jb-pack-best{border:2px solid var(--jb-green);box-shadow:0 26px 54px rgba(26,143,85,.22)}
.jb-pack-best .jb-pack-head{background:var(--jb-green)}
.jb-pack-best .jb-pack-head span,.jb-pack-best .jb-pack-head h3,.jb-pack-best .jb-pack-head small{color:#fff}
.jb-pack > img:not(.jb-cards){width:100%;height:190px;object-fit:contain;padding:1rem}
.jb-pack-price s{display:block;color:var(--jb-soft);font-size:.9rem}
.jb-pack-price b{display:block;font-family:var(--jb-head-f);font-weight:900;font-size:3.2rem;color:var(--jb-slate);line-height:1}
.jb-pack-price span{font-size:.88rem;color:var(--jb-soft)}
.jb-pack ul{list-style:none;padding:0;margin:.9rem 1.2rem 1rem;text-align:left;font-size:.92rem;align-self:stretch}
.jb-pack li{padding:.25rem 0 .25rem 1.5rem;position:relative}
.jb-pack li::before{content:"\2713";position:absolute;left:0;color:var(--jb-green);font-weight:800}
.jb-pack .jb-btn{width:calc(100% - 2.4rem);margin-top:auto}
.jb-cards{display:block;width:100%;max-width:210px;height:auto;margin:.8rem auto 0}
@media (min-width:992px){.jb-pack-best{transform:translateY(-12px)}}

/* ingredients donuts */
.jb-ing{height:100%;background:#fff;border:1px solid var(--jb-line);border-radius:18px;padding:1.3rem 1.2rem;text-align:center}
.jb-donut{--p:0;width:96px;height:96px;margin:0 auto .8rem;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--jb-green) calc(var(--fill,0) * 1%),var(--jb-mint) 0);transition:--fill 1.4s}
.jb-donut span{width:72px;height:72px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--jb-head-f);font-weight:800;font-size:.86rem;color:var(--jb-slate);line-height:1.1}
.jb-ing p{margin:0;font-size:.9rem;color:var(--jb-soft)}
@property --fill{syntax:"<number>";inherits:false;initial-value:0}
.jb-ing.is-in .jb-donut{--fill:var(--p)}
.jb-seals{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.2rem;margin-top:2rem}
.jb-seal{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-weight:700;font-size:.85rem;color:var(--jb-slate)}
.jb-seal img{width:90px;height:90px;object-fit:contain}

/* reviews */
.jb-revs{display:grid;gap:1rem}
.jb-rev{display:flex;gap:1.3rem;align-items:center;background:#fff;border:1px solid var(--jb-line);border-radius:22px;padding:1rem 1.3rem 1rem 1rem;box-shadow:0 10px 24px rgba(19,41,58,.05)}
.jb-rev:nth-child(even){flex-direction:row-reverse;text-align:right}
.jb-rev img{flex:none;width:110px;height:110px;border-radius:18px;object-fit:cover}
.jb-rev p{margin:.25rem 0 .4rem;font-size:1.02rem;color:var(--jb-ink)}
.jb-rev:nth-child(even) p{margin-left:auto}
.jb-rev small{color:var(--jb-soft)}
.jb-stars{color:#F2B23B;letter-spacing:2px}
@media (max-width:575.98px){.jb-rev,.jb-rev:nth-child(even){flex-direction:column;text-align:center}.jb-rev:nth-child(even) p{margin-left:0}}

/* benefits */
.jb-bens{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.jb-bens li{display:flex;gap:.8rem;background:#fff;border-radius:16px;padding:1rem}
.jb-ben-check{flex:none;width:26px;height:26px;border-radius:50%;background:var(--jb-green);position:relative}
.jb-ben-check::after{content:"";position:absolute;left:9px;top:5px;width:7px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.jb-bens h3{margin:0 0 .15rem;font-size:1rem}
.jb-bens p{margin:0;font-size:.9rem;color:var(--jb-soft)}
@media (max-width:575.98px){.jb-bens{grid-template-columns:1fr}}
.jb-float{width:min(240px,70%);height:auto;animation:jbBob 5s ease-in-out infinite;filter:drop-shadow(0 22px 24px rgba(19,41,58,.2))}

/* different: switches */
.jb-diff{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem 2rem}
.jb-diff li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--jb-line)}
.jb-switch{flex:none;width:52px;height:30px;border-radius:999px;background:#CBD5DC;position:relative;transition:background .4s;margin-top:.15rem}
.jb-switch i{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.jb-diff li.is-in .jb-switch{background:var(--jb-green)}
.jb-diff li.is-in .jb-switch i{transform:translateX(22px)}
.jb-diff h3{margin:0 0 .15rem}
.jb-diff p{margin:0;font-size:.93rem;color:var(--jb-soft)}
@media (max-width:767.98px){.jb-diff{grid-template-columns:1fr}}

/* guarantee */
.jb-guar{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:center}
.jb-guar img{width:100%;height:auto;animation:jbBob 6s ease-in-out infinite}
.jb-link-light{color:var(--jb-lime)}
.jb-link-light:hover{color:#fff}
@media (max-width:767.98px){.jb-guar{grid-template-columns:1fr;text-align:center}.jb-guar img{max-width:170px;margin:0 auto}}

/* steps */
.jb-steps{list-style:none;padding:0;margin:1rem 0 0;counter-reset:s;position:relative}
.jb-steps::before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:2px;background:repeating-linear-gradient(var(--jb-green) 0 6px,transparent 6px 12px)}
.jb-steps li{position:relative;padding:.4rem 0 1rem 3.6rem}
.jb-steps span{position:absolute;left:0;top:.2rem;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--jb-green);color:var(--jb-green-dk);font-family:var(--jb-head-f);font-weight:900;display:grid;place-items:center}
.jb-steps h3{margin:0 0 .15rem}
.jb-steps p{margin:0;color:var(--jb-soft);font-size:.95rem}

/* faq */
.jb-faq .accordion-item{border:0;border-radius:14px!important;margin-bottom:.6rem;overflow:hidden;background:#fff}
.jb-faq .accordion-button{font-family:var(--jb-head-f);font-weight:700;color:var(--jb-ink);box-shadow:none;background:#fff}
.jb-faq .accordion-button:not(.collapsed){color:var(--jb-green-dk);background:#fff}
.jb-faq .accordion-button::after{background-color:var(--jb-mint);border-radius:50%;background-size:.9rem;background-position:center;width:28px;height:28px}
.jb-srcbox{background:#fff;border-radius:16px;padding:1.1rem 1.3rem;margin-top:1.4rem;font-size:.92rem}
.jb-srcbox ol{margin:.4rem 0 0;padding-left:1.2rem}

/* final */
.jb-final{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(120deg,var(--jb-green),var(--jb-green-dk))}
.jb-final-in{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:center;background:#fff;border-radius:30px;padding:clamp(1.4rem,4vw,2.6rem);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.jb-final-in img{width:100%;max-width:400px;height:auto;margin:0 auto;display:block}
.jb-final-price s{color:var(--jb-soft)}
.jb-final-price b{font-family:var(--jb-head-f);font-size:2.3rem;color:var(--jb-green-dk)}
@media (max-width:767.98px){.jb-final-in{grid-template-columns:1fr;text-align:center}}
.jb-final:not(:has(.jb-final-in)){text-align:center;color:#fff}

/* reveal */
.js .jb-up{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
.js .jb-up.is-in{opacity:1;transform:none}
@media (min-width:992px){.js .jb-pack-best.jb-up.is-in{transform:translateY(-12px)}}

/* footer */
.jb-foot{background:var(--jb-slate);color:#B9C9D6;text-align:center;padding:3rem 0 6rem;font-size:.93rem}
.jb-logo-light{color:#fff;margin-bottom:1rem}
.jb-logo-light:hover{color:#fff}
.jb-logo-light img{background:#fff;border-radius:10px;padding:2px}
.jb-logo-light b{color:var(--jb-lime)}
.jb-foot-nav{list-style:none;padding:0;margin:0 auto .55rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.3rem}
.jb-foot-nav a{color:#fff;text-decoration:none;font-weight:600}
.jb-foot-nav a:hover{color:var(--jb-lime)}
.jb-foot-nav2 a{color:#B9C9D6;font-weight:400}
.jb-foot hr{border-color:#244B68;opacity:1;max-width:900px;margin:1.5rem auto}
.jb-foot p{max-width:900px;margin:0 auto 1rem;font-size:.87rem;line-height:1.6}
.jb-foot strong{color:#fff}
.jb-foot p a{color:var(--jb-lime)}
.jb-foot-tag{font-family:var(--jb-head-f);font-weight:800;font-size:1.1rem;color:var(--jb-lime)!important;margin-top:1rem!important}

/* dock */
.jb-dock{position:fixed;left:0;right:0;bottom:0;z-index:1040;display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#fff;border-top:3px solid var(--jb-green);box-shadow:0 -10px 26px rgba(19,41,58,.12);padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom))}
.jb-dock span{font-weight:600;color:var(--jb-ink);line-height:1.15}
.jb-dock b{font-family:var(--jb-head-f);font-size:1.5rem;color:var(--jb-green)}
.jb-dock small{display:block;font-weight:400;color:var(--jb-soft);font-size:.78rem}
.jb-dock .jb-btn{flex:none}
@media (min-width:768px){.jb-dock{display:none}.jb-foot{padding-bottom:3rem}}

/* inner pages & blog */
.jb-pagehead{background:linear-gradient(180deg,var(--jb-mint),#fff);padding:2.4rem 0 2rem;border-bottom:1px solid var(--jb-line)}
.jb-pagehead h1{font-size:clamp(1.9rem,4.2vw,2.8rem);margin:0}
.jb-crumbs{list-style:none;padding:0;margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.3rem;font-size:.86rem;font-weight:600;color:var(--jb-soft)}
.jb-crumbs li+li::before{content:"\203A";margin-right:.35rem;color:var(--jb-green)}
.jb-byline{margin:.8rem 0 0;color:var(--jb-soft);font-size:.94rem}
.jb-doc{padding:2.4rem 0 3.6rem}
.jb-doc h2{font-size:clamp(1.5rem,3vw,1.95rem);margin-top:2.1rem}
.jb-doc h3{font-size:1.12rem;margin-top:1.2rem}
.jb-art-img{display:block;width:100%;max-width:280px;height:auto;margin:0 auto 1.6rem}
.jb-box{border-radius:16px;padding:1rem 1.3rem;margin-bottom:1.2rem;background:var(--jb-mint);border:1px solid var(--jb-line)}
.jb-box.jb-key{background:#fff;border:2px solid var(--jb-green)}
.jb-box-title{font-family:var(--jb-head-f);font-weight:800;font-size:1.05rem;margin-bottom:.35rem;color:var(--jb-ink)}
.jb-box ul,.jb-box ol{margin:0;padding-left:1.2rem}
.jb-inline{display:flex;align-items:center;gap:1.1rem;border-radius:20px;padding:1rem 1.3rem;margin:2rem 0;background:var(--jb-slate);color:#C7D6E2}
.jb-inline .jb-box-title{color:#fff}
.jb-inline img{width:80px;height:auto;flex:none}
.jb-inline p{margin:0 0 .6rem}
@media (max-width:575.98px){.jb-inline{flex-direction:column;text-align:center}}
.jb-pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--jb-line)}
.jb-pn a{text-decoration:none;color:var(--jb-ink);font-weight:600}
.jb-pn small{display:block;color:var(--jb-soft);font-weight:400}
.jb-pn a:last-child{text-align:right}
.jb-post{background:#fff;border:1px solid var(--jb-line);border-radius:20px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.jb-post:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(19,41,58,.1)}
.jb-post-img{background:var(--jb-mint);display:grid;place-items:center;padding:.9rem}
.jb-post-img img{width:100%;max-width:200px;height:150px;object-fit:contain}
.jb-post-body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.jb-post h2,.jb-post h3{font-size:1.12rem;margin-bottom:.4rem}
.jb-post h2 a,.jb-post h3 a{color:var(--jb-ink);text-decoration:none}
.jb-post h2 a:hover,.jb-post h3 a:hover{color:var(--jb-green)}
.jb-post p{font-size:.94rem;color:var(--jb-soft)}
.jb-read{font-weight:700;margin-top:auto}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .jb-up{opacity:1;transform:none}.jb-ing .jb-donut{--fill:var(--p)}}
html:not(.js) .jb-donut{--fill:var(--p)}
.jb-knee{left:-8%;width:92%}
.jb-tibia{transform-origin:200px 210px}
@keyframes jbFlex{0%,100%{transform:rotate(0)}45%,55%{transform:rotate(38deg)}}
.jb-hero-img{width:46%;right:-2%;bottom:2%}
.jb-chip.c1{left:0;top:58%}.jb-chip.c2{left:4%;top:10%}.jb-chip.c3{right:4%;top:20%}