/* ==========================================================================
   FunctionAlps showcase — pages/home-3.css (use case tabs, how-it-works ticker,
   AI coach, app slider). Sizes and breakpoints from the Habitline replica
   home-3.css; the review masonry is removed (no reviews are shown).
   ========================================================================== */

.hero__title, .hero__sub p, .about__lead, .tile p, .about__text, .features__right p, .fcard__top h3, .fcard__top p,
.chip-pill p, .stacks__note, .remind__when, .remind__desc, .note__title, .note__desc, .upanel__glass > p,
.story__bottom > p, .ai__lead, .aicard__bottom > *, .app__note { text-wrap-style: balance; }

/* ---------- use case (tabs) ---------- */
.usecase__box { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 50px; padding: 100px; background: var(--c-white); border-radius: var(--r-card); overflow: clip; }
.usecase__pattern { position: absolute; inset: 0; z-index: 1; opacity: .6; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(46, 84, 56, .14) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 45%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 45%, transparent 75%); }
.usecase__head, .usecase__tabs, .usecase__foot { position: relative; z-index: 2; }
.usecase__head { width: 560px; max-width: 100%; }
.usecase__tabs { width: 1000px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.usecase__tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.utab { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--c-page); border-radius: var(--r-xs); font: var(--t-small); color: var(--c-ink-2); --bd: #EAE3D6; white-space: nowrap; }
.utab img { width: 18px; height: 18px; object-fit: contain; }
.utab.is-active { background: var(--c-line); color: var(--c-ink); --bd: #2E5438; }
.upanel { position: relative; width: 100%; height: 458px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 40px; }
.upanel[hidden] { display: none; }
.upanel__glass { position: relative; z-index: 3; width: 380px; display: flex; flex-direction: column; gap: 26px; padding: 28px; background: rgba(20, 38, 26, .55); border-radius: var(--r-card); box-shadow: var(--sh-glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: var(--c-white); }
.upanel__stat { display: flex; align-items: center; gap: 12px; }
.upanel__num { font: var(--t-h3l); flex: none; color: #E4B872; }
.upanel__stat p { flex: 1; font: var(--t-ui); font-weight: 400; color: var(--c-muted); }
.usecase__foot { width: 1000px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.usecase__foot > p { width: 100%; font: var(--t-xs); color: var(--c-ink-2); }
.usecase__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font: var(--t-xs); color: var(--fa-forest); }
@media (max-width: 1199.98px) {
  .usecase__box { padding: 50px 30px; }
  .usecase__tags { gap: 6px 16px; }
}
@media (max-width: 809.98px) {
  .usecase__box { padding: 40px 16px; gap: 30px; }
  .usecase__tabs { gap: 20px; }
  .usecase__tablist { gap: 8px; }
  .utab { padding: 8px 12px; font: var(--t-xs); gap: 6px; }
  .utab img { width: 15px; height: 15px; }
  .upanel { height: 440px; padding: 16px; }
  .upanel__glass { width: 100%; gap: 14px; padding: 18px; }
  .upanel__glass > p { font: var(--t-small); }
  .upanel__stat { flex-direction: column; align-items: flex-start; gap: 4px; }
  .usecase__tags { gap: 12px; }
}

/* ---------- how it works (Habitline social-proof ticker) ---------- */
.social { gap: 50px; }
.social__head { display: flex; align-items: flex-end; gap: 20px; }
.social__head .section-title { flex: 1; }
.social__left { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.social__right { width: 337px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.steps__dots { display: flex; gap: 6px; }
.steps__dots span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-white); box-shadow: var(--sh-card); font: 400 17px/1 var(--f-display); color: var(--fa-forest); }
.steps__dots span:last-child { background: var(--fa-forest); color: var(--c-white); }
.social__trusted { width: 100%; color: var(--c-ink-2); text-align: right; }
.social__ticker { height: 480px; --ticker-gap: 30px; }
.story { position: relative; width: 380px; height: 480px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 36px; }
.shade-story { background: linear-gradient(rgba(20, 38, 26, .85) 0%, rgba(20, 38, 26, .15) 45%, rgba(20, 38, 26, .92) 100%); }
.story__content { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.story__who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.story__n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fa-gold); font: 400 20px/1 var(--f-display); color: var(--c-white); }
.story__name { color: var(--c-white); }
.story__role { font: var(--t-xs); color: var(--c-muted); }
.story__bottom { display: flex; flex-direction: column; gap: 8px; color: var(--c-white); }
.story__stat { font: var(--t-h3l); }
.story__bottom > p { color: rgba(255, 255, 255, .85); }
@media (max-width: 1199.98px) { .social__right { width: 230px; } }
@media (max-width: 809.98px) {
  .social { gap: 30px; }
  .social__head { flex-direction: column; align-items: flex-start; }
  .social__right { width: 100%; align-items: flex-start; }
  .social__trusted { text-align: left; }
  .social__ticker { height: 400px; --ticker-gap: 20px; }
  .story { width: 300px; height: 400px; padding: 22px; }
}

/* ---------- AI coach (in development) ---------- */
.ai { padding-bottom: 200px; }
.ai__grid { display: grid; grid-template-columns: 450px 700px; column-gap: 50px; row-gap: 80px; }
.ai__left { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; padding: 90px 0; }
.ai__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ai__lead { color: var(--c-ink-2); }
.ai__dev { display: inline-flex; align-items: center; gap: 8px; }
.ai__dev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fa-gold); box-shadow: 0 0 0 4px rgba(196, 139, 53, .2); }
.ai__visual { position: relative; height: 524px; border-radius: var(--r-card); overflow: hidden; background: #EFE8DC; }
.ai__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; border-radius: var(--r-card); }
.ai__badge { position: absolute; z-index: 3; left: 20px; top: 20px; padding: 6px 12px; border-radius: 50px; background: rgba(255, 255, 255, .85); font: var(--t-xs); color: #8A5F1F; }
.ai__vectors { position: absolute; z-index: 2; left: 40px; top: 120px; width: 280px; display: flex; flex-direction: column; gap: 14px; }
.ai__sug { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: rgba(26, 26, 22, .12) 0 12px 24px; font: var(--t-xs); color: var(--c-ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ai__sug img { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.ai__sug:nth-child(2) { margin-left: 30px; } .ai__sug:nth-child(3) { margin-left: 10px; }
.ai__v4 { display: flex; justify-content: center; width: 280px; padding-right: 20px; }
.ai__v4 .badge { width: 54px; height: 54px; }
.ai__phone { position: absolute; z-index: 1; left: 390px; top: 60px; width: 280px; transform: rotate(-12deg); }
.ai__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.aicard { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 30px; }
.aicard__space { display: block; width: 100%; height: 60px; flex: none; }
.aicard__bottom { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.aicard__bottom h2 { font: var(--t-h3); }
.aicard__bottom p { color: var(--c-ink-2); }
@media (max-width: 1199.98px) {
  .ai { padding-bottom: 120px; }
  .ai__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ai__left { padding: 40px 0; }
  .ai__visual { height: 476px; }
  .ai__vectors { display: none; }
  .ai__phone { left: 50%; margin-left: -120px; top: 50px; width: 240px; }
  .ai__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809.98px) {
  .ai__grid { grid-template-columns: 1fr; }
  .ai__left { padding: 0; gap: 20px; }
  .ai__visual { height: 480px; }
  .ai__phone { margin-left: -105px; top: 50px; width: 210px; }
  .ai__cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .aicard { padding: 18px; }
  .aicard .badge { width: 44px; height: 44px; } .aicard .badge > img { width: 20px; height: 20px; }
  .aicard__space { height: 24px; }
}

/* ---------- the app, every day (Habitline video slider, images instead of videos) ---------- */
.reviews { width: 100%; padding-bottom: 200px; }
.reviews__container { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.reviews__head { width: 560px; max-width: 100%; }
.reviews__rating { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; color: var(--c-ink-2); }
.reviews__rating img { width: 18px; height: 18px; }
.vslider { position: relative; width: 100%; height: 730px; display: flex; justify-content: center; padding-bottom: 30px; overflow: clip; }
.vslider .fade { height: 830px; }
.vslider__stage { position: relative; width: 430px; height: 700px; padding-bottom: 80px; }
.vslider__track { display: flex; align-items: center; gap: 50px; height: 620px; will-change: transform; }
.vcard { flex: none; width: 430px; height: 620px; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.vcard.is-side { transform: scale(.8); }
.vcard.is-before { transform-origin: 100% 50%; } .vcard.is-after { transform-origin: 0 50%; }
.vcard__inner { position: relative; width: 100%; height: 100%; padding: 36px; border-radius: var(--r-card); overflow: hidden; background: linear-gradient(165deg, #2E5438 0%, #1F3A27 100%); }
.vcard__inner--gold { background: linear-gradient(165deg, #B98032 0%, #8E6124 100%); }
.vcard__inner--sage { background: linear-gradient(165deg, #6F8F5E 0%, #3E5B38 100%); }
.vcard__who { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; }
.vcard__avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.vcard__avatar img { width: 20px; height: 20px; }
.vcard__info { flex: 1; min-width: 0; display: flex; flex-direction: column; font: var(--t-xs); color: var(--c-white); }
.vcard__info p:first-child { font: 400 20px/1.2 var(--f-display); }
.vcard__role { color: var(--c-muted); }
.vcard__shot { position: absolute; z-index: 1; left: 50%; top: 120px; width: 290px; translate: -50% 0; }
.vslider__nav { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.vslider__nav button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 44px; background: var(--c-line); transition: background-color .2s; }
.vslider__nav button:hover { background: #DDD3C2; }
.vslider__nav img { width: 22px; height: 22px; }
.app__more { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.app__note { font: var(--t-xs); color: var(--c-stone); }
@media (max-width: 1199.98px) {
  .reviews { padding-bottom: 120px; }
  .vslider__track { gap: 30px; }
}
@media (max-width: 809.98px) {
  .reviews__container { gap: 30px; }
  .vslider { height: 560px; }
  .vslider .fade { width: 60px; height: 630px; }
  .vslider__stage { width: 300px; height: 540px; }
  .vslider__track { gap: 30px; height: 470px; }
  .vcard { width: 300px; height: 470px; }
  .vcard__inner { padding: 22px; }
  .vcard__shot { top: 96px; width: 220px; }
}