/* Art direction for real product screenshots. */
.product-stories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:60px; }
.product-story { position:relative; isolation:isolate; height:650px; margin:0; overflow:hidden; border:1px solid #3b3834; border-radius:26px; background:#1a1917; }
.product-story::after { content:""; position:absolute; inset:65% 0 0; background:linear-gradient(transparent,#171614); pointer-events:none; z-index:3; }
.product-story figcaption { position:relative; z-index:4; padding:30px 28px; }
.story-index { color:#b6afa6; font-size:9px; letter-spacing:.16em; font-weight:600; }
.product-story h3 { margin:20px 0 0; font-size:clamp(30px,3.1vw,44px); line-height:1.04; letter-spacing:-.055em; font-weight:600; }
.product-story h3 em { color:#f1ede6; font-style:normal; }
.story-watermark { position:absolute; font-size:280px; line-height:1; font-weight:700; letter-spacing:-.09em; color:#ffffff08; left:2px; top:158px; }
.story-phone { position:absolute; z-index:2; width:83%; padding:6px; border:1px solid #827d77; border-radius:37px; background:linear-gradient(120deg,#ddd6cc,#77716b 2%,#161514 5%,#080808 95%,#948e86); box-shadow:16px 28px 40px #0009,inset 0 0 0 2px #ffffff20; overflow:hidden; }
.story-phone img { display:block; width:100%; height:auto; border-radius:30px; }
.story-strength { background:radial-gradient(ellipse at 5% 75%,#77716b20,transparent 65%),#1b1917; }
.story-strength .story-phone { top:182px; left:13%; transform:rotate(-5deg); }
.story-strength .story-phone img { margin-top:-24px; }
.story-progress { background:radial-gradient(ellipse at 100% 65%,#77716b20,transparent 65%),#191817; }
.story-progress .story-phone { width:77%; left:19%; top:225px; transform:rotate(8deg); }
.story-history { background:radial-gradient(ellipse at 50% 65%,#77716b20,transparent 65%),#1b1a18; }
.story-history .story-phone { top:225px; left:10%; transform:rotate(-5deg); }
.story-proof { display:flex; align-items:center; gap:9px; position:absolute; z-index:4; left:24px; right:24px; bottom:27px; font-size:11px; color:#e8e1d7; }
.proof-dot { width:6px; height:6px; border-radius:50%; background:#ff6b2c; box-shadow:0 0 15px #ff6b2c66; }
.graph-detail { position:absolute; z-index:5; bottom:29px; left:20px; right:20px; height:193px; padding:17px 18px 0; border:1px solid #605044; border-radius:18px; background:#191715; box-shadow:0 20px 40px #0009; transform:rotate(-3deg); overflow:hidden; }
.graph-detail>span { color:#bfb5aa; font-size:8px; letter-spacing:.13em; }
.graph-detail>strong { display:block; font-size:38px; line-height:1.2; letter-spacing:-.05em; color:#f7f5ef; }
.graph-detail small { font-size:20px; font-weight:500; }
.graph-detail b { float:right; color:#c9beb1; font-size:28px; }
.graph-window { position:relative; height:108px; overflow:hidden; margin:0 -8px; }
.graph-window img { width:100%; height:auto; position:absolute; top:0; transform:translateY(-74%); }
.history-detail { position:absolute; z-index:5; bottom:28px; left:22px; right:22px; display:flex; gap:15px; align-items:center; padding:17px 19px; border:1px solid #645447; border-radius:17px; background:#211f1c; box-shadow:0 15px 30px #0007; transform:rotate(3deg); }
.history-detail>strong { font-size:62px; line-height:1; color:#f1ede6; font-weight:600; letter-spacing:-.07em; }
.history-detail>span { font-size:8px; letter-spacing:.07em; line-height:1.8; color:#ede5dc; }
.history-detail b { font-size:9px; font-weight:400; letter-spacing:0; color:#b8aea2; }
.muscle-showcase { min-height:760px; background:radial-gradient(ellipse at 70% 70%,#77716b20,transparent 70%),#1b1917; }
.muscle-art-label { position:absolute; top:35px; left:30px; z-index:3; font-size:32px; font-weight:600; letter-spacing:-.04em; line-height:1.03; }
.muscle-art-label span { color:#bcb5ac; }
.muscle-showcase .device-feature { position:absolute; top:158px; width:350px; max-height:none; transform:rotate(8deg); left:calc(50% - 165px); border-color:#82776d; }
.muscle-showcase .callout-score { top:auto; bottom:88px; left:22px; padding:19px 22px; }
.muscle-showcase .callout-score strong { font-size:52px; line-height:1; }
.muscle-showcase .callout-focus { display:none; }
.muscle-showcase .profile-pulse { bottom:23px; right:20px; }
.hero-product .device-hero { border-color:#776d61; }
@media(min-width:701px) and (max-width:1000px) { .product-stories { gap:12px; } .product-story { height:580px; } .product-story figcaption { padding:24px 18px; } .graph-detail { left:12px; right:12px; } .history-detail { left:12px; right:12px; padding:12px; gap:8px; } .history-detail>strong { font-size:44px; } }
@media(max-width:700px) { .product-intro { display:block; } .product-stories { grid-template-columns:1fr; gap:22px; margin-top:34px; } .product-story { height:620px; } .product-story figcaption { padding:28px; } .product-story h3 { font-size:43px; } .story-phone { max-width:310px; } .story-progress .story-phone { width:77%; } .muscle-showcase { width:100%; margin-left:0; min-height:690px; } .muscle-showcase .device-feature { width:300px; left:calc(50% - 140px); top:162px; } .muscle-art-label { font-size:30px; left:24px; } .muscle-showcase .callout-score { display:grid; top:auto; bottom:90px; left:15px; } .muscle-showcase .callout-score strong { font-size:42px; } }

/* Keep the product legible: upright screens, quiet frames, no overlapping UI. */
.product-story { height:auto; display:flex; flex-direction:column; padding-bottom:28px; background:radial-gradient(ellipse at 50% 80%,#ff6b2c12,transparent 70%),#191817; }
.product-story::after, .story-watermark, .graph-detail, .history-detail, .story-proof { display:none; }
.product-story figcaption { min-height:178px; }
.story-index { color:#ff8b55; }
.product-story .story-phone { position:relative; inset:auto; transform:none; width:calc(100% - 48px); max-width:280px; margin:auto auto 0; padding:5px; border:1px solid #62584f; border-radius:32px; background:#111; box-shadow:0 18px 35px #0005,inset 0 0 0 1px #ffffff12; }
.product-story .story-phone img { margin:0; border-radius:26px; }
.muscle-showcase { min-height:0; padding:34px 24px; gap:28px; background:radial-gradient(ellipse at 50% 55%,#ff6b2c18,transparent 70%),#191817; }
.muscle-art-label { position:static; justify-self:start; font-size:24px; }
.muscle-showcase .device-feature { position:relative; inset:auto; transform:none; width:min(330px,100%); max-height:none; margin:0 auto; border-color:#62584f; box-shadow:0 20px 45px #0005; }
.muscle-showcase .callout-score, .muscle-showcase .callout-focus, .muscle-showcase .profile-pulse { display:none; }
.hero-product .device-hero { transform:none; animation:none; max-height:none; border-color:#62584f; }
.competition-visual { display:flex; align-items:center; justify-content:center; padding:38px 24px; }
.competition-visual .competition-device-season { position:relative; inset:auto; transform:none; width:min(310px,100%); max-height:none; margin:auto; border-color:#62584f; }
.competition-device-feed, .rival-pulse { display:none; }
@media (min-width:701px) and (max-width:1000px) {
  .product-story figcaption { min-height:158px; }
  .product-story .story-phone { width:calc(100% - 28px); border-radius:26px; }
  .product-story .story-phone img { border-radius:20px; }
}
@media (max-width:700px) {
  .product-story figcaption { min-height:0; padding:26px 26px 30px; }
  .product-story h3 { font-size:38px; margin-top:16px; }
  .product-story .story-phone { width:calc(100% - 48px); max-width:290px; }
  .muscle-showcase { min-height:0; padding:26px 20px; gap:24px; }
  .muscle-showcase .device-feature { width:min(300px,100%); }
  .hero-product { min-height:0; padding-block:24px; }
  .hero-product::after { display:none; }
  .hero-product .device-hero { width:min(290px,calc(100vw - 88px)); }
  .competition-visual { min-height:0; padding:28px 20px; }
  .competition-visual .competition-device-season { width:min(290px,100%); }
}
/* Decorative glows and the angled ribbon must not widen the page. */
body { overflow-x:clip; }
.hero-product .floating-chip { display:none; }
html { overflow-x:clip; }
.page-glow { max-width:100%; right:0; }

/* Give the install action a bright surface and visible depth. */
.header-cta, .hero .primary-action, .final-cta-action {
  background:#fff5e9;
  color:#18120e;
  border:1px solid #fffaf3;
  box-shadow:0 8px 20px #0004, 0 2px 4px #0003, 0 0 26px #ffb4771a;
  transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.hero .primary-action, .final-cta-action {
  min-height:64px;
  padding:16px 22px;
  gap:18px;
  font-size:16px;
  line-height:1.35;
  font-weight:850;
}
.header-cta { min-height:44px; }
.header-cta:hover, .hero .primary-action:hover, .final-cta-action:hover {
  background:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 28px #0005, 0 3px 6px #0003, 0 0 30px #ffb47726;
}
.header-cta:focus-visible, .hero .primary-action:focus-visible, .final-cta-action:focus-visible {
  outline:3px solid #fff;
  outline-offset:5px;
}
.header-cta:active, .hero .primary-action:active, .final-cta-action:active { transform:translateY(0); }
@media (prefers-reduced-motion:reduce) {
  .header-cta, .hero .primary-action, .final-cta-action { transition:none; }
  .header-cta:hover, .hero .primary-action:hover, .final-cta-action:hover { transform:none; }
}

/* Balance supporting type against the headlines and keep tablet screens readable. */
.story-index { font-size:12px; letter-spacing:.12em; }
.product-story h3 { font-size:clamp(30px,2.8vw,38px); line-height:1.1; }
.feature li strong { font-size:15px; }
.feature li small { font-size:13px; line-height:1.5; }
.competition-stats span { font-size:12px; line-height:1.4; }
.install-note { font-size:12px; line-height:1.5; }
.feature-copy > p:not(.eyebrow), .competition-copy > p, .final-cta > p:not(.eyebrow) { font-size:16px; line-height:1.6; }
/* Reserve the same caption space so all three screenshots start together. */
.product-story figcaption { min-height:220px; flex:1; }
.product-story .story-phone { flex-shrink:0; margin:0 auto; }
@media (min-width:701px) and (max-width:1000px) {
  .product-stories { grid-template-columns:1fr; gap:24px; }
  .product-story { flex-direction:row; align-items:center; padding:28px; gap:28px; }
  .product-story figcaption { flex:1; min-width:0; min-height:0; padding:0; }
  .product-story h3 { font-size:36px; }
  .product-story .story-phone { flex:0 0 280px; width:280px; margin:0; }
}
@media (max-width:700px) {
  .product-story figcaption { min-height:210px; flex:none; }
  .product-story h3 { font-size:34px; }
  .hero .eyebrow { font-size:12px; }
  .header-cta, .hero .text-action { font-size:12px; }
  .hero-dek { font-size:16px; }
  .competition-stats div { padding:14px 8px; }
}