/* ==========================================================================
   FunctionAlps showcase — components.css
   From the Habitline replica components.css: motion initial states, ticker,
   rolling digits, FAQ, Counter and CTA. Changes: brand colours; the counter's
   video band is the mito artwork; Habitline's cloud PNGs are soft CSS shapes
   (.soft); the CTA phone is a CSS phone frame; the QR code joins the TestFlight beta.
   ========================================================================== */

/* ---------- motion: hidden initial states only when JS runs (html.js) ---------- */
html.js [data-appear]:not(.is-in), html.js [data-reveal]:not(.is-in) { opacity: 0; }
html.motion-off [data-appear], html.motion-off [data-reveal], html.motion-off [data-trigger] { opacity: 1 !important; transform: none !important; }
html.js:not(.motion-off) [data-accordion]:not(.is-init) [data-accordion-item]:not(.is-open) [data-accordion-panel],
html.js:not(.motion-off) [data-tabs]:not(.is-init) [data-tab-panel] ~ [data-tab-panel] { display: none; }

/* ---------- ticker ---------- */
.ticker { position: relative; width: 100%; display: flex; overflow: hidden; }
.ticker__track { position: relative; display: flex; align-items: center; flex: none; width: 100%; gap: var(--ticker-gap, 20px); will-change: transform; }
.ticker__track > * { flex: none; }

/* ---------- rolling digits ---------- */
.roll { display: inline-flex; align-items: center; justify-content: center; font: var(--t-digit); color: var(--c-ink); height: var(--roll-lh, 61.2px); overflow: hidden; }
.roll__digits { display: flex; }
.roll__col { display: flex; justify-content: center; width: var(--roll-w, 40px); height: var(--roll-lh, 61.2px); overflow: hidden; }
.roll__strip { display: flex; flex-direction: column; align-items: center; flex: none; }
.roll__strip > span { display: flex; justify-content: center; height: var(--roll-lh, 61.2px); }
.roll__strip.is-done, html:not(.js) .roll__strip { transform: translateY(calc(-4 * var(--roll-lh, 61.2px))); }
.roll__suffix { display: flex; justify-content: center; height: var(--roll-lh, 61.2px); }
@media (max-width: 809.98px) { .roll { --roll-lh: 44px; --roll-w: 26px; line-height: 44px; } }

.counter__item p, .cta__text > *, .cta__qr-title { text-wrap-style: balance; }
.faq-item__a p { text-wrap-style: balance; }
@media (max-width: 809.98px) { .faq-item__title > span { text-wrap-style: balance; } }

/* ---------- soft shapes (replace Habitline's cloud PNGs) ---------- */
.soft { border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0) 100%); }
.soft--cream { background: radial-gradient(closest-side, rgba(250, 247, 241, 1) 0%, rgba(245, 240, 232, .85) 50%, rgba(245, 240, 232, 0) 100%); }
.soft--sage { background: radial-gradient(closest-side, rgba(143, 168, 120, .28) 0%, rgba(143, 168, 120, .12) 50%, rgba(143, 168, 120, 0) 100%); }

/* ---------- FAQ section ---------- */
.faq { width: 100%; display: flex; justify-content: center; }
.faq__content { display: flex; gap: 100px; align-items: flex-start; }
.faq__left { width: 413px; flex: none; display: flex; flex-direction: column; gap: 80px; }
.faq__top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq__cta { display: flex; flex-direction: column; gap: 30px; padding: 30px; }
.faq__cta-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq__cta h3 { align-self: stretch; font: var(--t-h3); }
.faq__cta p { color: var(--c-ink-2); }
.faq__cta .badge > img { width: 22px; height: 22px; }
.faq__list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-item { position: relative; background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; }
.faq-item__q { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 20px; text-align: left; }
.faq-item__title { flex: 1; min-height: 34px; display: flex; align-items: center; font: var(--t-h4); color: var(--c-ink); }
.faq-item__title > span { display: block; width: 100%; }
.faq-item__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-line); transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s; }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--fa-forest); border-radius: 3px; transform: translate(-50%, -50%); }
.faq-item__icon::before { width: 16px; height: 2px; } .faq-item__icon::after { width: 2px; height: 16px; }
.faq-item.is-open .faq-item__icon { transform: rotate(135deg); background: rgba(196, 139, 53, .18); }
.faq-item__a { padding: 0 20px 22px; color: var(--c-ink-2); overflow: hidden; }
.faq-item__a a { color: var(--fa-forest); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1199.98px) {
  .faq__content { gap: 30px; }
  .faq__left { width: 270px; gap: 30px; }
}
@media (max-width: 809.98px) {
  .faq__content { flex-direction: column; gap: 30px; }
  .faq__left { width: 100%; }
  .faq__top { gap: 10px; }
  .faq__cta { padding: 20px; gap: 20px; }
  .faq__list { width: 100%; }
  .faq-item__q { padding: 12px 12px 12px 20px; }
  .faq-item__title { min-height: 32px; }
  .faq-item__icon { width: 32px; height: 32px; }
}

/* ---------- Counter section ---------- */
.counter__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.counter__top { position: relative; z-index: 2; width: 540px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.counter__stat { position: relative; width: 100%; padding-top: 20px; padding-bottom: 14px; display: flex; justify-content: center; }
.counter__stat h2 { width: 100%; font: var(--t-stat); color: var(--fa-gold); text-align: center; }
.counter__tag { position: absolute; left: 372px; bottom: -8px; z-index: 1; transform: rotate(8deg); }
.counter__bottom { width: 100%; display: flex; flex-direction: column; align-items: center; }
.counter__band { position: relative; z-index: 2; width: 1080px; max-width: 100%; }
.counter__video { position: relative; height: 440px; background: var(--c-page); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.counter__video > div { height: 100%; mix-blend-mode: darken; }
.counter__video img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.counter__cloud { position: absolute; z-index: 1; pointer-events: none; }
.counter__cloud--1 { left: -230px; bottom: -80px; width: 600px; height: 300px; }
.counter__cloud--2 { left: -30px; bottom: -300px; width: 752px; height: 450px; }
.counter__cloud--3 { right: -250px; bottom: -120px; width: 752px; height: 450px; }
.counter__blur { position: absolute; z-index: 1; left: 50%; bottom: -240px; width: 1600px; height: 300px; margin-left: -800px; background: var(--c-page); filter: blur(10px); }
.counter__stats { position: relative; z-index: 2; width: 900px; max-width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 50px; overflow: hidden; }
.counter__item { width: 260px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.counter__item p { width: 100%; color: var(--c-ink-2); }
.roll__suffix.is-violet, .roll__suffix.is-gold { color: var(--fa-gold); } .roll__suffix.is-blue, .roll__suffix.is-forest { color: var(--fa-forest); }
@media (max-width: 1199.98px) {
  .counter__inner { gap: 30px; }
  .counter__band { width: 100%; }
  .counter__video { height: 306px; }
  .counter__stats { width: 100%; gap: 30px; }
  .counter__item { width: 217px; }
}
@media (max-width: 809.98px) {
  .counter__tag { left: auto; right: 6px; bottom: -6px; }
  .counter__tag .pill { padding: 4px 12px; }
  .counter__video { height: 160px; }
  .counter__cloud--1 { width: 317px; height: 150px; }
  .counter__cloud--2 { width: 418px; height: 250px; bottom: -179px; }
  .counter__cloud--3 { display: none; }
  .counter__stats { flex-direction: column; align-items: center; gap: 30px; }
  .counter__item { width: 100%; }
}

/* ---------- CTA with phone + QR (desktop: 1800 px scroll stage, sticky content) ---------- */
.cta { position: relative; width: 100%; height: 1800px; }
.cta__sticky { position: sticky; top: 0; z-index: 1; height: 952px; padding-top: 200px; display: flex; justify-content: center; }
.cta__row { position: relative; display: flex; gap: 10px; height: 752px; }
.cta__side { position: relative; z-index: 6; width: 344px; flex: none; padding-top: 100px; }
.cta__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 30px; }
.cta__text { display: flex; flex-direction: column; gap: 12px; }
.cta__text h2, .cta__text h3, .cta__qr-title { font: var(--t-h3l); color: var(--c-ink); }
.cta__qr-title { font: var(--t-cta-qr); }
.cta__text p { color: var(--c-ink-2); }
.cta__buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cta__phone { position: relative; z-index: 3; width: 492px; height: 752px; flex: none; display: flex; justify-content: center; align-items: flex-start; padding-top: 20px; }
.cta__phone .pframe { width: 330px; }
.cta__mito { position: absolute; z-index: -1; left: 50%; top: 40px; width: 760px; translate: -50% 0; mix-blend-mode: multiply; opacity: .9; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.cta__qr { display: flex; padding: 12px; background: var(--c-white); border-radius: var(--r-card); box-shadow: rgba(26, 26, 22, .1) 0 10px 35px 0; align-self: flex-start; }
.cta__qr-wrap { display: flex; padding: 16px; background: var(--c-white); border-radius: var(--r-item); box-shadow: inset 0 0 0 1px var(--c-line); }
.cta__qr-wrap img { width: 170px; height: 170px; image-rendering: pixelated; }
.cta__qr-note { font: var(--t-xs); color: var(--c-stone); }
.cta__cloud { position: absolute; z-index: 0; pointer-events: none; }
.cta__cloud--l3 { left: -185px; top: 50px; width: 572px; height: 220px; }
.cta__cloud--l4 { left: -349px; top: 150px; width: 736px; height: 440px; }
.cta__cloud--r3 { left: 172px; top: 40px; width: 813px; height: 470px; translate: -50% 0; }
.cta__cloud--r4 { left: 200px; top: 150px; width: 572px; height: 220px; }
.cta__overlay { position: absolute; z-index: 4; left: 0; top: 822px; width: 100%; height: 250px; background: var(--c-page); filter: blur(35px); }
.cta__cloud--b1 { z-index: 5; left: -100px; top: 612px; width: 873px; height: 290px; }
.cta__cloud--b2 { z-index: 5; left: 667px; top: 662px; width: 873px; height: 290px; }
.cta__cloud--b3 { z-index: 5; left: -260px; top: 684px; width: 2989px; height: 588px; }
.cta__marks { position: absolute; left: 0; top: 0; width: 181px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.cta__mark { height: 270px; }
@media (max-width: 1199.98px) {
  .cta { height: auto; padding-top: 120px; overflow: clip; }
  .cta__sticky { position: relative; height: auto; padding-top: 0; }
  .cta__row { height: auto; min-height: 420px; }
  .cta__side { width: 281px; padding-top: 10px; }
  .cta__side--right { width: 225px; }
  .cta__phone { width: 225px; height: auto; padding-top: 0; }
  .cta__phone .pframe { width: 200px; }
  .cta__mito { width: 460px; top: 30px; }
  .cta__qr { padding: 8px; }
  .cta__qr-wrap { padding: 10px; }
  .cta__qr-wrap img { width: 110px; height: 110px; }
  .cta__cloud--l3 { width: 421px; height: 140px; }
  .cta__cloud--l4 { width: 435px; height: 260px; }
  .cta__cloud--r3 { left: 113px; top: 120px; width: 432px; height: 250px; }
  .cta__overlay { top: auto; bottom: -150px; height: 220px; }
  .cta__cloud--b1 { top: 250px; width: 512px; height: 170px; }
  .cta__cloud--b2 { left: 459px; top: 300px; width: 452px; height: 150px; }
  .cta__cloud--b3 { left: 50%; top: 300px; translate: -50% 0; }
  .cta__marks { display: none; }
}
@media (max-width: 809.98px) {
  .cta { padding-top: 100px; }
  .cta__row { height: auto; flex-direction: column; align-items: center; gap: 50px; }
  .cta__side, .cta__side--right { width: 100%; flex: none; }
  .cta__side { padding-top: 10px; }
  .cta__side--right { padding-top: 0; order: 1; }
  .cta__phone { order: 2; width: 100%; }
  .cta__phone .pframe { width: 240px; }
  .cta__mito { width: 460px; top: 60px; }
  .cta__content { gap: 20px; align-items: center; text-align: center; }
  .cta__buttons { align-items: center; gap: 16px; }
  .cta__qr { align-self: center; }
  .cta__cloud--l3, .cta__cloud--l4, .cta__cloud--r3, .cta__cloud--r4 { display: none; }
  .cta__overlay { top: auto; bottom: -120px; height: 220px; filter: blur(16px); }
  .cta__cloud--b1, .cta__cloud--b2, .cta__cloud--b3 { display: none; }
}