/* v18 — greener, pinker; navy retired to deep pine green */
:root{--navy:#0A2342;--pine:#0A2342;--rose:#FBDCE2;--blush:#FBDCE2;--blush-t:#FBDCE2;--char:#0A2342;--forest-d:#0A2342}

/* header: language picker after the store buttons */
@media(min-width:941px){.nav-stores{order:3}.lang{order:4;margin-left:12px;margin-right:0}}

/* hero: show the horse's ears */
@media(min-width:941px){.hero-full .hero-bg,.hero-bg{object-position:0% 14%}}

/* stat cards: pink and green first, blue as a hint */
.stat{border-top-color:var(--rose)!important}
.stat:nth-child(2){border-top-color:var(--sage)!important}
.stat:nth-child(3){border-top-color:var(--aqua)!important}
.stat:nth-child(4){border-top-color:var(--sage)!important}
.sp-stat{border-top-color:var(--rose)}
.sp-stat:nth-child(2){border-top-color:var(--sage)}
.sp-stat:nth-child(3){border-top-color:var(--aqua)}
.sp-stat:nth-child(4){border-top-color:var(--sage)}

/* tinted bands and callouts */
.final-sage{background:var(--aqua-t)}
.sp-card-aqua{background:var(--leaf-t)}
.thanks-hero{background:var(--blush-t)}

/* Instagram: fill the whole circle, no rim showing */
.socials a[href*="instagram"],.social-btn[href*="instagram"]{border:0;background-origin:border-box;background-size:140% 140%;background-position:30% 100%}

/* Coming next: square photos */
.nx-pic{aspect-ratio:1/1}

/* fewer big blue bands; pink stars */
.bg-aqua-t{background:var(--leaf-t)}
.stars{color:var(--rose)}

/* a little navy: pricing band and card titles */
.bg-forest#pricing,#pricing.bg-forest{background:var(--navy)}
h3{color:var(--navy)}

/* Coming next: flip cards (photo + name front, research back) */
.nx.nx-flip{background:none;border:0;border-radius:6px;overflow:visible;display:block;aspect-ratio:1/1;perspective:1400px}
.nx-flip .flip-front .nx-pic{position:absolute;inset:0;aspect-ratio:auto}
.nx-flip:hover .nx-pic img{transform:none}
.nx-flip .flip-front .nm b{font-size:clamp(1.3rem,2vw,1.75rem)}
.nx-flip .flip-back.nx-back{background:var(--tint);color:var(--pine);padding:22px 22px 20px;display:flex;flex-direction:column;border:1px solid rgba(10,35,66,.08)}
.nx-back .kicker{color:var(--forest);font-size:.66rem;margin-bottom:8px}
.nx-back h3{color:var(--navy);font-size:1.35rem;margin-bottom:10px}
.nx-back p{font-size:.9rem;line-height:1.48;color:var(--pine);margin:0 0 10px}
.nx-back .nx-src{margin-top:auto}
.nx-flip .flip-front:after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(10,35,66,.72))}
.nx-flip .flip-front .nm:after{content:"↻";font-family:var(--mono);font-size:1.05rem;opacity:.8}
.nx-flip .flip-back.nx-back{padding:18px 18px 16px;overflow-y:auto;scrollbar-width:thin}
.nx-back .kicker{margin-bottom:6px}
.nx-back h3{font-size:1.2rem;margin-bottom:8px}
.nx-back p{font-size:.84rem;line-height:1.42;margin-bottom:8px}
.nx-back .nx-src{font-size:.6rem}
@media(max-width:1100px){.nx-back p{font-size:.9rem;line-height:1.48}}

/* language menu with flags */
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 30px 0 11px;border:1.5px solid rgba(70,96,96,.35);border-radius:4px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23466060' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center/9px;cursor:pointer;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;color:var(--forest)}
.lang-btn:hover,.lang-btn:focus-visible,.lang.open .lang-btn{border-color:var(--forest)}
.flag{display:inline-flex;width:20px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(10,35,66,.15);flex:none}
.flag svg{width:100%;height:100%;display:block}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid rgba(10,35,66,.12);border-radius:6px;box-shadow:0 14px 34px rgba(10,35,66,.14);z-index:60;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:4px;font-family:var(--serif);font-size:.95rem;color:var(--pine)}
.lang-menu a:hover,.lang-menu a:focus-visible{background:var(--leaf-t)}
.lang-menu a[aria-current]{font-weight:600;background:rgba(70,96,96,.07)}
@media(max-width:940px){.lang-btn{min-height:46px}}

/* stats in heading green */
.stat .num,.stat .unit{color:var(--pine)}

/* pricing band: pink, dark text */
#pricing.bg-forest{background:var(--blush);color:var(--pine)}
#pricing.bg-forest h2,#pricing.bg-forest h3{color:var(--pine)}
#pricing.bg-forest .kicker{color:var(--forest)}
#pricing.bg-forest .lead,#pricing.bg-forest p{color:var(--pine)}
#pricing .price-list{border-top-color:rgba(10,35,66,.28)}
#pricing .price-line{border-bottom-color:rgba(10,35,66,.28);color:var(--pine)}

/* footer: very dark green */
.site-footer{background:#0A2342}

/* species pages: did-you-know (green) + misreads (pink) side by side, same height; being-around box (blue) below */
.sp-two:has(.sp-around){gap:24px;align-items:stretch}
.sp-card-sky{background:var(--aqua-t)}
.sp-around{grid-column:1/-1;display:flex;flex-direction:column;justify-content:center}
.sp-around p{margin:0;font-size:1.08rem;line-height:1.6;color:var(--pine);max-width:860px}
.sp-two:has(.sp-around) .sp-card-aqua,.sp-two:has(.sp-around) .sp-card-pink{height:100%}

/* other-species squares: keep heads in frame */
.sp-other img{object-position:50% 0%}
.sp-other img[src*="chicken"]{object-position:center}

/* logo lockup with tagline */
.brand img{width:172px}
@media(max-width:940px){.brand img{width:128px}}
.site-footer .footer-logo,.site-footer img[src*="logo"]{width:230px;height:auto}

/* breathing room around the logo lockup */
.brand{display:block;padding:14px 0 12px}
.brand img{width:164px}
@media(max-width:940px){.brand{padding:16px 0 14px}.brand img{width:120px}}

/* tighter spacing between sections */
.section{padding:84px 0}
@media(max-width:1100px){.section{padding:68px 0}}
@media(max-width:700px){.section{padding:54px 0}}

/* alternate section backgrounds so neighbours read as separate */
.bg-leaf{background:#DCE5D7}                 /* Look closer (and "Your cow, read in seconds") — soft sage */
#evidence.bg-white{background:#fff}          /* Curiosity, meet evidence — white */
.section:has(.quotes){background:#E0F0F8}    /* Useful, easy… — soft sky */
.section:has(.quotes) blockquote{background:#fff}

/* flip hint: hidden where people can hover, shown on touch screens (phones/tablets) */
.nx-flip .flip-front .nm:after{display:none}
@media(hover:none){.nx-flip .flip-front .nm:after{display:inline}}

/* Coming next: white intro, cream behind the card grid */
.section:has(> .container > .nx-grid){background:var(--parch)}

/* ===== v20 (16 Oct): final palette — navy, granite, jungle teal, muted teal, petal frost, light blue, cream, white =====
   Granite = buttons, kickers, small green text and the logo (6.7:1 on cream).
   Jungle teal = large type only: headline highlights, big numbers, bars, app icon (4:1). */
:root{
  --navy:#0A2342;--granite:#466060;--jungle:#57886C;--muted-teal:#81A684;--petal:#FBDCE2;--sky:#97D2FB;--sky-tint:#E0F0F8;--cream:#F1E9D7;--white:#FFFFFF;--muted-tint:#DCE5D7;
  --pine:var(--navy);--char:var(--navy);--forest-d:var(--navy);--forest:var(--granite);--slate:var(--granite);--muted:var(--granite);
  --sage:var(--muted-teal);--sage-soft:var(--muted-teal);--moss:var(--muted-teal);--leaf:var(--muted-teal);--melon:var(--muted-teal);
  --rose:var(--petal);--blush:var(--petal);--blush-t:var(--petal);--blush-tint:var(--petal);--sand-t:var(--petal);--melon-t:var(--petal);
  --clay:var(--jungle);--chestnut:var(--jungle);--sand:var(--jungle);
  --sage-tint:var(--muted-tint);--leaf-t:var(--muted-tint);--aqua:var(--sky);--aqua-t:var(--sky-tint);--parch:var(--cream)
}
h1 .accent,h2 .accent,h3 .accent,.stat .num,.stat .unit{color:var(--jungle)}
.stars{color:var(--jungle)}
.site-footer{background:var(--navy)}

/* v20b (16 Oct): granite is the main text colour (big titles and body); navy is secondary for smaller headers and titles */
:root{--char:var(--granite);--pine:var(--granite);--ink:var(--granite)}
body{color:var(--granite)}
h1,h2,.hero-full h1,.final h2,#pricing.bg-forest h2{color:var(--granite)}
h3,h4,.faq summary,details summary,.nx-back h3{color:var(--navy)}
.site-footer h4{color:var(--muted-teal)}
.ref-more summary{color:var(--granite)}
.site-footer,.site-footer p{color:var(--cream)}
.hero-full .lead,.bp p,.acc-body p,.refs li,.nx-body p,.listen,.sp-around p,.nx-back p{color:var(--granite)}

/* v20c (16 Oct): granite only for the logo and the big titles (h1, h2).
   Buttons, the announcement strip and other brand-green UI are jungle teal; text is navy. */
:root{--forest:var(--jungle);--char:var(--navy);--pine:var(--navy);--ink:var(--navy);--slate:var(--navy);--muted:var(--navy)}
body,.hero-full .lead,.bp p,.acc-body p,.refs li,.nx-body p,.listen,.sp-around p,.nx-back p,.lead,.section-lead{color:var(--navy)}
h1,h2,.hero-full h1,.final h2,#pricing.bg-forest h2{color:var(--granite)}
/* small labels and links stay readable: navy text, jungle teal for lines and fills */
.kicker,.section-kicker,.eyebrow,.nx-back .kicker,#pricing.bg-forest .kicker,.listen .kicker{color:var(--navy)}
.link-arrow,.btn-light,.btn-outline,.ref-more summary,.nx-src a,.lang-btn,.listen-head a{color:var(--navy)}
.nav-main a:after{background:var(--jungle)}
.lang-btn{border-color:rgba(87,136,108,.5)}
.btn,.download-btn,.strip,.step-no{background:var(--jungle);border-color:var(--jungle);color:var(--white)}
.btn-ghost,.download-row .download-btn+.download-btn{background:transparent;color:var(--navy);border-color:var(--jungle)}
.btn:hover,.download-btn:hover,.download-row .download-btn+.download-btn:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.final-sage .download-row .download-btn+.download-btn{background:var(--jungle);color:var(--white);border-color:var(--jungle)}
.bg-forest .download-btn,#pricing .download-btn,.bg-forest .download-row .download-btn+.download-btn,.nav-stores a,.nav-cta{background:var(--jungle);border-color:var(--jungle);color:var(--white)}
.bg-forest .download-btn:hover,#pricing .download-btn:hover,.nav-stores a:hover,.nav-cta:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}

/* colored sections are always separated by a neutral (cream or white) section */
.section:has(.quotes){background:var(--cream)}
/* footer: granite green (cream text 6.7:1) */
.site-footer{background:var(--granite)}
.site-footer h4{color:var(--cream);opacity:.85}
.footer-note{color:rgba(241,233,215,.85)}
.listen h2{color:var(--granite)}

/* v20d (16 Oct): a little Electric Rose and Pine Teal.
   Electric Rose (#E0479E) is decorative only (3.7:1 on cream): stars, separator dots, the first stat rule.
   Pine Teal (#065143) is the deep green: button hover and dark statement bands (white text 9.3:1). */
:root{--rose-e:#E0479E;--pine-teal:#065143}
.stars{color:var(--rose-e)}
.micro .sep{color:var(--rose-e)}
.stat:first-child,.sp-stat:first-child{border-top-color:var(--rose-e)!important}
.btn:hover,.download-btn:hover,.download-row .download-btn+.download-btn:hover,.bg-forest .download-btn:hover,#pricing .download-btn:hover,.nav-stores a:hover,.nav-cta:hover{background:var(--pine-teal);border-color:var(--pine-teal);color:var(--white)}
.why-empathy.bg-forest,#empathy.bg-forest{background:var(--pine-teal)}

/* announcement banner: Electric Rose with navy text (more readable on the pink than white) */
.strip{background:var(--rose-e);border-color:var(--rose-e);color:var(--navy)}
.strip *{color:var(--navy)}
.strip,.strip *{color:var(--navy)!important}

/* Animal print sections: one per page, real texture under a cream wash so it stays soft.
   A print section counts as a coloured section: keep cream or white sections either side. */
[class*="print-"]{background-color:var(--cream);background-size:620px auto;background-repeat:repeat;background-position:center}
.print-leopard{background-image:linear-gradient(rgba(241,233,215,.84),rgba(241,233,215,.84)),url("textures/leopard.webp")!important}
[class*="print-"]{background-size:cover!important;background-repeat:no-repeat!important}

/* one animal-print section per page: real textures from assets/textures, mirrored into seamless tiles, under a cream wash */
[class*="print-"]:not(.print-leopard){background-size:640px auto!important;background-repeat:repeat!important}
.print-dalmatian{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/dalmatian-tile.webp")!important}
.print-ocelot{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/ocelot-tile.webp")!important}
.print-zebra{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/zebra-tile.webp")!important}
.print-cheetah{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/cheetah-tile.webp")!important}
.print-cow{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/cow-hide-tile.webp")!important}
.print-guinea-fowl{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/guinea-fowl-tile.webp")!important}
.print-snow-leopard{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/snow-leopard-tile.webp")!important}
.print-tiger{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/tiger-tile.webp")!important}
.print-python{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/python-tile.webp")!important}
.print-giraffe{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/giraffe-tile.webp")!important}
.print-jaguar{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/jaguar-tile.webp")!important}
.print-white-tiger{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/white-tiger-tile.webp")!important}
.print-serval{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/serval-tile.webp")!important}
.print-leopard-3{background-image:linear-gradient(rgba(241,233,215,.85),rgba(241,233,215,.85)),url("textures/leopard-3-tile.webp")!important}