/* PREVIEW: two hero experiments (hero-a.html, hero-b.html). Only those pages load this file. */

/* ---------- A · 135 → 75 counter ---------- */
.xa {
  position: relative; width: 100%; max-width: 28rem; margin: 0;
  aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden;
  background: #111; color: #fff; isolation: isolate;
}
.xa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* the after photo rises over the before photo as the number falls */
.xa__img--after { clip-path: inset(calc(100% - var(--p, 0) * 100%) 0 0 0); }
.xa::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / 0) 55%), linear-gradient(to bottom, rgb(0 0 0 / .35), rgb(0 0 0 / 0) 30%); }
.xa > :not(img) { position: absolute; z-index: 2; }
.xa__chip { top: .85rem; left: .85rem; padding: .35rem .8rem; border-radius: 999px;
  background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.xa__now, .xa.is-done .xa__then { display: none; }
.xa.is-done .xa__now { display: inline; }
.xa__num { left: 1rem; bottom: 3.4rem; margin: 0; display: flex; align-items: baseline; gap: .35rem; line-height: .8; }
.xa__num b { font-family: var(--font-display); font-weight: 600; font-size: clamp(5.5rem, 4rem + 9vw, 9.5rem); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.xa__num span { font-size: 1.25rem; font-weight: 700; color: var(--dark-accent-text); }
.xa__bar { left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .6rem; font-size: .75rem; font-weight: 700; opacity: .85; }
.xa__bar i { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .25); overflow: hidden; }
.xa__bar b { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); }
.xa__replay { top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem;
  border: 0; border-radius: 999px; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); color: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.xa.is-done .xa__replay { opacity: 1; pointer-events: auto; }
.xa__replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- B · lift the bar ---------- */
.xb {
  position: relative; width: 100%; max-width: 28rem; margin: 0;
  aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden; background: #111; isolation: isolate;
}
.xb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  transform: scale(1.08); transition: transform 1.1s var(--ease); }
.xb.is-open .xb__img { transform: none; }
.xb__cover {
  position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: 1fr auto auto; justify-items: center;
  padding: 1.25rem 1rem 0; color: #fff; text-align: center;
  background: radial-gradient(120% 80% at 50% 100%, #2a1a12 0%, #121212 55%, #0b0b0b 100%);
  transition: transform .8s var(--ease), opacity .8s;
}
.xb.is-open .xb__cover { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.xb__text { align-self: center; display: grid; gap: .35rem; }
.xb__prompt { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1; }
.xb__hint { margin: 0; font-size: .875rem; color: var(--dark-text-muted); }
.xb__bar {
  --y: 0px; width: min(88%, 22rem); padding: 0; border: 0; background: none; cursor: grab; touch-action: none;
  transform: translateY(var(--y)) rotate(var(--tilt, 0deg)); color: #fff;
}
.xb__bar svg { display: block; width: 100%; height: auto; overflow: visible; }
.xb__bar:active { cursor: grabbing; }
.xb__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.xb.is-lifting .xb__bar { transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.xb__floor { width: 100%; height: 1.1rem; margin-top: .4rem; border-top: 2px solid rgb(255 255 255 / .12); }
.xb__done {
  position: absolute; left: .85rem; right: .85rem; bottom: .85rem; z-index: 1; margin: 0; padding: .7rem 1rem; border-radius: 12px;
  background: rgb(17 17 17 / .78); backdrop-filter: blur(6px); color: #fff; font-weight: 700; font-size: .9375rem;
  opacity: 0; transform: translateY(12px); transition: opacity .5s .5s, transform .5s .5s var(--ease);
}
.xb.is-open .xb__done { opacity: 1; transform: none; }
.xb__done b { color: var(--dark-accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .xb:not(.is-open):not(.is-dragging) .xb__bar { animation: xb-bob 1.6s ease-in-out infinite; }
}
@keyframes xb-bob { 50% { transform: translateY(-6px); } }

/* both: same place as the old photo */
@media (min-width: 900px) {
  .xa, .xb { justify-self: end; max-width: 27rem; aspect-ratio: 4 / 5; }
}
@media (max-width: 899px) {
  .hero--split .xa, .hero--split .xb { order: -1; max-width: none; }
}
/* ---------- C · lift the bar, then the counter (one figure is both .xa and .xb) ---------- */
.xa.xb .xb__cover { z-index: 3; }
.xa.xb .xb__prompt { font-size: clamp(3.2rem, 2.4rem + 4vw, 5rem); font-weight: 600; letter-spacing: -.03em; }
.xa.xb .xb__hint { max-width: 26ch; margin-inline: auto; }

/* ---------- D · big type + counter + numbers ---------- */
.xd__inner { display: grid; gap: 1.5rem; }
.hero--split.xd .xd__title { font-size: clamp(3.1rem, 1rem + 8vw, 8.75rem); line-height: .88; }
.xd__row { display: grid; gap: 1.75rem; align-items: end; }
.hero--split.xd .xa { order: 0; max-width: none; aspect-ratio: 5 / 4; justify-self: stretch; }
.xd__stats { list-style: none; margin: .5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.xd__stats li { display: grid; gap: .35rem; align-content: start; }
.xd__stats strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.8rem, 2rem + 3vw, 4.5rem); line-height: .9; color: var(--ink); letter-spacing: -.03em; }
.xd__stats strong span { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--accent-text); margin-left: .3rem; letter-spacing: 0; }
.xd__stats p { margin: 0; font-size: .9375rem; color: var(--text-muted); max-width: 22ch; }
@media (min-width: 900px) {
  .xd__row { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: clamp(2rem, 5vw, 5rem); }
  .xd__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* phones: keep the button on the first screen; the story comes right after in the proof strip */
@media (max-width: 599px) { .hero--split .hero__lead { display: none; } }

/* ---------- E · big type + the whole photo (not cropped) ---------- */
.xe__inner { display: grid; gap: 1.75rem; }
.xe__copy { display: grid; gap: 1.5rem; align-content: center; }
.hero--split.xe .xe__title { font-size: clamp(3.1rem, 0.5rem + 6.2vw, 7.25rem); line-height: .88; }
.xe__photo { margin: 0; width: 100%; }
.hero--split .xe__photo img, .hero--split .xe__photo .photo-ph { aspect-ratio: 668 / 1000; object-position: 50% 50%; }
@media (min-width: 900px) {
  .xe__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
  .xe__photo { max-height: calc(100vh - var(--header-h) - 3rem); width: auto; justify-self: end; }
  .hero--split .xe__photo img { height: 100%; max-height: calc(100vh - var(--header-h) - 3rem); width: auto; }
}
/* ---------- E · section 2: the loop around the before photo ---------- */
.proof-cycle { display: grid; gap: 3rem; align-items: center; }
.loop--photo .loop__photo {
  position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px);
  border-radius: 50%; object-fit: cover; object-position: 50% 28%;
}
.loop--photo .loop__ring::before { border-color: rgb(var(--accent-rgb) / .35); }
.loop--photo .loop__center {
  inset: auto 0 14% 0; display: block; text-align: center; z-index: 1;
  color: #fff; font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.5rem); text-shadow: 0 2px 14px rgb(0 0 0 / .7);
}
.loop--photo .loop__pin { background: var(--dark-bg); z-index: 1; }
.loop--photo .loop__stage { color: var(--dark-ink); }
.loop--photo .loop__stage::before { background: var(--dark-bg); }
.loop__tag { margin: 1.25rem 0 0; text-align: center; color: var(--dark-accent-text); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.proof-cycle__out { display: grid; gap: 1.1rem; }
.proof-cycle__pair { display: grid; gap: 1.25rem; align-items: center; }
.proof-cycle__after { width: min(100%, 14rem); margin: 0; }
.proof-cycle__after img, .proof-cycle__after .photo-ph { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.proof-cycle__out .proof__caption { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); line-height: 1.35; text-align: left; margin: 0; }
@media (min-width: 900px) {
  .proof-cycle { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 3rem; }
  .proof-cycle__pair { grid-template-columns: 12rem minmax(0, 1fr); }
  .loop--photo .loop__tag { display: none; }   /* the labels around the ring say it already */
}

/* E · where the orange trail starts: on wide screens the right edge of the photo (heading right),
   on phones the dot after the headline as before */
.xe__start { display: none; }
.xe__dot-wide { display: none; }
@media (min-width: 900px) {
  .xe__dot-phone { display: none; }
  .xe__dot-wide { display: inline-block; }
  .xe__start {
    --trail-tangent: h;
    display: block; grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
    width: 12px; height: 12px; margin-right: -6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .18); z-index: 1;
  }
}
@media (min-width: 900px) { .xe__copy { grid-column: 1; grid-row: 1; } .xe__photo { grid-column: 2; grid-row: 1; } }

/* E · section 2, round 2: the two photos big and side by side (before in the loop, after next to it),
   the words underneath across the full width */
.proof-cycle__after { width: min(100%, 22rem); justify-self: center; }
.proof-cycle__after img, .proof-cycle__after .photo-ph { aspect-ratio: 4 / 5; }
.proof-cycle__out { justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto; }
.proof-cycle__out .proof__caption { text-align: center; }
@media (min-width: 900px) {
  .proof-cycle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); row-gap: 3.5rem; }
  .loop.loop--photo { grid-column: 1; grid-row: 1; justify-self: end; width: clamp(17rem, 25vw, 24rem); margin: 5rem 11rem 5rem 0; }
  .loop--photo .loop__stage { width: 9rem; }
  .proof-cycle__after { grid-column: 2; grid-row: 1; justify-self: start; width: clamp(16rem, 24vw, 23rem); }
  .proof-cycle__out { grid-column: 1 / -1; grid-row: 2; }
}
/* the pair sits in the middle, with room for the loop's labels on both sides */
@media (min-width: 900px) {
  .proof-cycle { grid-template-columns: auto auto; justify-content: center; }
  .loop.loop--photo { justify-self: center; width: clamp(16rem, 22vw, 22rem); margin: 5rem 10.5rem; }
  .proof-cycle__after { width: clamp(15rem, 23vw, 22rem); align-self: center; }
}
@media (min-width: 900px) { .loop.loop--photo { width: clamp(17rem, 26vw, 25rem); margin-inline: 10rem; } .proof-cycle { column-gap: 2rem; } .proof-cycle__after { width: clamp(15rem, 25vw, 24rem); } }   /* bigger photos */

/* E · round 3 */
/* the trail starts in the right margin at the walker's resting height (trail.js HEAD_AT = 62% of the screen),
   so no line runs before the glass of water */
.xe { position: relative; }
.xe__lanebox { display: none; }
@media (min-width: 900px) {
  .xe__lanebox { display: block; position: absolute; inset: 0; margin-inline: auto; pointer-events: none; }
  .xe__lanebox .trail-lane { top: 62vh; }
  .xe .hero__lower > .trail-lane { display: none; }
}
/* the loop goes clockwise: 1 top, 2 right, 3 bottom, 4 left; the line leaves from the right side, straight down */
@media (min-width: 900px) {
  .loop--photo .loop__ring { --loop-entry: top; }
  .loop--photo .loop__stage:nth-child(2) { left: 100%; right: auto; top: 50%; transform: translate(1.6rem, -50%); text-align: left; justify-items: start; }
  .loop--photo .loop__stage:nth-child(2)::before { left: calc(-1.6rem - 4.5px); right: auto; top: calc(50% - 4.5px); }
  .loop--photo .loop__stage:nth-child(4) { left: auto; right: 100%; top: 50%; transform: translate(-1.6rem, -50%); text-align: right; justify-items: end; }
  .loop--photo .loop__stage:nth-child(4)::before { left: auto; right: calc(-1.6rem - 4.5px); top: calc(50% - 4.5px); }
  .loop--photo .loop__exit { left: 100%; top: calc(100% + 2.5rem); }
}
@media (min-width: 900px) { .hero.xe > .xe__lanebox { position: absolute; inset: 0; } }   /* beats the hero's own ".hero > *" positioning */

/* E · round 4: the line comes down the left margin, curves into the top of the circle,
   goes round clockwise, leaves from the bottom to the left and runs down the left margin past the words */
.proof-cycle { position: relative; }
.proof-cycle > .xe__lane-in { bottom: auto; height: 2.5rem; }
.proof-cycle__out { position: relative; }
@media (min-width: 900px) {
  .loop--photo .loop__ring { --loop-entry: top-cw; }
  .loop--photo .loop__exit { display: none; }
}

/* 3b · the free tools: a warm panel that stands out from the page */
.free-x__panel {
  position: relative; overflow: hidden; display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: 28px;
  border: 1px solid rgb(var(--accent-rgb) / .25);
  background:
    radial-gradient(60% 80% at 0% 0%, rgb(var(--accent-rgb) / .22), transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgb(var(--accent-rgb) / .16), transparent 60%),
    linear-gradient(135deg, #fff6f0, #ffeadd);
  box-shadow: 0 30px 60px -40px rgb(var(--accent-rgb) / .6);
}
.free-x__head { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 40rem; margin-inline: auto; }
.free-x__head h2 { margin: 0; }
.free-x__badge {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .55rem 1.1rem .55rem .85rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: .9rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .5);
}
.free-x__badge svg { width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .free-x__badge { animation: free-pulse 2.4s ease-out infinite; }
}
@keyframes free-pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .45); } 70%, 100% { box-shadow: 0 0 0 14px rgb(var(--accent-rgb) / 0); } }
.free-x__lead { margin: 0; color: var(--text-body); font-size: var(--fs-lead); }
.free-x__cards { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .free-x__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.free-x__card {
  display: grid; gap: .8rem; align-content: start; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: 22px;
  background: #fff; color: inherit; text-decoration: none; border: 1px solid rgb(var(--accent-rgb) / .18);
  box-shadow: 0 18px 40px -28px rgb(var(--ink-rgb) / .35); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.free-x__card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgb(var(--accent-rgb) / .55); }
.free-x__card h3 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.free-x__card > p { margin: 0; color: var(--text-body); }
.free-x__top { display: flex; align-items: center; justify-content: space-between; }
.free-x__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--accent); color: #fff; }
.free-x__icon svg { width: 1.6rem; height: 1.6rem; }
.free-x__time { padding: .3rem .7rem; border-radius: 999px; background: rgb(var(--accent-rgb) / .12); color: var(--accent-text); font-size: .8rem; font-weight: 700; }
.free-x__list { margin: .2rem 0 .4rem; }
.free-x__card .btn { margin-top: auto; }
@media (min-width: 900px) { .loop.loop--photo { margin-top: 9rem; } .proof-cycle > .xe__lane-in { height: 6rem; } }   /* a longer run down the margin, so the turn into the circle is wide and soft */
.free-x__head h2 { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem); line-height: 1; }

/* ---------- phones, round 1 ---------- */
/* the loop goes clockwise on every screen and leaves from its bottom to the left margin */
.loop--photo .loop__ring { --loop-entry: top-cw; }
.loop--photo .loop__exit { display: none; }
/* phones: a run down the left margin beside the after photo, so the walker never crosses it */
.proof-cycle__after { position: relative; }
.xe__lane-mid { display: none; }
@media (max-width: 899.98px) {
  .xe__lane-mid { display: block; }
  /* the four steps sit around the circle, like on a computer, only smaller */
  .loop.loop--photo { width: min(52vw, 14rem); margin: 4.5rem auto 5rem; }
  .loop--photo .loop__pin { display: none; }
  .loop--photo .loop__center { font-size: 1.5rem; }
  .loop--photo .loop__stages { position: absolute; inset: 0; margin: 0; display: block; }
  .loop--photo .loop__stage { position: absolute; display: grid; gap: .2rem; width: 3.7rem; font-size: .68rem; line-height: 1.25; }
  .loop--photo .loop__stage::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--dark-bg); border: 1.5px solid var(--accent); }
  .loop--photo .loop__stage:nth-child(1) { left: 50%; bottom: 100%; width: 8rem; transform: translate(-50%, -1.4rem); text-align: center; justify-items: center; }
  .loop--photo .loop__stage:nth-child(1)::before { left: calc(50% - 4px); bottom: calc(-1.4rem - 4px); }
  .loop--photo .loop__stage:nth-child(2) { left: 100%; top: 50%; transform: translate(.6rem, -50%); text-align: left; justify-items: start; }
  .loop--photo .loop__stage:nth-child(2)::before { left: calc(-.6rem - 4px); top: calc(50% - 4px); }
  .loop--photo .loop__stage:nth-child(3) { left: 50%; top: 100%; width: 8rem; transform: translate(-50%, 1.1rem); text-align: center; justify-items: center; }
  .loop--photo .loop__stage:nth-child(3)::before { left: calc(50% - 4px); top: calc(-1.1rem - 4px); }
  .loop--photo .loop__stage:nth-child(4) { right: 100%; top: 50%; transform: translate(-.6rem, -50%); text-align: right; justify-items: end; }
  .loop--photo .loop__stage:nth-child(4)::before { right: calc(-.6rem - 4px); top: calc(50% - 4px); }
  /* "Prieš · 135 kg" right under the circle's bottom step */
  .loop--photo .loop__tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4rem); margin: 0; white-space: nowrap; }
  .proof-cycle { gap: 2rem; }
}

/* phones: a run down the right margin beside the hero photo, so the walker never crosses it */
.xe__photo { position: relative; }
@media (min-width: 900px) { .xe__lane-photo { display: none; } }