:root{
  /* New immersive parallax background colors */
  --green-600: #3f7c4c;
  --green-700: #2f6d3d;
  --green-500: #4f8d5a;
  --forest-deep: #1a3a2e;
  --forest-mid: #2d5a45;
  --forest-light: #4a7c59;
  --moss: #8fb996;
  --leaf-shadow: rgba(26, 58, 46, 0.4);
  
  /* Base color variables */
  --ink: #1a1a1a;
  --muted: #5a5a5a;
  --bg: #ffffff;
  --surface: #ffffff;
  --ring: rgba(63, 124, 76, 0.4);
  --green-100: rgba(143, 185, 150, 0.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color:var(--ink);
  /* Leafy, immersive forest backdrop with clear depth */
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(180deg, #edf8f0 0%, #d7eedc 35%, #c2e4cc 70%, #a8d7b6 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Parallax leaf canopy (near layer) */
body::before {
  content: '';
  position: fixed;
  inset: -10% -10% -10% -10%;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2396ddb0' stop-opacity='0.3'/%3E%3Cstop offset='1' stop-color='%2378c894' stop-opacity='0.36'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%23619075' stroke-opacity='0.22'%3E%3Cpath d='M150 70 C170 85 185 105 187 125 C189 145 175 160 150 166 C125 160 111 145 113 125 C115 105 130 85 150 70 Z'/%3E%3Cpath d='M90 160 C105 172 116 188 118 202 C120 216 110 228 90 232 C70 228 60 216 62 202 C64 188 75 172 90 160 Z' transform='rotate(-25 90 196)'/%3E%3Cpath d='M215 150 C230 162 240 178 242 192 C244 206 234 218 215 222 C196 218 186 206 188 192 C190 178 200 162 215 150 Z' transform='rotate(35 215 190)'/%3E%3C/g%3E%3Cg fill='none'%3E%3Cpath d='M150 78 C150 90 150 110 150 156' stroke='%23619075' stroke-opacity='0.28' stroke-width='1'/%3E%3Cpath d='M150 100 C142 96 134 92 126 88' stroke='%23619075' stroke-opacity='0.22' stroke-width='0.7'/%3E%3Cpath d='M150 110 C158 106 166 102 174 98' stroke='%23619075' stroke-opacity='0.22' stroke-width='0.7'/%3E%3Cpath d='M90 180 C84 176 78 172 72 168' stroke='%23619075' stroke-opacity='0.2' stroke-width='0.6'/%3E%3Cpath d='M215 176 C221 172 227 168 233 164' stroke='%23619075' stroke-opacity='0.2' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%239fdcbc' stop-opacity='0.28'/%3E%3Cstop offset='1' stop-color='%2383cea3' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g2)' stroke='%23679c83' stroke-opacity='0.2'%3E%3Cpath d='M130 60 C148 72 160 90 161 107 C162 124 150 136 130 141 C110 136 98 124 99 107 C100 90 112 72 130 60 Z'/%3E%3Cpath d='M70 150 C82 160 90 172 91 184 C92 196 84 204 70 207 C56 204 48 196 49 184 C50 172 58 160 70 150 Z' transform='rotate(20 70 180)'/%3E%3C/g%3E%3Cg fill='none'%3E%3Cpath d='M130 67 C130 78 130 95 130 132' stroke='%23679c83' stroke-opacity='0.26' stroke-width='0.9'/%3E%3Cpath d='M130 88 C123 84 116 80 109 76' stroke='%23679c83' stroke-opacity='0.2' stroke-width='0.6'/%3E%3Cpath d='M70 170 C66 168 62 166 58 164' stroke='%23679c83' stroke-opacity='0.18' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px, 420px 420px;
  background-position: 0 0, 210px 160px;
  opacity: 0.3;
  filter: blur(0.3px);
  animation: driftLeavesNear 26s linear infinite;
}

/* Parallax leaf canopy (far layer) */
body::after {
  content: '';
  position: fixed;
  inset: -10% -10% -10% -10%;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2398d8a6' stop-opacity='0.18'/%3E%3Cstop offset='1' stop-color='%2371be86' stop-opacity='0.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g2)'%3E%3Cpath d='M140 410 C95 345 120 255 220 225 C280 205 350 220 400 275 C350 290 305 325 290 375 C270 425 205 470 140 410Z'/%3E%3Cpath d='M385 120 C340 90 260 95 220 135 C270 145 310 185 330 235 C350 285 405 305 445 285 C425 235 410 165 385 120Z'/%3E%3Cpath d='M325 360 C295 330 300 280 350 260 C380 248 405 255 420 272 C390 278 365 298 355 322 C345 346 338 360 325 360Z'/%3E%3C/g%3E%3Cpath d='M150 370 C195 330 260 300 300 270' stroke='%236aa979' stroke-opacity='0.2' stroke-width='2' fill='none'/%3E%3Cpath d='M260 170 C290 195 305 220 315 250' stroke='%236aa979' stroke-opacity='0.18' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-size: 520px 520px;
  opacity: 0.28;
  filter: blur(0.6px);
  animation: driftLeavesFar 70s linear infinite;
}

@keyframes driftLeavesNear {
  0%   { background-position: 0 0, 210px 160px; }
  100% { background-position: 300px 300px, 630px 580px; }
}

@keyframes driftLeavesFar {
  0%   { transform: translate3d(0, 0, 0) scale(1.01); background-position: 0 0; }
  100% { transform: translate3d(80px, -60px, 0) scale(1.04); background-position: 520px 520px; }
}

img{max-width:100%;display:block}
.container{width:min(1100px, 92%); margin-inline:auto; position: relative; z-index: 1;}
.narrow{width:min(800px, 92%)}
.section{padding: clamp(1.5rem, 2vw + .5rem, 3rem) 0; position: relative;}
.section.alt{background: transparent; backdrop-filter: none; border-radius: 0; margin: 1rem 0; padding: clamp(1.5rem, 2vw + .5rem, 3rem);}
.native-guide .guide-section{
  border-radius: 16px;
  margin: .5rem 0;
  padding: clamp(1rem, 1.4vw + .3rem, 2.2rem);
  background: transparent;
  box-shadow: none;
}
.native-guide .guide-section--intro{
  background: transparent;
}
.native-guide .guide-section--why{
  background: transparent;
}
.native-guide .guide-section--start{
  background: transparent;
}
.native-guide .guide-section--plants{
  background: transparent;
}
.guide-compact .section{
  padding-top: 1rem;
  padding-bottom: 1.6rem;
}
.guide-compact .section h2,
.guide-compact .section h1{
  margin-top: .1rem;
}
.lede{color:var(--muted); margin-top:-.25rem}
.small{font-size:.9rem; color:var(--muted)}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{position:static; width:auto; height:auto; padding:.5rem 1rem; background:var(--surface); box-shadow:0 0 0 3px var(--ring)}

.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(120%) blur(12px);
  background: rgba(168, 214, 187, 0.95);
  border-bottom:1px solid rgba(98, 154, 116, 0.5);
  box-shadow: 0 2px 10px rgba(26, 58, 46, 0.18);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem}
.logo{height:36px; width:auto; border-radius:6px; object-fit:cover}
.brand-name{font-weight:600; letter-spacing:.2px}
.nav{display:flex; gap:.8rem; list-style:none; margin:0; padding:0}
.nav a{display:block; padding:.4rem .7rem; border-radius:999px; text-decoration:none; color:inherit}
.nav a:hover, .nav a:focus{background:var(--green-100)}

.hero{padding-top:clamp(1rem, 3vw, 3rem); min-height:auto}
.hero-inner{display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center}
.hero-logo{width:clamp(120px, 18vw, 220px); height:auto; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.10)}
.hero-copy h1{font-size:clamp(2rem, 2.4vw + 1rem, 2.9rem); margin:.2rem 0}
.tagline{font-size:clamp(1.05rem, 1.1vw + .7rem, 1.3rem); color:var(--muted); margin:.2rem 0 1rem}

.cta-row{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 0}
.btn{
  --pad: .72rem 1rem; display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color:white; background:linear-gradient(180deg, var(--green-600), var(--green-700));
  padding:var(--pad); border-radius:999px; font-weight:600; letter-spacing:.2px;
  box-shadow:0 8px 20px rgba(47,109,61,.22);
}
.btn::before{content:attr(data-emoji)}
.btn:hover, .btn:focus{background:linear-gradient(180deg, var(--green-500), var(--green-600)); box-shadow:0 10px 26px rgba(47,109,61,.26)}
.btn:focus{outline:none; box-shadow:0 0 0 3px var(--ring), 0 8px 22px rgba(47,109,61,.22)}

.sound-toggle{margin-top:1rem}
.link-button{background:none; border:none; color:var(--green-700); padding:0; font:inherit; text-decoration:underline; cursor:pointer}
.link-button:focus{outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:6px}
.sound-note{margin:.3rem 0 0; color:var(--muted)}

.cards{display:grid; gap:1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.card{background:linear-gradient(180deg, rgba(224,245,230,.9), rgba(234,248,237,.75)); border:1px solid rgba(128, 170, 140, .35); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 10px 24px rgba(0,0,0,.05); position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(220px 140px at 10% 0%, rgba(121, 180, 140, .18), transparent 60%); pointer-events:none}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.08)}
.card h3{margin-top:.2rem}
.card-link{display:inline-block; margin-top:.5rem; color:var(--green-700); text-decoration:none}
.card-link[aria-disabled="true"]{opacity:.6; cursor:not-allowed}

.checklist{display:grid; gap:.4rem; list-style:none; padding:0}
.checklist li{padding-left:1.6rem; position:relative}
.checklist li::before{content:"🌿"; position:absolute; left:0}

.breathe{counter-reset: step; padding-left:1rem}
.breathe li{margin:.4rem 0; font-size: 1.12rem; font-weight: 600}
.breathe li.is-active{
  background: rgba(143, 220, 170, 0.35);
  border-radius: 10px;
  padding: .35rem .6rem;
  box-shadow: inset 0 0 0 1px rgba(90, 170, 120, 0.35);
}

.section h2{margin:.1rem 0 .4rem; text-align:center; letter-spacing:.2px}
.section h2::after{content:""; display:block; width:64px; height:3px; margin:.5rem auto 0; border-radius:3px; background:linear-gradient(90deg, var(--green-600), var(--green-500))}

.site-footer{border-top:1px solid rgba(143, 185, 150, 0.3); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); position: relative; z-index: 1;}
.footer-inner{padding:1.2rem 0; text-align:center}

@media (max-width: 700px){
  .hero-logo{margin-inline:auto}
  .brand-name{display:none}
}

/* Calm & Ground layout */
#calm .calm-inner{display:grid; grid-template-columns: min(510px, 51%) 1fr; gap:.8rem; align-items:center}
#calm .calm-media img{width:100%; height:auto; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08)}
#calm .calm-content{display:flex; flex-direction:column; gap:.4rem; justify-content:center}
#calm .calm-lede{font-weight:700; font-size:clamp(1.2rem, 1.3vw + 1rem, 1.6rem)}
#calm .calm-lede{font-weight:700; font-size:clamp(1.1rem, 1.1vw + .9rem, 1.4rem); margin:.1rem 0 .25rem}
#calm .breathe{margin-top:.15rem}

/* Calm Timer UI */
#calm .timer-block{display:flex; align-items:center; gap:.8rem; margin-top:.4rem}
#calm .timer-display{font-weight:700; font-size:clamp(1.2rem, 1.3vw + 1rem, 1.6rem); color:var(--green-700)}

@media (max-width: 700px){
  #calm .calm-inner{grid-template-columns: 1fr}
}