/* App features — horizontal auto-sliding showcase */
.app-features{
  --feature-accent:#008944;
  position:relative;
  background:var(--white);
  padding-top:clamp(20px,6vh,72px);
  padding-bottom:clamp(24px,3vh,36px);
}
@media(max-width:767px){
  #app-features .wrap{padding:0 16px}
}

/* Tighten the handoff into the coaches section right after this one — only
   here, so the coaches partial's spacing on other pages is untouched. */
#app-features + #coaches{padding-top:clamp(24px,3vh,36px)}

/* ── Intro — center-aligned ── */
.app-features-intro{
  position:relative;z-index:1;text-align:center;max-width:640px;margin:0 auto clamp(24px,5vh,56px);
}
.app-features-heading{
  font-size:var(--text-h2);font-weight:800;
  line-height:var(--text-h2-lh);letter-spacing:-.04em;margin-bottom:16px;
  text-transform:capitalize;
  color:var(--ink);
}
.app-features-heading em{font-style:normal;color:var(--green-800)}
.app-features-intro p{
  color:var(--muted);font-size:var(--text-body-lg);
  line-height:var(--text-body-lg-lh);margin:0;letter-spacing:-.01em;
}
@media(max-width:767px){
  .app-features-intro{text-align:center;margin:0 auto 16px}
}

/* ── Horizontal slider — full-bleed, edge-to-edge, spring-eased motion ── */
.app-features-slider{position:relative;overflow:hidden;padding:8px 0}
.app-features-track{display:flex;transition:transform .85s cubic-bezier(.19,1,.22,1)}
@media(prefers-reduced-motion:reduce){.app-features-track{transition:none}}
.app-features-slide{
  flex:0 0 100%;min-width:0;padding:4px;
  opacity:.25;transform:scale(.92);
  transition:opacity .85s cubic-bezier(.19,1,.22,1),transform .85s cubic-bezier(.19,1,.22,1);
}
.app-features-slide.is-active{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.app-features-slide{transition:none;opacity:1;transform:none}}

/* Staggered entrance for the active slide's content — replays on every slide change */
@keyframes featureFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes featureZoomIn{from{opacity:0;transform:scale(.8) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes featureFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes featureGlowPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.12)}}

.app-features-slide.is-active .app-features-title{animation:featureFadeUp .65s cubic-bezier(.19,1,.22,1) both}
.app-features-slide.is-active .app-features-desc{animation:featureFadeUp .65s cubic-bezier(.19,1,.22,1) .1s both}
.app-features-slide.is-active .app-features-comments-wrap{animation:featureFadeUp .65s cubic-bezier(.19,1,.22,1) .2s both}
.app-features-slide.is-active .app-features-hero-img{animation:featureZoomIn .85s cubic-bezier(.19,1,.22,1) .05s both}
.app-features-slide.is-active .app-features-visual{animation:featureFloat 4.5s ease-in-out .9s infinite}
.app-features-slide.is-active .app-features-visual::before{animation:featureGlowPulse 3.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .app-features-slide.is-active .app-features-title,
  .app-features-slide.is-active .app-features-desc,
  .app-features-slide.is-active .app-features-comments-wrap,
  .app-features-slide.is-active .app-features-hero-img,
  .app-features-slide.is-active .app-features-visual,
  .app-features-slide.is-active .app-features-visual::before{animation:none}
}

/* Opt-out modifiers for individual slides */
.app-features-slide--no-anim.is-active .app-features-hero-img,
.app-features-slide--no-anim.is-active .app-features-visual,
.app-features-slide--no-anim.is-active .app-features-visual::before{animation:none}
.app-features-slide--flat-bg .app-features-visual::before,
.app-features-slide--flat-bg .app-features-visual::after{display:none}
.app-features-slide--flat-bg .app-features-hero-img{filter:none}

/* Wide composite visual (phone + companion graphic side by side) —
   give it a larger, landscape-shaped box instead of the narrow portrait cap. */
.app-features-slide--wide-visual .app-features-hero-img{
  max-width:min(100%,420px);
  max-height:100%;
  width:auto;
}
@media(min-width:900px){
  .app-features-slide--wide-visual .app-features-hero-img{max-width:clamp(480px,55vw,820px)}
  .app-features-slide--wide-visual .app-features-slide-grid{grid-template-columns:.85fr 1.15fr}
}

.app-features-slide-grid{
  display:grid;grid-template-columns:1fr;row-gap:8px;column-gap:16px;
  grid-template-areas:"text" "visual" "comments";
}
@media(min-width:600px){.app-features-slide-grid{gap:clamp(10px,0vw,10px)}}
@media(min-width:1280px){
  .app-features-slide-grid{max-width:1400px}
}
@media(min-width:900px){
  .app-features-slide-grid{
    grid-template-columns:1.1fr .9fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"text visual" "comments visual";
    align-items:center;
  }
}
.app-features-text{grid-area:text}
.app-features-visual{grid-area:visual}
.app-features-comments-wrap{grid-area:comments}

/* ── Side arrow buttons — same circular pill style as the hero slider ── */
.app-features-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--ink);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.app-features-arrow:hover{background:var(--bg);box-shadow:var(--shadow-md);transform:translateY(-50%) scale(1.06)}
.app-features-arrow--prev{left:16px}
.app-features-arrow--next{right:16px}
.app-features-arrow:disabled,.app-features-arrow:disabled:hover{opacity:.4;cursor:not-allowed;background:var(--white);box-shadow:none;transform:translateY(-50%)}
@media(min-width:1024px){.app-features-arrow--prev{left:32px}.app-features-arrow--next{right:32px}}
@media(max-width:640px){.app-features-arrow{display:none}}

.app-features-text,.app-features-visual,.app-features-comments-wrap{position:relative;min-width:0}

.app-features-title{
  font-size:var(--text-h4);font-weight:800;
  line-height:var(--text-h4-lh);letter-spacing:-.035em;
  margin-bottom:18px;max-width:100%;
  text-transform:capitalize;
  color:var(--ink);
}
.app-features-title em{font-style:normal;color:var(--green-800)}
.app-features-title::after{
  content:'';display:block;width:min(120px,40%);height:3px;margin-top:6px;
  background:linear-gradient(90deg,var(--feature-accent),transparent);
  border-radius:2px;
}
.app-features-desc{
  color:var(--muted);font-size:var(--text-body);line-height:var(--text-body-lh);
  margin-bottom:28px;max-width:500px;
}
@media(max-width:899px){.app-features-desc{margin-bottom:0}}

/* ── Comment cards ── */
.app-features-comments{display:flex;flex-direction:column;gap:12px}
.app-features-comment{
  display:flex;gap:12px;padding:14px 16px;
  background:var(--white);
  border:1px solid var(--border);
  border-left:4px solid var(--feature-accent);
  border-radius:var(--r-lg);
  box-shadow:0 4px 14px rgba(42,42,42,.06);
}
.app-features-comment-avatar{
  width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--placeholder);
  box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--feature-accent);
}
.app-features-comment-avatar img{width:100%;height:100%;object-fit:cover}
.app-features-comment-body{min-width:0}
.app-features-comment-name{font-size:15px;font-weight:700;margin-bottom:4px}
.app-features-comment-text{font-size:15px;color:var(--muted);line-height:1.6}
.app-features-quote-mark{
  font-size:1.4em;line-height:0;font-weight:800;
  color:color-mix(in srgb,var(--feature-accent) 65%,var(--muted));
  vertical-align:-.14em;
}
.app-features-quote-mark:first-child{margin-right:2px}
.app-features-quote-mark:last-child{margin-left:2px}

/* ── Phone visual ── */
.app-features-visual{
  display:flex;align-items:center;justify-content:center;
  height:auto;
  padding:0;
}
@media(min-width:900px){
  .app-features-visual{height:clamp(480px,64vh,680px)}
}
.app-features-visual::before{
  content:'';
  position:absolute;z-index:0;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(95%,500px);height:min(85%,520px);
  border-radius:50%;filter:blur(60px);
  background:radial-gradient(circle,color-mix(in srgb,var(--feature-accent) 40%,transparent) 0%,transparent 68%);
  opacity:.55;transition:background .6s ease;
  pointer-events:none;
}
.app-features-visual::after{
  content:'';position:absolute;bottom:-4px;left:50%;
  transform:translateX(-50%);
  width:clamp(160px,19vw,230px);height:24px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.26) 0%,rgba(0,0,0,.08) 48%,transparent 72%);
  pointer-events:none;
}
.app-features-visual picture{display:contents}
.app-features-hero-img{
  position:relative;z-index:1;
  width:auto;max-width:clamp(370px,54vw,540px);height:auto;max-height:100%;
  object-fit:contain;display:block;margin:0 auto;
  filter:
    drop-shadow(0 44px 66px rgba(0,0,0,.3))
    drop-shadow(0 18px 30px rgba(0,0,0,.17))
    drop-shadow(0 5px 10px rgba(0,0,0,.11));
}

/* ── Progress dots — Instagram-story style: the active one fills over the autoplay duration ── */
.app-features-dots{
  display:flex;justify-content:center;gap:8px;margin-top:clamp(8px,1.5vh,16px);
}
.app-features-dot{
  position:relative;overflow:hidden;
  width:40px;height:5px;border-radius:3px;padding:0;border:none;
  background:var(--border);cursor:pointer;
  transition:background .2s,transform .15s;
}
.app-features-dot:hover{transform:scaleY(1.4)}
.app-features-dot::after{
  content:'';position:absolute;inset:0;
  background:var(--feature-accent);border-radius:inherit;
  transform:scaleX(0);transform-origin:left;
}
.app-features-dot.is-complete::after{transform:scaleX(1);transition:none}
.app-features-dot.is-active::after{animation:featureDotFill var(--autoplay-ms,5000ms) linear forwards}
.app-features-slider:hover .app-features-dot.is-active::after,
.app-features-slider:focus-within .app-features-dot.is-active::after{animation-play-state:paused}
@keyframes featureDotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.app-features-dot.is-active::after{animation:none;transform:scaleX(1)}}

/* ── Narrow screens ──
   Full-bleed peeking carousel: cancels the .wrap side padding so the row
   runs edge-to-edge, then re-adds it as scroll padding so the first card
   lines up with the heading above and the next card peeks in cleanly. */
@media(max-width:767px){
  .app-features-title{text-align:center}
  .app-features-title::after{margin-left:auto;margin-right:auto}
  .app-features-desc{text-align:center;margin-left:auto;margin-right:auto}
  .app-features-comments-wrap{margin:0 -16px}
  .app-features-comments{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0;padding:0 16px 6px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 20px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 20px),transparent 100%);
  }
  .app-features-comments::-webkit-scrollbar{display:none}
  .app-features-comment{flex:0 0 84%;scroll-snap-align:start}
}
@media(max-width:399px){
  .app-features-comment{flex:0 0 88%}
}

@media(min-width:1024px){
  .app-features-title{white-space:nowrap}
}