/* ===== v24 overrides (23 Oct) ===== */

/* Home: stat line above Languages in navy */
.stat:nth-child(4){border-top-color:var(--navy,#0A2342)!important}
/* Home: bigger, yellow review stars */
.quotes .stars{color:#F2B705!important;font-size:1.9rem;letter-spacing:.12em;line-height:1;margin-bottom:20px;font-family:inherit}

/* App Store + Google Play: identical everywhere */
.download-row .download-btn,
.download-row .download-btn+.download-btn,
.final-sage .download-row .download-btn+.download-btn,
.bg-forest .download-row .download-btn+.download-btn,
.hero-full .download-row .download-btn+.download-btn{background:var(--jungle,#57886C)!important;border-color:var(--jungle,#57886C)!important;color:#fff!important}
.download-row .download-btn:hover,
.download-row .download-btn+.download-btn:hover{background:var(--pine-teal,#065143)!important;border-color:var(--pine-teal,#065143)!important;color:#fff!important}

/* How it works hero: bigger Upload. Analyze. Understand. */
@media(min-width:641px){.page-hero.split.how-hero h1{font-size:clamp(2.8rem,4.6vw,4.7rem)!important}} /* v24h: desktop only, so mobile.js can shrink long headlines on phones */

/* Science hero: bigger headline */
@media(min-width:641px){.page-hero.split:has(.science-hero-bg) h1{font-size:clamp(2.5rem,4.1vw,4.2rem)!important;hyphens:manual;overflow-wrap:anywhere}} /* v24h: desktop only, so mobile.js can shrink long headlines on phones */

/* Slider art: no background, big phones so people can read the screen */
.process .slide-art,.process .slide-art.phone,.process .slide:nth-child(n) .slide-art{background:transparent!important;border-radius:0;overflow:visible;position:relative}
.process .slide-art::before{display:none!important}
.process .slide-art.live-art{display:grid;place-items:center}
.process .slide-art.live-art .phone-frame.live{height:100%;width:auto;max-width:none;box-shadow:0 30px 60px -18px rgba(10,35,66,.32)}
@media(min-width:941px){
  .process .slide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:56px!important;align-items:start!important}
  .process .slide-art{height:min(780px,calc(100vh - 130px))!important;min-height:560px!important;aspect-ratio:auto!important}
}
@media(max-width:940px){.process .slide-art{aspect-ratio:auto!important;height:min(700px,150vw)!important}}
/* 4-step timeline */
.tl{grid-template-columns:repeat(4,1fr)!important}
.tl:before{left:12.5%!important;right:12.5%!important}
.tl-fill{left:12.5%!important}

/* live phone 0: building the animal profile (matches the app's Edit profile screen) */
.lp.s0{background:#F8F4EC;font-family:var(--serif,"Source Serif 4",Georgia,serif)}
.s0 .lp-hd{text-align:center;padding:0 0 2.2cqw}
.s0 .lp-hd img{height:8.5cqw;width:auto;display:inline-block}
.s0 .lp-tb{display:flex;align-items:center;justify-content:space-between;padding:3cqw 5cqw;background:#fff;border-bottom:1px solid #E7DFD0;color:#466060;font-size:1.15em}
.s0 .lp-tb span:nth-child(2){flex:1;text-align:center;font-family:var(--head,"Archivo Black",sans-serif);text-transform:uppercase;font-size:.95em;letter-spacing:-.01em}
.s0 .lp-av{width:26cqw;height:26cqw;border-radius:50%;margin:4.5cqw auto 4cqw;border:1.1cqw solid #065143;background-size:cover;background-position:50% 30%}
.s0 .lp-form{background:#fff;border:1px solid #EFE6D6;border-radius:6cqw;padding:4.5cqw 4.5cqw 5cqw;position:relative}
.s0 .lp-lab{font-size:.72em;color:#466060;margin:0 0 1.4cqw}
.s0 .lp-in,.s0 .lp-sel{position:relative;height:11cqw;border:1px solid #EFE6D6;border-radius:99px;display:flex;align-items:center;padding:0 4.4cqw;font-size:.86em;color:#0A2342;margin-bottom:3.4cqw;background:#fff;transition:border-color .3s,box-shadow .3s,transform .2s}
.s0 .lp-in .typed{font-size:1.02em}
.s0 .lp-sel .ph{color:#9AA3A0}.s0 .lp-sel .val{display:none}
.s0 .lp-sel.set .ph{display:none}.s0 .lp-sel.set .val{display:inline}
.s0 .lp-sel em{margin-left:auto;font-style:normal;color:#0A2342;font-size:.95em}
.s0 .lp-sel.open{border-color:#57886C;box-shadow:0 0 0 .9cqw rgba(87,136,108,.16)}
.s0 .lp-dd{position:absolute;left:0;right:0;top:calc(100% + 1.2cqw);background:#fff;border:1px solid #E3D9C6;border-radius:4.4cqw;box-shadow:0 14px 28px rgba(10,35,66,.2);padding:1.4cqw;z-index:12;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s,transform .3s}
.s0 .lp-sel.up .lp-dd{top:auto;bottom:calc(100% + 1.2cqw);transform:translateY(6px)}
.s0 .lp-sel.open .lp-dd{opacity:1;transform:none}
.s0 .lp-dd span{display:block;padding:1.8cqw 3cqw;border-radius:3cqw;font-size:.92em;transition:background .25s}
.s0 .lp-dd span.hi{background:#DCE5D7;color:#065143;font-weight:600}
.s0 .lp-chips{display:flex;gap:2cqw;margin-bottom:3.4cqw;overflow:hidden}
.s0 .lp-chips span{flex:none;width:18cqw;border:1px solid #EFE6D6;border-radius:3.6cqw;padding:1.1cqw 1.1cqw 1.4cqw;text-align:center;font-size:.64em;color:#466060;transition:border-color .3s,background .3s,transform .2s;position:relative}
.s0 .lp-chips i{display:block;height:12cqw;border-radius:2.6cqw;background-size:cover;background-position:center;margin-bottom:1cqw}
.s0 .lp-chips span.on{border:.75cqw solid #065143;background:#DCE5D7;color:#0A2342}
.s0 .lp-chips span.on:after{content:"✓";position:absolute;top:.4cqw;right:.6cqw;width:5cqw;height:5cqw;border-radius:50%;background:#065143;color:#fff;font-size:3.2cqw;display:grid;place-items:center;font-family:Inter,sans-serif}
.s0 .tap{transform:scale(.96)}
.s0 .lp-btn{margin-top:1cqw;background:#57886C;font-family:var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;font-size:.72em;font-weight:600;opacity:.35}
.s0.ready .lp-btn{opacity:1}.s0.press .lp-btn{transform:scale(.96)}
.lp-touch{position:absolute;z-index:40;width:13cqw;height:13cqw;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;background:rgba(10,35,66,.22);border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(10,35,66,.25);opacity:0;transform:scale(.6);pointer-events:none;left:50%;top:50%}
.lp-touch.show{animation:lp-touch .7s ease-out}
@keyframes lp-touch{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}

/* live phone 3: insights read like the app (bold body part + what it means here) */
.s3 .lp-sheet{bottom:auto!important;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s}
.s3.open.scroll .lp-sheet{transform:translateY(-70cqw)}
.s3 .lp-row.open .rb{max-height:150cqw}
.s3 .lp-sig{display:block;font-family:var(--serif,"Source Serif 4",Georgia,serif);font-size:.74em;line-height:1.42;color:#0A2342;margin-top:.6em;padding-left:.9em;position:relative}
.s3 .lp-sig:before{content:"•";position:absolute;left:0;color:#0A2342}
.s3 .lp-sig b{color:#0A2342;font-weight:700}
.s3 .lp-sig span{display:inline}

/* Species pages: "Your X, read in seconds." on that species' coat texture */
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c){background-size:100% 100%,cover!important;background-position:0 0,center!important;background-repeat:no-repeat!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-dog{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/dog-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-cat{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/cat-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-horse{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/horse-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-pig{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/pig-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-cow{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/cow-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-chicken{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/chicken-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-goat{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/goat-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-rabbit{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/cat-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-sheep{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/sheep-wool.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-donkey{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/horse-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-alpaca{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/sheep-wool.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-llama{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/goat-coat.webp")!important}
section.bg-leaf.print-own:not(.x-a):not(.x-b):not(.x-c).print-own-duck{background-image:linear-gradient(90deg,rgba(241,233,215,.9) 0%,rgba(241,233,215,.8) 45%,rgba(241,233,215,.62) 100%),url("textures/mandarin_duck_feathers.webp")!important}

/* Keep exploring: Coming next tile on peacock feathers */
.sp-other.sp-next{background:linear-gradient(180deg,rgba(10,35,66,.15) 0%,rgba(10,35,66,.5) 45%,rgba(10,35,66,.85) 100%),url("textures/peacock_feathers.webp") center/cover no-repeat!important}
.sp-other.sp-next span{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.35)}

/* Output anatomy: 01 + 02 on top, 03 + 04 below, matching the card order */
@media(min-width:941px){.x-anat{grid-template-areas:"c1 r c2" "c3 r c4"!important}.x-c1,.x-c3{text-align:right!important}.x-c2,.x-c4{text-align:left!important}}
@media(max-width:940px) and (min-width:561px){.x-anat{grid-template-areas:"r r" "c1 c2" "c3 c4"!important}.x-c1,.x-c3{text-align:left!important}}
/* live phone: tips icon is a light bulb on pink, ethogram a book on green, like the app */
.lp-row .ic.ic-tips{background:#FBDCE2!important}
.lp-row.eth .ic{background:#DCE5D7!important}
@media(min-width:641px){html[lang="de"] .page-hero.split:has(.science-hero-bg) h1{font-size:clamp(2.2rem,3.3vw,3.4rem)!important}} /* v24h: desktop only, so mobile.js can shrink long headlines on phones */

/* Why it matters: bigger hero headline */
@media(min-width:641px){.page-hero.split.why-intro h1{font-size:clamp(2.6rem,4.3vw,4.4rem)!important}} /* v24h: desktop only, so mobile.js can shrink long headlines on phones */
@media(min-width:641px){html[lang="de"] .page-hero.split.why-intro h1,html[lang="fi"] .page-hero.split.why-intro h1{font-size:clamp(2.3rem,3.6vw,3.6rem)!important}} /* v24h: desktop only, so mobile.js can shrink long headlines on phones */
/* Why it matters: "A deeper read of each species" in hot pink */
.deeper-read h2,.deeper-read h2 .accent{color:var(--rose-e,#E0479E)!important}
/* Science: centred intro under "Confidence should fall…" */
.x-conf .center-head,.x-conf .center-head .section-lead{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.x-conf .center-head .section-lead{max-width:760px}
.process .slide-art.live-art img{position:static!important;inset:auto!important;transform:none!important;width:auto;height:auto;filter:none}
.process .slide-art.live-art .s0 .lp-hd img{height:8.5cqw!important;width:auto!important}

/* ===== 23 Oct pm: From clip to clarity fits one screen ===== */
section#process{background:var(--blush-tint,#FBDCE2)!important;padding-top:72px!important;padding-bottom:72px!important}
.process .slides>.timeline,.process .copy .timeline{margin:26px 0 0!important;width:100%!important;max-width:520px;justify-self:auto!important;grid-area:auto!important}
.process .copy .timeline .tl{max-width:none!important;margin:0!important}
.process .copy .timeline .tl .lbl{font-size:.6rem;letter-spacing:.08em}
.process .slide h3{font-size:clamp(1.45rem,2vw,2rem)!important;line-height:1!important;color:var(--rose-e,#E0479E)!important;margin:0 0 14px!important}
.process .slide p{font-size:1.02rem!important;line-height:1.58}
.process .step-no{width:44px!important;height:44px!important;margin-bottom:14px}
.process .slide .copy .arrows{margin-top:22px!important}
@media(min-width:941px){
  .process{position:relative}
  .process .center-head{position:absolute!important;top:0;right:0;width:calc((100% - 56px)*.55);max-width:none!important;margin:0!important;text-align:left!important;z-index:2}
  .process .center-head .kicker{margin-bottom:12px}
  .process .center-head h2{font-size:clamp(2.6rem,3.9vw,4rem)!important;line-height:.92;margin:0 0 10px!important;text-align:left!important}
  .process .center-head .counter{text-align:left!important;margin:0!important}
  .process .slide .copy{align-self:start!important;padding-top:205px!important}
  .process .slides{margin-top:0!important}
}
/* Behind the scenes now plain white; the output section gets the animal print */
section.section.x-expert,section.section.x-expert.print-tiger,section.soft-section.print-tiger.x-expert{background:#fff!important;background-image:none!important}
section.section.x-output{background-color:#F1E9D7!important;background-image:linear-gradient(rgba(241,233,215,.84),rgba(241,233,215,.84)),url("textures/tiger.webp")!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
/* Ethogram insights spill down into the free space instead of scrolling the screen */
.s3 .lp-sheet{top:84cqw!important}
.s3.open.scroll .lp-sheet{transform:none!important}
.s3 .lp-sig{font-size:.69em!important;line-height:1.36!important;margin-top:.45em!important}
/* Willow's video: keep her whole face (ears to nose) in view */
.lp.s1 .lp-clip video{object-position:50% 68%}
.lp.s1 .lp-clip .still{background-position:50% 68%!important}
.lp.s2 .lp-clip video{object-position:50% 60%}
.lp.s3 .lp-clip{height:86cqw!important}
.lp.s3 .lp-clip video{object-position:50% 66%}
.lp.s3 .lp-clip .still{background-position:50% 66%!important}

/* v24h: phone mocks — "+N more" chip so the species rows don't read as the full list */
.lp-species span.more{border-style:dashed;color:#466060;background:transparent}
.s0 .lp-chips span.more{border-style:dashed;color:#466060}
.s0 .lp-chips span.more i{display:grid;place-items:center;background:#DCE5D7;color:#065143;font-style:normal;font-weight:700;font-size:1.15em;letter-spacing:-.02em}
/* v24h: grid children must not grow past their column (a long word like "tuotantoeläimet" was widening .chapter-copy to 400px on a 375px phone, so fv.js never saw an overflow to shrink) */
.chapter-card>*,.contact-grid>*,.slide>*,.layer>*,.x-grid>*{min-width:0}
/* v24h: five chips (4 species + "+9 more") fit the profile mock; before, the fifth chip was clipped by overflow:hidden */
.s0 .lp-chips{gap:1.7cqw}.s0 .lp-chips span{width:14.4cqw;padding:.9cqw .5cqw 1.2cqw}.s0 .lp-chips i{height:10cqw}

/* ===== v25 (23 Oct): phone fixes. Everything below is phone/tablet only; desktop is unchanged. ===== */
@media(max-width:640px){
  /* Home: water square frames the hose video evenly on all four sides, and the pair sits centered */
  .layer-art{aspect-ratio:auto!important;width:min(100%,340px);margin:0 auto;padding:20px;justify-self:center}
  .layer-art .layer-bg{inset:0;top:0;right:0;left:0;width:100%;height:100%}
  .layer-art .layer-vid{position:relative;left:auto;right:auto;bottom:auto;width:100%;aspect-ratio:4/4.4}

  /* Home + Coming next: cards give a small turn so people know they flip (mobile.js); no extra icon needed */
  .nx-flip .flip-front .nm:after{display:none!important}
  .flip.peek:not(.on) .flip-inner{animation:fv-peek 1.1s cubic-bezier(.3,.7,.3,1)}
  @keyframes fv-peek{0%{transform:rotateY(0)}35%{transform:rotateY(-34deg) scale(1.03)}65%{transform:rotateY(10deg)}100%{transform:rotateY(0)}}

  /* Home: "Come back and listen" shows three clips in a row */
  .listen .reel{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  /* horse, cow and pig: the dog clip is the same hose video shown higher up the page */
  .listen .reel figure:nth-child(3){display:none!important}
  .listen .reel figure:nth-child(4){display:block!important}
  .listen .reel figcaption{left:7px;right:7px;bottom:7px;font-size:.5rem;letter-spacing:.08em;line-height:1.4}

  /* How it works / Science / Contact heroes: phone crops with the animals centered (no empty space meant for desktop text) */
  .page-hero.split .bg.how-hero-bg{background-image:url('how-hero-m.webp')!important;background-position:center!important;background-size:cover;height:auto!important;aspect-ratio:1117/887}
  .page-hero.split .bg.science-hero-bg{background-image:url('science-hero-m.webp')!important;background-position:center!important;background-size:cover;height:auto!important;aspect-ratio:1203/870}
  .page-hero.split .bg.contact-hero-bg{background-image:url('cta-animals-m.webp')!important;background-position:center!important;background-size:cover;height:auto!important;aspect-ratio:1045/941}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.flip.peek .flip-inner{animation:none!important}}

/* How it works, "From clip to clarity" on phones and tablets:
   step title right under the heading, then the phone, the arrows, and the text; no timeline */
@media(max-width:940px){
  .process .center-head{margin-bottom:22px!important}
  .process .slide{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"title" "art" "arrows" "text"!important;gap:0!important;align-items:start!important;align-content:start!important}
  .process .slide .copy{display:contents}
  .process .slide .copy .step-no,.process .slide .copy h3{grid-area:title}
  .process .slide .copy .step-no{justify-self:center;width:40px!important;height:40px!important;font-size:1.05rem;margin:0 0 10px!important}
  .process .slide .copy h3{text-align:center;margin:50px 0 16px!important}
  .process .slide .slide-art{grid-area:art;height:min(558px,115vw)!important}
  .process .slide .copy .arrows{grid-area:arrows;justify-content:center;margin-top:14px!important}
  .process .slide .copy p{grid-area:text;margin:18px auto 0;max-width:560px}
  .process .timeline{display:none!important}
}

/* v25b: no ↻ arrow on the Coming next cards (the turn animation shows they flip) */
.nx-flip .flip-front .nm:after{display:none!important}
/* v25b: on touch screens a tap leaves the card "hovered", which kept it flipped; only the tap state (.on) flips it there, so a second tap turns it back */
@media(hover:none){
  .flip:hover:not(.on) .flip-inner,.flip:focus-visible:not(.on) .flip-inner{transform:none}
}