/* FITRICH v40 — continuous motion and current app presentation. */

/* Official FITRICH® logo ticker. Two identical groups make the loop seamless. */
.kinetic-line{
  height:58px!important;
  padding:0!important;
  overflow:hidden;
  background:var(--fitrich-black)!important;
  color:var(--fitrich-mint)!important;
  border-block:1px solid #2b312e!important;
}
.kinetic-line div{animation:none;gap:0;font:inherit;letter-spacing:normal}
.kinetic-line .kinetic-line-inner{
  width:max-content;height:100%;display:flex;align-items:center;
  animation:fitrichLogoMarquee 25s linear infinite;
  will-change:transform;
}
.kinetic-logo-group{height:100%;display:flex;align-items:center;gap:42px;padding-right:42px}
.kinetic-logo{width:176px;height:34px;display:grid;place-items:center;flex:0 0 auto}
.kinetic-logo svg{width:100%;height:100%;filter:brightness(0) saturate(100%) invert(88%) sepia(23%) saturate(700%) hue-rotate(112deg) brightness(99%) contrast(92%)}
.kinetic-diamond{width:9px;height:9px;display:grid;place-items:center;flex:0 0 auto;color:var(--fitrich-mint)!important;font:400 8px/1 Space Grotesk;font-style:normal;transform:rotate(45deg)}
@keyframes fitrichLogoMarquee{to{transform:translate3d(-50%,0,0)}}

/* Website products move continuously to the right. */
.product-rail{scroll-snap-type:none!important;scroll-behavior:auto!important;will-change:scroll-position}
.product-card[aria-hidden="true"] .product-hit{pointer-events:auto}

/* The second black information rail now matches the logo rail exactly. */
.store-assurance{
  height:58px!important;min-height:58px;padding:0!important;display:block!important;
  overflow:hidden;background:var(--fitrich-black)!important;color:#fff!important;
  border-block:1px solid #2b312e!important;
}
.store-assurance>.assurance-track{
  width:max-content;height:100%;padding:0!important;border:0!important;display:flex;
  animation:fitrichAssuranceMarquee 32s linear infinite;will-change:transform;
}
.assurance-group{
  min-width:max(100vw,860px);height:100%;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
}
.assurance-group>div{min-width:0;padding:0 28px;border-right:1px solid #303632}
.assurance-group>div:last-child{border-right:0}
.store-assurance .assurance-group b,.store-assurance .assurance-group span{display:block}
.store-assurance .assurance-group b{color:var(--fitrich-mint);font:800 7px/1 Space Grotesk;letter-spacing:.14em}
.store-assurance .assurance-group span{margin-top:5px;color:#bec7c1;font:500 7.5px/1.25 Manrope}
@keyframes fitrichAssuranceMarquee{to{transform:translate3d(-50%,0,0)}}

/* App copy: no full stops, tighter editorial rhythm, and an honest install QR. */
.app-copy h2{max-width:630px;line-height:.88!important}
.app-install-actions{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:stretch;margin-top:26px}
.app-install-actions>.button{align-self:stretch;min-width:205px;justify-content:center}
.app-install-qr{min-height:118px;padding:10px;display:grid;grid-template-columns:96px 1fr;gap:13px;align-items:center;border:1px solid rgba(11,13,12,.35);background:rgba(255,255,255,.58)}
.app-install-qr img{width:96px;height:96px;display:block;background:#fff}
.app-install-qr div{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.app-install-qr b{font:800 7px/1.25 Space Grotesk;letter-spacing:.14em}
.app-install-qr span{margin-top:8px;color:var(--fitrich-sage-deep);font:800 6px/1 Space Grotesk;letter-spacing:.13em}
.app-install-qr small{margin-top:8px;color:#68706b;font:500 7.5px/1.4 Manrope}

/* The website phone mockups now mirror the current light FITRICH app. */
.phone-home-current,.phone-detail-current{
  padding:34px 13px 14px!important;background:#f2f3ef!important;color:var(--fitrich-black)!important;
  filter:none!important;border-color:#222826!important;box-shadow:0 34px 80px rgba(11,13,12,.24),inset 0 0 0 1px #4e5652!important;
}
.phone-current-header{height:51px;margin:-2px -13px 13px;padding:8px 11px;display:grid;grid-template-columns:29px 1fr auto;gap:8px;align-items:center;background:#080a09;color:#fff;border-block:1px solid #303733}
.phone-current-header>b{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--fitrich-mint);color:var(--fitrich-mint);font:800 11px Space Grotesk}
.phone-current-header>strong{font:800 9px/1 Space Grotesk;letter-spacing:.08em}.phone-current-header>strong small{display:block;margin-top:4px;color:var(--fitrich-mint);font:700 3px Space Grotesk;letter-spacing:.22em}
.phone-current-header>i{color:var(--fitrich-mint);font:700 4.5px Space Grotesk;letter-spacing:.1em;font-style:normal}
.phone-feedback-label,.phone-detail-kicker{margin:0 0 8px!important;color:var(--fitrich-sage-deep)!important;font:800 5px Space Grotesk!important;letter-spacing:.14em!important}
.phone-story-row{display:flex;justify-content:space-between;margin-bottom:16px}.phone-story-row span{width:35px;height:35px;display:grid;place-items:center;border:3px solid #d4d8d5;outline:1px solid var(--fitrich-mint);border-radius:50%;background:#171b19;color:#fff;font:800 5px Space Grotesk}.phone-story-row span:first-child{background:var(--fitrich-mint);color:#08100d}
.phone-current-title{padding:10px 0 11px;border-top:1px solid #9fa6a2}.phone-current-title small{display:block;color:var(--fitrich-sage-deep);font:800 4.5px Space Grotesk;letter-spacing:.13em}.phone-current-title strong{display:block;margin-top:7px;font:650 18px/.9 Space Grotesk;letter-spacing:-.05em}
.phone-product-flow{display:grid;grid-template-columns:1fr 1fr;gap:5px}.phone-product-flow article{min-height:194px;padding:8px;display:flex;flex-direction:column;border:1px solid #a9afab;background:#e5e8e4}.phone-product-flow article>i{color:var(--fitrich-sage-deep);font:800 4px Space Grotesk;font-style:normal;letter-spacing:.08em}.phone-product-flow article>strong{margin-top:auto;font:700 7px Space Grotesk}.mini-pack{width:43px;height:78px;margin:20px auto 10px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:5px;background:#111613;color:#fff;font:800 4px Space Grotesk;letter-spacing:.08em;box-shadow:0 13px 19px rgba(11,13,12,.2)}.mini-pack.jar{width:68px;height:45px;margin-top:36px}.mini-pack small{margin-top:7px;font:700 3px Space Grotesk;letter-spacing:.04em}
.phone-detail-kicker{margin-top:3px!important}.phone-detail-pack{width:78px;height:148px;margin:14px auto 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #39413d;border-radius:9px;background:linear-gradient(145deg,#222a26,#080a09);color:#fff;box-shadow:0 19px 28px rgba(11,13,12,.24)}.phone-detail-pack>b{font:800 5px Space Grotesk;letter-spacing:.14em}.phone-detail-pack>span{margin:14px 0;text-align:center;font:800 7px/1.15 Space Grotesk;letter-spacing:.08em}.phone-detail-pack>small{color:#89938e;font:700 4px Space Grotesk;letter-spacing:.1em}
.phone-detail-copy{padding-top:10px;border-top:1px solid #9fa6a2;display:flex;flex-direction:column}.phone-detail-copy>small{color:var(--fitrich-sage-deep);font:800 4.5px Space Grotesk;letter-spacing:.1em}.phone-detail-copy>strong{margin-top:6px;font:700 14px/.95 Space Grotesk;letter-spacing:-.04em}.phone-detail-copy>p{margin:7px 0!important;color:#69716d!important;font:500 6px/1.35 Manrope!important;letter-spacing:0!important}.phone-detail-copy>b{font:800 9px Space Grotesk}.phone-add{height:32px;margin-top:10px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;border:0;background:var(--fitrich-mint);color:var(--fitrich-black);font:800 5.5px Space Grotesk;letter-spacing:.12em}
.phone-home-current .phone-nav,.phone-detail-current .phone-nav{left:13px;right:13px;bottom:11px;color:#6b746f;border-top-color:#a4aba7}.phone-home-current .phone-nav b,.phone-detail-current .phone-nav b{color:var(--fitrich-sage-deep)}

@media(max-width:1050px){
  .app-install-actions{grid-template-columns:1fr}.app-install-actions>.button{min-height:48px}
  .app-install-qr{grid-template-columns:86px 1fr}.app-install-qr img{width:86px;height:86px}
}

@media(max-width:760px){
  .kinetic-line,.store-assurance{height:50px!important;min-height:50px!important}
  .kinetic-logo-group{gap:28px;padding-right:28px}.kinetic-logo{width:142px;height:27px}
  .assurance-group{min-width:760px}.assurance-group>div{padding-inline:20px}
  .app-preview{gap:18px}.app-copy h2{font-size:52px!important;line-height:.88!important}
  .app-install-actions{margin-top:22px}.app-install-qr{grid-template-columns:88px 1fr}.app-install-qr img{width:88px;height:88px}
  .phone-stage{height:565px!important;margin-top:24px!important}.phone-home-current,.phone-detail-current{width:220px!important;height:500px!important}
  .phone-current-header{margin-inline:-13px}.phone-product-flow article{min-height:174px}.mini-pack{margin-top:13px}.mini-pack.jar{margin-top:26px}
}

@media(prefers-reduced-motion:reduce){
  .kinetic-line .kinetic-line-inner,.store-assurance>.assurance-track{animation-play-state:paused!important}
}
