.recommendations{position:relative;padding-top:10.2vw;padding-bottom:3vw;isolation:isolate;background:#f6f6f1}
.recommendations:before{content:"";position:absolute;inset:0 0 auto;height:14.7vw;background:#d5db51;z-index:-1}
.recommendations:after{content:"";position:absolute;left:0;right:0;top:16.6vw;height:3.2vw;background:#dbf9a4;z-index:-1}
.recommendations-title{position:absolute;top:2.9vw;right:5.3%;color:white}
.recommendations-title h2,.recommendations-title p{margin:0}
.rhythm-gallery{position:relative;display:grid;grid-template-columns:1fr 1fr .63fr 1fr;column-gap:1.5vw;row-gap:.9vw;margin-left:4%;width:82%}
.rhythm-card{position:relative;min-width:0;margin:0;border-radius:24px;box-shadow:4px 7px 17px #0005;aspect-ratio:1.59;isolation:isolate}
.rhythm-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.rhythm-card .rhythm-card-caption{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:26px 7px 15px;border-radius:0 0 24px 24px;background:linear-gradient(transparent,#ffffff40);color:#333}
.rhythm-card .rhythm-card-caption span{display:block}
.defense-card{grid-column:1;grid-row:1}.metabolism-card{grid-column:2;grid-row:1}.sleep-card{grid-column:1;grid-row:2}.stress-card{grid-column:2;grid-row:2}.recovery-card{grid-column:4;grid-row:1/3;aspect-ratio:auto}
.all-recommendations{position:relative;width:15.65vw;min-width:245px;min-height:84px;margin-top:3.3vw;margin-left:32.85vw}
.all-recommendations>[data-extra=recommendationsButtonZh]{padding-right:24px}
.recommendations-arrow{position:absolute;top:24px;right:42px;display:inline-block;pointer-events:none}
.our-system{position:relative;isolation:isolate;background:#dbf9a4;color:#486439;padding:5.4vw 8.1vw 4.4vw}
.system-section-label{display:flex;gap:30px;align-items:center;position:absolute;right:8.4%;top:2.8vw;font-style:italic}
.system-section-label h2,.system-intro h2,.system-intro p{margin:0}
.system-intro{padding-top:0}
.system-intro p{color:#91b56e;margin-top:3px}
.system-grid{display:grid;grid-template-columns:1fr 1fr;row-gap:4.4vw;margin-top:3vw;padding-block:2vw;position:relative}
.system-grid:before{content:"";position:absolute;top:0;left:1.3%;right:1.3%;height:6px;background:#486439}
.system-cell{position:relative;border-left:6px solid #486439;height:15vw;padding:0 2.5vw}
.system-cell:nth-child(even){border-right:6px solid #486439}
.system-cell:after{content:"";position:absolute;left:13px;right:13px;bottom:-2.2vw;height:6px;background:#486439}
.system-names p,.system-names h3{margin:0}.system-names h3{margin-top:2px}
.system-description{position:absolute;right:2.5vw;top:2.6vw;margin:0;max-width:63%;text-align:right}
.system-products{position:absolute;bottom:0;left:2.5vw;margin:0}
.system-link{position:absolute;right:2.5vw;bottom:0;background:transparent;color:inherit;padding:4px 0;display:flex;align-items:center;gap:10px;transition:color .2s}
.system-link:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.system-link:hover{color:#203e2a}.system-link:hover:after{transform:scaleX(1)}.system-link:active{opacity:.65}
body{background:#f6f6f1}
@media(min-width:761px) and (max-width:1250px){.recommendations{padding-top:145px;padding-bottom:45px}.recommendations:before{height:210px}.recommendations-title{top:25px}.rhythm-gallery{width:91%;grid-template-columns:1fr 1fr .15fr 1fr}.rhythm-card{border-radius:18px}.rhythm-card .rhythm-card-caption{padding-bottom:10px}.rhythm-card [data-type=cardEn]{font-size:14px}.all-recommendations{margin-top:40px;min-width:230px}.our-system{padding-top:110px}.system-section-label{top:30px}.system-cell{height:260px;padding:0 20px}.system-products{left:20px;bottom:45px}.system-description{position:static;max-width:100%;text-align:left;margin-top:10px}.system-link{right:20px}.system-names h3{font-size:38px}.system-grid{margin-top:35px}}
@media(max-width:760px){
  .recommendations{padding:132px 6% 42px}.recommendations:before{height:220px}.recommendations:after{top:260px;height:26px}
  .recommendations-title{top:32px;left:6%;right:6%}.recommendations-title h2{max-width:100%}
  .rhythm-gallery{width:100%;margin:0;grid-template-columns:1fr 1fr;gap:13px}
  .rhythm-card{border-radius:16px;box-shadow:2px 5px 12px #0004;aspect-ratio:1.15}
  .rhythm-card .rhythm-card-caption{padding:20px 3px 9px;border-radius:0 0 16px 16px}
  .defense-card{grid-column:1;grid-row:1}.metabolism-card{grid-column:2;grid-row:1}.sleep-card{grid-column:1;grid-row:2}.stress-card{grid-column:2;grid-row:2}
  .recovery-card{grid-column:1/3;grid-row:3;aspect-ratio:1.8}.recovery-card img{object-position:50% 62%}
  .all-recommendations{margin:30px auto 0;width:245px;min-height:78px}.recommendations-arrow{top:22px;right:40px}
  .our-system{padding:100px 6% 40px}.system-section-label{top:32px;left:6%;right:auto;gap:20px}
  .system-intro{padding:0}.system-intro h2{max-width:330px}.system-grid{grid-template-columns:1fr;margin-top:32px;padding-top:22px;row-gap:40px}
  .system-cell{height:245px;border-left-width:4px;border-right:4px solid #486439;padding:0 18px}
  .system-grid:before{height:4px;left:8px;right:8px}.system-cell:after{height:4px;left:8px;right:8px;bottom:-20px}
  .system-description{position:static;text-align:left;max-width:100%;margin-top:12px}
  .system-products{left:18px;bottom:42px}.system-link{right:18px;bottom:0}.system-empty{display:none}
  .recommendations .custom-text,.our-system .custom-text{left:6%;top:100px}
}

/* Each card and formula name keeps its own future product destination. */
.rhythm-card{display:block;border:0;padding:0;background:transparent;text-align:inherit;color:inherit;cursor:pointer;font:inherit}
.rhythm-card:focus-visible{outline:3px solid #285b37;outline-offset:5px}
.formula-product-links{display:flex;align-items:baseline;white-space:nowrap;gap:0}
.formula-product-link{display:inline-block;border:0;padding:0;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer}
.formula-product-link:hover{text-decoration:underline;text-underline-offset:.2em}
.formula-product-separator{white-space:pre}
.hero-preview-controls .field-grid{margin-top:12px}

/* Gentle feedback on the five product recommendation cards. */
.rhythm-card{transition:transform .26s ease,box-shadow .26s ease}
.rhythm-card .rhythm-card-caption{transition:color .22s ease}
.rhythm-card:focus-visible{transform:translateY(-6px);box-shadow:4px 12px 22px #0005}
.rhythm-card:focus-visible .rhythm-card-caption{color:#285b37}
@media(hover:hover) and (pointer:fine){
 .rhythm-card:hover{transform:translateY(-6px);box-shadow:4px 12px 22px #0005}
 .rhythm-card:hover .rhythm-card-caption{color:#285b37}
}
.drag-layout .rhythm-card:hover{transform:none}
@media(prefers-reduced-motion:reduce){.rhythm-card,.rhythm-card .rhythm-card-caption{transition:none}}