/* App feature pages (workout log, workout and meal planner, AI coach). Builds on home.css. */
.app-breadcrumb {
  padding-top:22px
}
.app-breadcrumb ol {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  color:var(--muted)
}
.app-breadcrumb li+li:before {
  content:"/";
  margin-right:6px;
  color:#a3afc0
}
.app-breadcrumb a {
  text-decoration:none;
  color:#075bdc
}
.app-breadcrumb a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.app-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  padding-block:44px 80px
}
.app-hero h1 {
  font-size:clamp(38px,4.2vw,58px)
}
.app-hero-photo img {
  width:100%;
  height:460px;
  object-fit:cover;
  object-position:50% 30%;
  border-radius:28px;
  box-shadow:0 30px 60px -36px #21355266
}
.app-features {
  padding-block:70px 60px;
  border-top:1px solid var(--line)
}
.app-feature-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  list-style:none;
  margin:36px 0 0;
  padding:0
}
.app-feature-grid li {
  padding:26px 24px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff
}
.app-feature-grid h3 {
  font-size:17px
}
.app-feature-grid p {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  margin-top:10px
}
.app-screen {
  margin-bottom:10px
}
.app-screen .phone {
  width:255px;
  transform:rotate(-4deg)
}
.app-limits {
  padding-block:70px 40px
}
.app-limits ul {
  margin:24px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
  max-width:760px
}
.app-limits li {
  position:relative;
  padding:16px 20px 16px 50px;
  border-radius:16px;
  background:var(--pale);
  font-size:16px;
  line-height:1.7
}
.app-limits li:before {
  content:"i";
  position:absolute;
  left:18px;
  top:17px;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-size:13px;
  font-weight:700
}
.app-related {
  padding-block:10px 60px
}
.app-related ul {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  list-style:none;
  margin:22px 0 18px;
  padding:0
}
.app-related li a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  font-size:15px;
  font-weight:600
}
.app-related li a:hover {
  border-color:#a9c4ee;
  color:var(--blue)
}
.app-page .disclosure {
  margin:0 auto 40px
}
.app-steps {
  padding-block:60px 50px;
  border-top:1px solid var(--line)
}
.app-step-list {
  counter-reset:step;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  list-style:none;
  margin:30px 0 0;
  padding:0
}
.app-step-list li {
  counter-increment:step;
  position:relative;
  padding:24px 22px 24px 70px;
  border-radius:20px;
  background:var(--pale)
}
.app-step-list li:before {
  content:counter(step);
  position:absolute;
  left:22px;
  top:22px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-weight:700
}
.app-step-list h3 {
  font-size:17px
}
.app-step-list p {
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  margin-top:6px
}
.app-who {
  margin-top:24px;
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  max-width:760px
}
.app-who strong {
  color:var(--ink)
}
.app-extra {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding-block:60px
}
.app-extra-copy p {
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  margin-top:16px
}
.app-extra-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  list-style:none;
  margin:20px 0 0;
  padding:0
}
.app-extra-links a {
  color:#075bdc;
  font-weight:600;
  font-size:15px;
  text-underline-offset:4px
}
.app-extra-photo img {
  width:100%;
  height:400px;
  object-fit:cover;
  object-position:50% 35%;
  border-radius:24px;
  box-shadow:0 30px 60px -36px #21355266
}
picture {
  display:block
}
.app-hero-photo {
  position:relative;
  isolation:isolate
}
.app-hero-photo:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-26px -26px -26px 26px;
  border-radius:34px;
  background-image:radial-gradient(circle at 70% 30%,#0868ff33 0%,#0868ff00 60%),linear-gradient(#0868ff14 1px,transparent 1px),linear-gradient(90deg,#0868ff14 1px,transparent 1px);
  background-size:auto,28px 28px,28px 28px
}
.app-extra-flip .app-extra-photo {
  order:-1
}
.tech-band {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-block:10px 20px;
  color:#fff;
  background:radial-gradient(circle at 78% 40%,#0868ff59 0%,#0868ff00 45%),radial-gradient(circle at 10% 90%,#3ab6ff2e 0%,#3ab6ff00 40%),#070d1c
}
.tech-band:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 65% 50%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 65% 50%,#000 20%,transparent 80%)
}
.tech-band-inner {
  display:grid;
  grid-template-columns:.9fr 1.4fr;
  gap:50px;
  align-items:center;
  padding-block:70px
}
.tech-eyebrow {
  color:#8cc8ff
}
.tech-copy h2 {
  color:#fff
}
.tech-copy p:last-child {
  margin-top:16px;
  font-size:17px;
  line-height:1.8;
  color:#b4c2d9
}
.tech-flow {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:34px
}
.flow-inputs {
  display:grid;
  gap:12px;
  list-style:none;
  margin:0;
  padding:0
}
.flow-node {
  position:relative;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid #3ab6ff4d;
  background:#ffffff0a;
  font-size:15px;
  font-weight:600;
  color:#e6eefb
}
.flow-node:after {
  content:"";
  position:absolute;
  top:50%;
  right:-35px;
  width:34px;
  height:1px;
  background:linear-gradient(90deg,#3ab6ff99,#0868ff00)
}
.flow-core {
  position:relative;
  display:grid;
  place-items:center;
  width:104px;
  height:104px;
  border-radius:50%;
  background:radial-gradient(circle,#1f7bff 0%,#0a3fc2 70%);
  box-shadow:0 0 0 1px #3ab6ff66,0 0 50px #0868ffaa
}
.core-ring {
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid #3ab6ff55;
  animation:core-pulse 3.2s ease-in-out infinite
}
.core-plus {
  font-size:44px;
  font-weight:800;
  color:#fff;
  line-height:1
}
.flow-output {
  position:relative;
  display:grid;
  gap:6px;
  padding:18px 18px 18px 20px;
  border-radius:16px;
  border:1px solid #3ab6ff66;
  background:linear-gradient(135deg,#0868ff33,#ffffff08)
}
.flow-output:before {
  content:"";
  position:absolute;
  top:50%;
  left:-35px;
  width:34px;
  height:1px;
  background:linear-gradient(90deg,#0868ff00,#3ab6ffcc)
}
.flow-output strong {
  font-size:17px;
  color:#fff
}
.flow-output span {
  font-size:14px;
  line-height:1.6;
  color:#b4c2d9
}
@keyframes core-pulse {
  0%,100% {
    transform:scale(1);
    opacity:.8
  }
  50% {
    transform:scale(1.08);
    opacity:.3
  }
}
@media(max-width:1100px) {
  .tech-band-inner {
    grid-template-columns:1fr;
    gap:30px
  }
  .app-feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .app-hero {
    gap:36px
  }
}
@media(max-width:760px) {
  .app-extra-flip .app-extra-photo {
    order:0
  }
  .app-hero-photo:before {
    inset:-12px -12px -12px 12px
  }
  .tech-band-inner {
    padding-block:50px
  }
  .tech-flow {
    grid-template-columns:1fr;
    justify-items:center;
    gap:22px
  }
  .flow-inputs {
    width:100%;
    grid-template-columns:1fr 1fr
  }
  .flow-node {
    text-align:center
  }
  .flow-node:last-child:nth-child(odd) {
    grid-column:1/-1
  }
  .flow-node:after,.flow-output:before {
    display:none
  }
  .flow-output {
    width:100%;
    text-align:center
  }
  .app-step-list {
    grid-template-columns:1fr
  }
  .app-extra {
    grid-template-columns:1fr;
    gap:24px;
    padding-block:40px
  }
  .app-extra-photo img {
    height:280px
  }
  .app-hero {
    grid-template-columns:1fr;
    padding-block:26px 50px
  }
  .app-hero-photo {
    grid-row:1
  }
  .app-hero-photo img {
    height:300px
  }
  .app-features,.app-limits {
    padding-block:50px 30px
  }
  .app-screen .phone {
    width:230px
  }
}
@media(max-width:440px) {
  .app-feature-grid {
    grid-template-columns:1fr
  }
  .app-hero-photo img {
    height:240px
  }
  .app-limits li {
    font-size:15px
  }
}