/* Gut Feeling — FINAL atmospheric hero, reference-accurate feel (October 2026)
   No other website pages, access-control components, or settings are restyled.
   The headline and button never drift; only illustrated microbes and lights move.
   Background microbes flow outward and fade fully as they pass beyond the hero. */

/* The left is luminous and legible; the right is deep botanical emerald. */
.main:has(#page-home.active) > .hero-atmosphere {
  height: 562px;
  background:linear-gradient(102deg,
    #eaf1e5 0%, #e4efdf 12%, #d9e9d9 26%,
    #b8d5bd 43%, #82b091 57%, #376e54 75%, #113b2c 100%);
  overflow: hidden;
  contain: paint;
}
.main:has(#page-home.active) > .hero-atmosphere::before {
  background:
    radial-gradient(ellipse 59% 81% at 4% 17%, rgba(255,255,250,.72), transparent 77%),
    radial-gradient(ellipse 29% 50% at 50% 36%, rgba(234,247,208,.18),transparent 82%),
    radial-gradient(ellipse 29% 73% at 99% 47%, rgba(4,42,29,.40),transparent 86%);
  z-index:1;
}
/* The hazy layer adds distant microbial depth, but the main organisms stay sharp. */
.main:has(#page-home.active) .hero-atmosphere .atmosphere-haze {
  right:-200px;top:-192px;width:1290px;height:835px;
  opacity:.19;
  filter:blur(34px) saturate(1.09);
  animation: gf-haze-breathe 23s ease-in-out infinite alternate;
}
@keyframes gf-haze-breathe {
  from {transform:translate3d(-12px, 9px, 0) scale(1.025)}
  to {transform:translate3d(18px,-14px,0) scale(1.08)}
}
/* Existing hand-drawn microorganisms are now a very faint secondary depth layer. */
.main:has(#page-home.active) .atmosphere-drifters { z-index:2; opacity:.36; }
.main:has(#page-home.active) .atmo-microbe { animation-duration:calc(var(--duration,16s) * 1.4); }

/* Natural microbe cutouts: multiple sizes, depths, timings and outward destinations.
   They move across and BEHIND the headline, exit the scene, and restart invisibly.
   The clipped atmospheric container prevents off-page or horizontal scrolling. */
.gf-final-ambient {position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;}
.gf-photo-drift {
  position:absolute;left:var(--left);top:var(--top);
  width:var(--size,98px);height:var(--height,var(--size,98px));
  background-image:var(--microbe-image);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:0;filter:blur(var(--blur,8px)) saturate(.92);
  will-change:transform,opacity;
  animation:gf-outward-fade var(--time,19s) linear infinite;
  animation-delay:var(--delay,0s);
  transform-origin:center;
}
@keyframes gf-outward-fade {
  0% {opacity:0;transform:translate3d(0,0,0) rotate(var(--angle,0deg)) scale(.68)}
  12% {opacity:var(--peak,.44)}
  50% {opacity:var(--peak,.44)}
  74% {opacity:.14}
  91% {opacity:0}
  100% {opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--angle,0deg) + var(--turn,32deg))) scale(var(--end-scale,1.14))}
}
.gf-pd-1 {--microbe-image:url('assets/ambient-green-rod.webp');--left:53%;--top:20%;--size:126px;--height:103px;--blur:10px;--peak:.34;--dx:-67vw;--dy:-24vh;--angle:-43deg;--turn:-31deg;--time:23s;--delay:-4s;}
.gf-pd-2 {--microbe-image:url('assets/ambient-ivory-rod.webp');--left:58%;--top:56%;--size:124px;--height:138px;--blur:13px;--peak:.32;--dx:-78vw;--dy:5vh;--angle:21deg;--turn:-68deg;--time:26s;--delay:-15s;}
.gf-pd-3 {--microbe-image:url('assets/ambient-purple-chain.webp');--left:78%;--top:60%;--size:80px;--blur:5px;--peak:.33;--dx:55vw;--dy:34vh;--angle:24deg;--time:18s;--delay:-10s;}
.gf-pd-4 {--microbe-image:url('assets/ambient-green-curve.webp');--left:48%;--top:74%;--size:160px;--height:121px;--blur:11px;--peak:.29;--dx:-61vw;--dy:51vh;--angle:-25deg;--turn:-25deg;--time:28s;--delay:-6s;}
.gf-pd-5 {--microbe-image:url('assets/ambient-peach-rod.webp');--left:83%;--top:18%;--size:91px;--height:113px;--blur:8px;--peak:.35;--dx:48vw;--dy:-27vh;--angle:-38deg;--time:24s;--delay:-11s;}
.gf-pd-6 {--microbe-image:url('assets/ambient-spherical.webp');--left:35%;--top:29%;--size:83px;--height:89px;--blur:13px;--peak:.29;--dx:-53vw;--dy:-23vh;--angle:14deg;--time:19s;--delay:-14s;}
.gf-pd-7 {--microbe-image:url('assets/ambient-yellow-chain.webp');--left:60%;--top:70%;--size:132px;--height:92px;--blur:7px;--peak:.40;--dx:-14vw;--dy:63vh;--angle:-18deg;--time:20s;--delay:-2s;}
.gf-pd-8 {--microbe-image:url('assets/ambient-mint-rod.webp');--left:74%;--top:36%;--size:106px;--height:123px;--blur:8px;--peak:.32;--dx:57vw;--dy:11vh;--angle:21deg;--time:22s;--delay:-19s;}
.gf-pd-9 {--microbe-image:url('assets/ambient-green-rod.webp');--left:47%;--top:52%;--size:104px;--height:83px;--blur:11px;--peak:.30;--dx:-57vw;--dy:-11vh;--angle:-43deg;--time:27s;--delay:-23s;}
.gf-pd-10 {--microbe-image:url('assets/ambient-spherical.webp');--left:92%;--top:51%;--size:96px;--height:96px;--blur:8px;--peak:.30;--dx:44vw;--dy:30vh;--angle:3deg;--time:25s;--delay:-6s;}
.gf-pd-11 {--microbe-image:url('assets/ambient-ivory-rod.webp');--left:65%;--top:7%;--size:86px;--height:112px;--blur:8px;--peak:.35;--dx:-16vw;--dy:-59vh;--angle:18deg;--time:21s;--delay:-8s;}
.gf-pd-12 {--microbe-image:url('assets/ambient-purple-chain.webp');--left:28%;--top:78%;--size:93px;--height:92px;--blur:13px;--peak:.25;--dx:-44vw;--dy:37vh;--angle:-19deg;--time:27s;--delay:-21s;}

/* The featured detailed microbes are crisp and almost stationary, like the screenshot.
   The image is feathered into the atmosphere; no square/photo-card outline. */
.main:has(#page-home.active) .hero {
  position:relative;min-height:476px;
  padding-top:47px;padding-bottom:55px;
  background:transparent!important;
  animation:none!important;
}
.main:has(#page-home.active) .hero-copy { z-index:5; }
.main:has(#page-home.active) .hero h1 {
  max-width:650px;
  font-size:clamp(39px,4.1vw,63px);
  line-height:1.115;
  letter-spacing:-2.1px;
  color:#092e25;
}
.main:has(#page-home.active) .hero h1 em {color:#16523c;-webkit-text-fill-color:#16523c;font-weight:400;font-style:italic;}
.main:has(#page-home.active) .hero-copy>p {color:#2a5141;font-size:15.5px;line-height:1.6;max-width:535px;}
.main:has(#page-home.active) .hero .primary-button {padding:16px 27px;min-height:55px;}
.main:has(#page-home.active) .hero-art {
  width:51%;max-width:685px;min-width:325px;height:418px;
  flex:0 1 51%;margin:-24px -18px -25px 0;opacity:1;
  filter:none;
  z-index:2;
}
.main:has(#page-home.active) .hero-art .microbiome-illustration {
  inset:-9% -8%;width:115%;height:119%;
  object-fit:contain;opacity:.98;
  -webkit-mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 43%,rgba(0,0,0,.94) 60%,rgba(0,0,0,.55) 77%,transparent 99%);
  mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 43%,rgba(0,0,0,.94) 60%,rgba(0,0,0,.55) 77%,transparent 99%);
  animation: gf-main-microbe-float 12s ease-in-out infinite alternate;
}
@keyframes gf-main-microbe-float {
  0%{transform:translate3d(-3px,4px,0) rotate(-.5deg) scale(.993)}
  50%{transform:translate3d(4px,-6px,0) rotate(.4deg) scale(1.012)}
  100%{transform:translate3d(6px,3px,0) rotate(-.25deg) scale(1.005)}
}
.main:has(#page-home.active) .hero-art .orbit{opacity:.23;}
.main:has(#page-home.active) .hero-art .art-caption{bottom:4%;}
/* Body below the hero retains the previously approved rounded treatment. */
.learning-surface {margin-top:-6px;border-radius:25px 25px 0 0;}

/* Phones retain the same illustration yet prioritize readable, tappable content. */
@media(max-width:1150px){
 .main:has(#page-home.active) .hero {padding-top:44px;padding-bottom:48px;}
 .main:has(#page-home.active) .hero-art {width:49%;margin-right:-15px;min-width:270px;}
}
@media(max-width:800px){
 .main:has(#page-home.active) > .hero-atmosphere {height:575px;}
 .main:has(#page-home.active) .hero {min-height:490px;padding-top:52px;padding-bottom:52px;}
 .main:has(#page-home.active) .hero-art {position:absolute;right:-96px;top:80px;width:440px;height:400px;max-width:none;min-width:0;opacity:.39;}
 .main:has(#page-home.active) .hero h1 {font-size:clamp(36px,6vw,53px);}
 .gf-photo-drift {opacity:0;}
 .gf-pd-4,.gf-pd-7,.gf-pd-10,.gf-pd-11 {display:none;}
}
@media(max-width:520px){
 .main:has(#page-home.active) > .hero-atmosphere {height:575px;}
 .main:has(#page-home.active) .hero {min-height:490px;padding-top:46px;padding-bottom:53px;}
 .main:has(#page-home.active) .hero-art {right:-168px;top:72px;width:425px;height:395px;opacity:.22;}
 .main:has(#page-home.active) .hero-copy {max-width:100%;}
 .main:has(#page-home.active) .hero h1 {font-size:clamp(33px,9.2vw,40px);letter-spacing:-1.4px;}
 .main:has(#page-home.active) .hero-copy>p {max-width:355px;font-size:13.5px;}
 .gf-photo-drift {filter:blur(calc(var(--blur,8px) + 3px)) saturate(.8);}
 .gf-pd-1,.gf-pd-3,.gf-pd-6,.gf-pd-8 {display:none;}
 .learning-surface {border-radius:24px 24px 0 0;}
}


/* PUBLIC LAUNCH VISUAL FIX — layered microbes without rectangular edges.
   Override only the homepage hero; the rest of Gut Feeling remains unchanged. */
.main:has(#page-home.active) > .hero-atmosphere {
  /* Continue the atmospheric background underneath the rounded content surface.
     This prevents the pale strip when the hero content grows or wraps. */
  height: max(790px, 95vh);
  min-height: 0;
  background: linear-gradient(106deg,
    #edf3e9 0%, #e7f0e3 15%, #d7e8d7 29%,
    #b6d4bb 44%, #83ae91 59%, #3b745a 77%, #103d2e 100%);
}
.main:has(#page-home.active) .hero {
  min-height: 505px;
  padding-top: 54px;
  padding-bottom: 56px;
  isolation: isolate;
}
.main:has(#page-home.active) .hero-copy {
  flex: 0 1 62%;
  width: 62%;
  max-width: 775px;
  z-index: 5;
}
.main:has(#page-home.active) .hero h1 {
  max-width: 760px;
  font-size: clamp(40px, 3vw, 55px);
  letter-spacing: -2.3px;
  line-height: 1.13;
}
.main:has(#page-home.active) .hero-art {
  position: absolute;
  top: 4px;
  right: -38px;
  width: min(58%, 835px);
  height: 495px;
  min-width: 0;
  max-width: none;
  margin: 0;
  filter: none;
  z-index: 2;
  pointer-events:none;
}
.main:has(#page-home.active) .hero-art .microbiome-illustration {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .99;
  /* Feathered transparent asset + additional edge mask avoid rectangular crop. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,
    #000 0%, #000 48%, rgba(0,0,0,.86) 65%, rgba(0,0,0,.35) 80%, transparent 99%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,
    #000 0%, #000 48%, rgba(0,0,0,.86) 65%, rgba(0,0,0,.35) 80%, transparent 99%);
}
.main:has(#page-home.active) .hero-art .art-caption {
  bottom: 9%;
  left: 44%;
  right: auto;
  white-space:nowrap;
  text-shadow: 0 2px 9px rgba(11,62,43,.7);
}
.main:has(#page-home.active) .learning-surface {
  position:relative;
  z-index:5;
  margin-top:-15px;
  border-radius: 28px 28px 0 0;
  box-shadow: none;
  border-top:0;
}
@media (max-width: 1150px) {
  .main:has(#page-home.active) .hero-copy {flex-basis:62%;width:62%;}
  .main:has(#page-home.active) .hero h1 {font-size:clamp(37px,3.5vw,46px);letter-spacing:-1.85px;}
  .main:has(#page-home.active) .hero-art {right:-65px; width:60%;height:475px;}
}
@media (max-width: 800px) {
  .main:has(#page-home.active) > .hero-atmosphere {height:max(740px,92vh);}
  .main:has(#page-home.active) .hero {min-height:485px;padding:46px 27px 48px;}
  .main:has(#page-home.active) .hero-copy {width:100%; max-width:660px; flex-basis:auto;}
  .main:has(#page-home.active) .hero h1 {font-size:clamp(36px,5.6vw,51px);letter-spacing:-1.7px;}
  .main:has(#page-home.active) .hero-art {top:52px;right:-115px;width:465px;height:410px;opacity:.30;}
  .main:has(#page-home.active) .learning-surface {margin-top:-15px;border-radius:25px 25px 0 0;}
}
@media (max-width:520px) {
  .main:has(#page-home.active) > .hero-atmosphere {height:max(730px,93vh);}
  .main:has(#page-home.active) .hero {min-height:485px;padding:39px 19px 53px;}
  .main:has(#page-home.active) .hero h1 {font-size:clamp(33px,8.7vw,40px);letter-spacing:-1.3px;}
  .main:has(#page-home.active) .hero-art {right:-178px;top:65px;width:420px;height:390px;opacity:.24;}
  .main:has(#page-home.active) .hero-art .art-caption {display:none;}
  .main:has(#page-home.active) .learning-surface {margin-top:-15px;border-radius:23px 23px 0 0;}
}

/* The mobile launch sheet capped negative-margin full-bleed sections to 100% of
   the padded main content, leaving a 38px exposed strip at the right edge.
   Restore full-bleed sizing while preserving overflow safety. */
@media (max-width:800px) {
  .main:has(#page-home.active) .hero,
  .main:has(#page-home.active) .learning-surface {
    max-width:none;
    width:auto;
  }
}

/* Preserve the screenshot's detailed, colourful microbiome higher in the scene.
   Only the image moves gently; the copy and navigation do not move. */
@media (min-width:1151px) {
  .main:has(#page-home.active) .hero-art {top:-48px;height:535px;}
  .main:has(#page-home.active) .hero-art .microbiome-illustration {
    filter:saturate(1.12) contrast(1.045);
  }
}