/* ==========================================================================
   Fern — /fern/** (landing, privacy, terms, support; English only for now)
   Tokens from the Fern app (docs/SPEC.md §3): Moss ground, Canopy cards,
   Shoot for the one action, Mist / Sage text, Outfit for display and
   numbers (the timer is Outfit 500), Manrope for body. The app is dark
   only, so these pages are dark in both system themes, like the app.
   ========================================================================== */
:root {
  color-scheme: dark;
  --moss: #0E2A20; --canopy: #133528; --canopy-raised: #163A2D; --fern: #2B5A47;
  --shoot: #C8F25A; --mist: #EAF5EC; --sage: #A7C4B1;
  --clay: #DE8C62; --petal: #FF7FA6; --sun: #FFD34D;
  --common: #7FD099; --rare: #6FB7FF; --epic: #B48CFF;
  --line: #21483A;
  --r-card: 24px; --r-tile: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--moss); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--moss); color: var(--mist);
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-synthesis: none;
}
img, svg { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--shoot); outline-offset: 3px; border-radius: 8px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--shoot); color: var(--moss); padding: 10px 14px; border-radius: 999px; font-weight: 700; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.lwrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- brand (curl + "fern" in Outfit 500, as on the Home board header) ---- */
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--mist); }
.brand .mark { width: 32px; height: 32px; flex: none; }
.wordmark { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -.02em; line-height: 1; }

/* ---- header / footer ---- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1080px; margin: 0 auto; padding: 16px; }
.site-header nav { display: flex; align-items: center; gap: 8px; }
.nav-link { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 10px; color: var(--sage); }
.nav-link:hover { color: var(--mist); }
.pill-btn { text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; background: var(--canopy-raised); color: var(--mist); }
.pill-btn:hover { background: var(--fern); }
.site-footer { margin-top: auto; width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; padding: 32px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--sage); }
.site-footer .brand .mark { width: 26px; height: 26px; }
.site-footer .wordmark { font-size: 22px; }
.footer-main { display: flex; flex-direction: column; gap: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start; }
.footer-links a, .studio a { color: var(--sage); }
.footer-links a:hover, .studio a:hover { color: var(--mist); }
main { padding-bottom: 56px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--shoot); color: var(--moss); font-weight: 700; font-size: 17px; text-decoration: none; transition: transform .12s var(--ease); }
.btn:active { transform: scale(.96); }
.btn.secondary { background: var(--canopy-raised); color: var(--mist); }
.btn.secondary:hover { background: var(--fern); }

/* ---- App Store button (placeholder until the listing is live; data-app-store gets the real URL) ---- */
.store-btns { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.store-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px 8px 16px; border-radius: 18px; background: var(--canopy-raised); color: var(--mist); text-decoration: none; box-shadow: inset 0 0 0 1px var(--fern); }
.store-btn > svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.store-btn > span { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.store-btn small { font-size: 11px; font-weight: 600; color: var(--sage); }
.store-btn b { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.store-btn[aria-disabled="true"] { cursor: default; }
.store-btn[aria-disabled="true"] > svg, .store-btn[aria-disabled="true"] > span { opacity: .85; }
.store-btn[aria-disabled="true"]::after { content: "Soon"; position: absolute; top: -10px; right: -8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 5px 8px; border-radius: 999px; background: var(--shoot); color: var(--moss); box-shadow: 0 6px 14px rgba(0,0,0,.35); }

/* ---- legal pages ---- */
.legal-main { padding-top: 8px; }
.legal-head { padding: 16px 0 24px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--shoot); }
.legal-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 8vw, 52px); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; }
.lede { margin: 14px 0 0; color: var(--sage); font-size: 17px; }
.lede a { color: var(--shoot); font-weight: 700; }
.prose.card { padding: 28px 24px; border-radius: var(--r-card); background: var(--canopy); }
.prose section { scroll-margin-top: 16px; }
.prose section + section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.prose h3 { margin: 16px 0 6px; font-size: 16px; font-weight: 700; }
.prose p { margin: 0 0 12px; color: var(--sage); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 12px; padding-left: 22px; color: var(--sage); }
.prose ul:last-child { margin-bottom: 0; }
.prose li { margin: 0 0 10px; }
.prose li:last-child { margin-bottom: 0; }
.prose li::marker { color: var(--shoot); }
.prose strong { font-weight: 700; color: var(--mist); }
.prose a { color: var(--shoot); font-weight: 700; overflow-wrap: anywhere; }
.prose .tldr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.prose .tldr li { margin: 0; padding: 16px 18px; border-radius: var(--r-tile); background: var(--canopy-raised); color: var(--sage); font-size: 15px; line-height: 1.45; }
.prose .tldr li b { display: block; margin-bottom: 4px; color: var(--mist); font-size: 16px; font-weight: 700; }
.prose .tldr li:first-child { background: var(--shoot); color: #2C4A1E; }
.prose .tldr li:first-child b { color: var(--moss); }
.table-scroll { overflow-x: auto; margin: 0 0 12px; border-radius: var(--r-tile); background: var(--canopy-raised); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; color: var(--sage); }
.prose th { color: var(--mist); font-weight: 700; }
.prose thead th { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); border-bottom: 1px solid var(--line); }
.prose tbody tr + tr th, .prose tbody tr + tr td { border-top: 1px solid var(--line); }
.prose tbody th { min-width: 120px; }

/* ---- FAQ (support + landing) ---- */
.faq-list { display: grid; gap: 8px; }
.faq-item { background: var(--canopy); border-radius: var(--r-tile); padding: 0 20px; }
.faq-item[open] { background: var(--canopy-raised); }
.faq-item summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fern); color: var(--mist); display: grid; place-items: center; font-weight: 600; font-size: 18px; line-height: 1; }
.faq-item[open] summary::after { content: "−"; background: var(--shoot); color: var(--moss); }
.faq-item p, .faq-item ul { margin: 0 0 18px; color: var(--sage); }
.faq-item ul { padding-left: 20px; }
.faq-item li { margin-bottom: 6px; }
.faq-item li::marker { color: var(--shoot); }
.faq-item strong { color: var(--mist); }
.faq-item a { color: var(--shoot); font-weight: 700; }
.contact-callout { margin: 24px 0 0; font-weight: 600; color: var(--sage); }
.contact-callout a { color: var(--shoot); }

@media (max-width: 640px) {
  .prose .tldr { grid-template-columns: minmax(0, 1fr); }
  .prose.card { padding: 24px 18px; }
  .site-header nav .nav-link.hide-sm { display: none; }
  /* processor table becomes one card per provider */
  .table-scroll { overflow: visible; background: none; }
  .prose table.stack thead { display: none; }
  .prose table.stack, .prose table.stack tbody, .prose table.stack tr, .prose table.stack th, .prose table.stack td { display: block; width: 100%; }
  .prose table.stack tr { padding: 14px 16px; border-radius: var(--r-tile); background: var(--canopy-raised); }
  .prose table.stack tr + tr { margin-top: 8px; }
  .prose table.stack tbody tr + tr th, .prose table.stack tbody tr + tr td { border-top: 0; }
  .prose table.stack th, .prose table.stack td { padding: 0; }
  .prose table.stack th { font-size: 17px; margin-bottom: 6px; }
  .prose table.stack td + td { margin-top: 6px; }
  .prose table.stack td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ==========================================================================
   Landing (/fern/). Plant art and motion lifted 1:1 from the Fern design bundle:
   anim.css (10 s growth timeline) + the Focus, Home, SeedDrop, GardenNight, Eggs
   and Splash boards. Plant SVGs come from design/catalogue.json of the Fern repo.
   ========================================================================== */
@keyframes k-all{0%{opacity:0}3%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes k-seed{0%{transform:translateY(-34px) scale(1)}6%{transform:translateY(0) scale(1.15,.85)}8%,11%{transform:translateY(0) scale(1)}16%,100%{transform:translateY(3px) scale(0)}}
@keyframes k-draw{0%,12%{stroke-dashoffset:100}46%,100%{stroke-dashoffset:0}}
@keyframes k-draw2{0%,22%{stroke-dashoffset:100}52%,100%{stroke-dashoffset:0}}
@keyframes k-p1{0%,20%{transform:scale(0) rotate(-22deg)}29%{transform:scale(1.08) rotate(3deg)}33%,100%{transform:scale(1) rotate(0)}}
@keyframes k-p2{0%,28%{transform:scale(0) rotate(-22deg)}37%{transform:scale(1.08) rotate(3deg)}41%,100%{transform:scale(1) rotate(0)}}
@keyframes k-p3{0%,36%{transform:scale(0) rotate(-22deg)}45%{transform:scale(1.08) rotate(3deg)}49%,100%{transform:scale(1) rotate(0)}}
@keyframes k-p4{0%,44%{transform:scale(0) rotate(-22deg)}53%{transform:scale(1.08) rotate(3deg)}57%,100%{transform:scale(1) rotate(0)}}
@keyframes k-p5{0%,52%{transform:scale(0) rotate(-22deg)}61%{transform:scale(1.08) rotate(3deg)}65%,100%{transform:scale(1) rotate(0)}}
@keyframes k-head{0%,40%{transform:scale(0) rotate(-22deg)}50%{transform:scale(1.08) rotate(3deg)}54%,100%{transform:scale(1) rotate(0)}}
@keyframes k-bl{0%,58%{transform:scale(0) rotate(-50deg)}68%{transform:scale(1.1) rotate(5deg)}73%,100%{transform:scale(1) rotate(0)}}
@keyframes k-bl2{0%,62%{transform:scale(0) rotate(-50deg)}72%{transform:scale(1.1) rotate(5deg)}77%,100%{transform:scale(1) rotate(0)}}
@keyframes k-tA{0%,54%{transform:rotate(-8deg)}72%,100%{transform:rotate(-22deg)}}
@keyframes k-tB{0%,54%{transform:rotate(8deg)}72%,100%{transform:rotate(22deg)}}
@keyframes k-tC{0%,54%{transform:rotate(-16deg)}72%,100%{transform:rotate(-46deg)}}
@keyframes k-tD{0%,54%{transform:rotate(16deg)}72%,100%{transform:rotate(46deg)}}
@keyframes k-grow{0%,12%{transform:scale(.15)}42%,100%{transform:scale(1)}}
@keyframes k-u1{0%,26%{transform:scale(0) rotate(-35deg)}44%,100%{transform:scale(1) rotate(0)}}
@keyframes k-u2{0%,36%{transform:scale(0) rotate(35deg)}54%,100%{transform:scale(1) rotate(0)}}
@keyframes k-u3{0%,48%{transform:scale(0) rotate(-35deg)}66%,100%{transform:scale(1) rotate(0)}}
@keyframes k-spark{0%,62%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(.3)}}
@keyframes k-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes k-bar{0%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes k-l1{0%,14%{opacity:1}17%,100%{opacity:.35}}
@keyframes k-l2{0%,14%{opacity:.35}17%,38%{opacity:1}41%,100%{opacity:.35}}
@keyframes k-l3{0%,38%{opacity:.35}41%,57%{opacity:1}60%,100%{opacity:.35}}
@keyframes k-l4{0%,57%{opacity:.35}60%,94%{opacity:1}97%,100%{opacity:.35}}
@keyframes k-glow{0%,58%{opacity:0;transform:scale(.6)}72%,92%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.vb{transform-box:view-box;transform-origin:0 0}
.fbc{transform-box:fill-box;transform-origin:50% 100%}
.fbr{transform-box:fill-box;transform-origin:100% 100%}
.fbl{transform-box:fill-box;transform-origin:0% 100%}
.fc{transform-box:fill-box;transform-origin:50% 50%}
.a-all{animation:k-all 10s linear infinite}
.a-seed{animation:k-seed 10s ease-in-out infinite}
.a-draw{stroke-dasharray:100;animation:k-draw 10s ease-out infinite}
.a-draw2{stroke-dasharray:100;animation:k-draw2 10s ease-out infinite}
.a-p1{animation:k-p1 10s ease-out infinite}
.a-p2{animation:k-p2 10s ease-out infinite}
.a-p3{animation:k-p3 10s ease-out infinite}
.a-p4{animation:k-p4 10s ease-out infinite}
.a-p5{animation:k-p5 10s ease-out infinite}
.a-head{animation:k-head 10s ease-out infinite}
.a-bl{animation:k-bl 10s ease-out infinite}
.a-bl2{animation:k-bl2 10s ease-out infinite}
.a-tA{animation:k-tA 10s cubic-bezier(.2,.9,.3,1.3) infinite}
.a-tB{animation:k-tB 10s cubic-bezier(.2,.9,.3,1.3) infinite}
.a-tC{animation:k-tC 10s cubic-bezier(.2,.9,.3,1.3) infinite}
.a-tD{animation:k-tD 10s cubic-bezier(.2,.9,.3,1.3) infinite}
.a-grow{animation:k-grow 10s cubic-bezier(.3,.8,.3,1.1) infinite}
.a-u1{animation:k-u1 10s cubic-bezier(.2,.9,.3,1.15) infinite}
.a-u2{animation:k-u2 10s cubic-bezier(.2,.9,.3,1.15) infinite}
.a-u3{animation:k-u3 10s cubic-bezier(.2,.9,.3,1.15) infinite}
.a-spark{animation:k-spark 10s ease-out infinite}

.a-bar{transform-origin:left;animation:k-bar 10s linear infinite}
.a-l1{animation:k-l1 10s linear infinite}
.a-l2{animation:k-l2 10s linear infinite}
.a-l3{animation:k-l3 10s linear infinite}
.a-l4{animation:k-l4 10s linear infinite}
.a-glow{animation:k-glow 10s ease-out infinite}
@keyframes k-show{0%,62%{opacity:0}70%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes k-mote{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
@keyframes k-tw{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.15)}}
@keyframes k-ember{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(6px,-46px);opacity:0}}
@keyframes k-ripple{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes k-fall{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(-10px,60px) rotate(220deg);opacity:0}}
@keyframes k-halo{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.55;transform:scale(1.08)}}
@keyframes k-sheen{0%,60%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(420%) skewX(-20deg)}}
@keyframes k-chip{0%,100%{box-shadow:0 0 0 0 rgba(255,211,77,.0)}50%{box-shadow:0 0 18px 2px rgba(255,211,77,.55)}}
.a-show{animation:k-show 10s linear infinite}
.mote{transform-box:fill-box;animation:k-mote 2.6s ease-out infinite}
.tw{transform-box:fill-box;transform-origin:50% 50%;animation:k-tw 1.8s ease-in-out infinite}
.ember{transform-box:fill-box;animation:k-ember 2.2s ease-out infinite}
.ripple{transform-box:fill-box;transform-origin:50% 50%;animation:k-ripple 3s ease-out infinite}
.fall{transform-box:fill-box;animation:k-fall 3.4s ease-in infinite}
.halo{transform-box:fill-box;transform-origin:50% 50%;animation:k-halo 3s ease-in-out infinite;filter:blur(7px)}
.sheen{animation:k-sheen 4s ease-in-out infinite}
.chipglow{animation:k-chip 2.4s ease-in-out infinite}
@keyframes k-snap{0%,78%{transform:rotate(0)}82%,90%{transform:rotate(var(--sn,24deg))}97%,100%{transform:rotate(0)}}
@keyframes k-swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes k-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-shim{0%,100%{filter:hue-rotate(0deg) saturate(1)}50%{filter:hue-rotate(-28deg) saturate(1.25)}}
.snapL{animation:k-snap 5s ease-in-out infinite;--sn:26deg}
.snapR{animation:k-snap 5s ease-in-out infinite;--sn:-26deg}
.swing{animation:k-swing 3.6s ease-in-out infinite}
.floaty{animation:k-floaty 3.2s ease-in-out infinite}
.spin{animation:k-spin 18s linear infinite}
.shim{animation:k-shim 5s ease-in-out infinite}
/* --- SeedDrop board --- */
@keyframes sd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sd-rise{0%{transform:translateY(300px) scale(.55) rotate(-10deg);opacity:0}60%{opacity:1}100%{transform:translateY(0) scale(1.18) rotate(0)}}
@keyframes sd-shake{0%{transform:translate(0,0) rotate(0)}10%{transform:translate(-1px,0) rotate(-1deg)}20%{transform:translate(1px,0) rotate(1deg)}30%{transform:translate(-2px,1px) rotate(-2deg)}40%{transform:translate(2px,-1px) rotate(2deg)}50%{transform:translate(-3px,1px) rotate(-3deg)}60%{transform:translate(3px,-1px) rotate(3deg)}70%{transform:translate(-4px,2px) rotate(-4deg)}80%{transform:translate(5px,-2px) rotate(5deg)}90%{transform:translate(-6px,2px) rotate(-6deg) scale(1.03)}100%{transform:translate(0,0) rotate(0) scale(1.06)}}
@keyframes sd-leak{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1.35)}}
@keyframes sd-seamk{0%,30%{opacity:0}100%{opacity:1}}
@keyframes sd-top{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(-90px,-240px) rotate(-42deg);opacity:0}}
@keyframes sd-bot{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(70px,420px) rotate(24deg);opacity:0}}
@keyframes sd-flash{0%{transform:scale(.2);opacity:1}100%{transform:scale(7);opacity:0}}
@keyframes sd-ringk{0%{transform:scale(.2);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes sd-partk{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(var(--d)) scale(.2);opacity:0}}
@keyframes sd-popk{0%{transform:translateY(60px) scale(.2);opacity:0}55%{transform:translateY(-8px) scale(1.06);opacity:1}100%{transform:translateY(0) scale(1)}}
@keyframes sd-upk{0%{transform:translateY(18px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes sd-raysk{to{transform:rotate(360deg)}}
@keyframes sd-fadein{from{opacity:0}to{opacity:1}}
@keyframes sd-motek{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(-140px);opacity:0}}
@keyframes sd-sheenk{0%,40%{background-position:120% 0}100%{background-position:-60% 0}}
.sd-pk{transition:transform .2s}
.sd-pk:active{transform:scale(.95)}
.sd-float{animation:sd-float 3.2s ease-in-out infinite}
.sd-rise{animation:sd-rise .55s cubic-bezier(.2,.9,.3,1.1) both}
.sd-shake{animation:sd-shake linear both;animation-delay:.5s}
.sd-leak{animation:sd-leak ease-in both}
.sd-charge .sd-seam{animation:sd-seamk 1.2s ease-in both}
.sd-seam{opacity:0}
.sd-burst .sd-seam{opacity:1}
.sd-top{animation:sd-top .7s cubic-bezier(.2,.7,.3,1) both}
.sd-bot{animation:sd-bot .7s cubic-bezier(.5,0,.8,.6) both}
.sd-flash{animation:sd-flash .6s ease-out both}
.sd-ring{animation:sd-ringk .8s ease-out both}
.sd-part{animation:sd-partk .8s cubic-bezier(.1,.8,.3,1) both}
.sd-pop{animation:sd-popk .8s cubic-bezier(.2,.9,.3,1.2) both}
.sd-up{animation:sd-upk .5s cubic-bezier(.2,.8,.2,1) both}
.sd-rays{animation:sd-raysk 24s linear infinite, sd-fadein .8s ease both}
.sd-mote{animation:sd-motek 3s ease-out infinite}
.sd-rar{background:linear-gradient(100deg, currentColor 40%, #FFFFFF 50%, currentColor 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sd-upk .5s cubic-bezier(.2,.8,.2,1) both, sd-sheenk 2.6s ease-in-out infinite}
.sd-tint{transition:opacity .6s ease}
@keyframes sd-landk{0%{transform:translateY(-120px) scale(.9,1.1);opacity:0}55%{transform:translateY(0) scale(.94,1.06);opacity:1}70%{transform:translateY(0) scale(1.08,.92)}85%{transform:translateY(-6px) scale(.98,1.02)}100%{transform:translateY(0) scale(1)}}
.sd-land{transform-origin:50% 100%;animation:sd-landk .7s cubic-bezier(.45,0,.4,1) both}
@keyframes sd-glowk{0%{opacity:0}100%{opacity:.3}}
.sd-glow{animation:sd-glowk .8s ease both}
@keyframes sd-burstk{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.5);opacity:0}}
.sd-burstb{animation:sd-burstk .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes sd-peelk{0%{transform:rotate(0)}30%{transform:rotate(-14deg) translate(-2px,-4px)}100%{transform:translate(-70px,-190px) rotate(-130deg);opacity:0}}
@keyframes sd-joltk{0%{transform:translateY(0)}25%{transform:translateY(6px) scale(1.02,.98)}60%,100%{transform:translateY(0)}}
@keyframes sd-beamk{0%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:.75}}
@keyframes sd-beamoutk{0%{opacity:.75;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.25)}}
@keyframes sd-dropk{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(420px) rotate(16deg);opacity:0}}
@keyframes sd-flyk{0%{transform:translateY(0) scale(.6)}40%{transform:translateY(-96px) scale(1.25)}52%{transform:translateY(-92px) scale(1.2)}100%{transform:translateY(120px) scale(.55)}}
@keyframes sd-spink{0%{transform:scaleX(1)}25%{transform:scaleX(.2)}50%{transform:scaleX(1)}75%{transform:scaleX(.2)}100%{transform:scaleX(1)}}
@keyframes sd-flash2k{0%{opacity:.95}100%{opacity:0}}
.sd-peel{transform-origin:8px 44px;animation:sd-peelk .62s cubic-bezier(.4,0,.6,1) both}
.sd-jolt{animation:sd-joltk .4s ease-out both}
.sd-beam{transform-origin:50% 100%;animation:sd-beamk .5s ease-out .12s both}
.sd-beamout{transform-origin:50% 100%;animation:sd-beamoutk .5s ease-in .05s both}
.sd-drop{animation:sd-dropk .7s cubic-bezier(.5,0,.9,.6) .58s both}
.sd-seedfly{animation:sd-flyk 1.15s cubic-bezier(.4,0,.6,1) both}
.sd-seedspin{animation:sd-spink .5s linear infinite}
.sd-flash2{animation:sd-flash2k .7s ease-out both}
.sd-ring{animation:sd-ringk .8s ease-out both}
.sd-flash{animation:sd-flash .6s ease-out both}
/* --- GardenNight board --- */
@keyframes gs-ink{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.gs-in{animation:gs-ink .3s ease both}
@keyframes ge-twk{0%,100%{opacity:.2}50%{opacity:1}}
.ge-tw{animation:ge-twk 2.6s ease-in-out infinite}


@keyframes ge-nightk{0%,10%{opacity:0}24%,74%{opacity:1}90%,100%{opacity:0}}
.ge-night{animation:ge-nightk 16s ease-in-out infinite}
@keyframes ge-dimk{0%,10%{filter:brightness(1)}24%,74%{filter:brightness(.8) saturate(.85)}90%,100%{filter:brightness(1)}}
.ge-dim{animation:ge-dimk 16s ease-in-out infinite}
@keyframes ge-shootk{0%,34%{transform:translate(420px,60px) rotate(160deg);opacity:0}35%{opacity:1}43%{transform:translate(-60px,240px) rotate(160deg);opacity:0}100%{transform:translate(-60px,240px) rotate(160deg);opacity:0}}
.ge-shoot{transform-origin:100% 50%;animation:ge-shootk 16s cubic-bezier(.4,0,.8,.6) infinite}
@keyframes ge-eark{0%,48%{transform:translateY(30px);opacity:0}50%{opacity:1}54%,57%{transform:translateY(0)}59%{transform:translateY(3px)}61%,66%{transform:translateY(0)}70%{opacity:1}72%,100%{transform:translateY(30px);opacity:0}}
.ge-ear{animation:ge-eark 16s ease-in-out infinite}
@keyframes ge-eyek{0%,55%{opacity:0;transform:scaleY(1)}57%,61%{opacity:1;transform:scaleY(1)}62%{transform:scaleY(.1)}63%,67%{opacity:1;transform:scaleY(1)}69%,100%{opacity:0}}
.ge-eye{transform-box:fill-box;transform-origin:center;animation:ge-eyek 16s ease infinite}
@keyframes ge-moongk{0%,100%{opacity:.45}50%{opacity:.85}}
.ge-moonglow{animation:ge-moongk 3s ease-in-out infinite}
@keyframes ge-toastk{0%,44%{transform:translateY(-24px) scale(.96);opacity:0}47%,70%{transform:translateY(0) scale(1);opacity:1}73%,100%{transform:translateY(-24px) scale(.96);opacity:0}}.ge-toast{animation:ge-toastk 16s cubic-bezier(.2,.8,.2,1) infinite}@keyframes ge-headk{0%,44%{opacity:1}47%,70%{opacity:.15}73%,100%{opacity:1}}.ge-head{animation:ge-headk 16s ease infinite}@keyframes ge-n0k{0%,46%{transform:translateY(0)}49%,100%{transform:translateY(-18px)}}.ge-num{animation:ge-n0k 16s cubic-bezier(.5,0,.2,1.3) infinite}@keyframes ge-chipk{0%,46%{box-shadow:0 0 0 0 rgba(200,242,90,0)}49%{box-shadow:0 0 0 6px rgba(200,242,90,.35)}56%,100%{box-shadow:0 0 0 12px rgba(200,242,90,0)}}.ge-chip{animation:ge-chipk 16s ease-out infinite}
/* --- Eggs board --- */
@keyframes eg-steamk{0%{stroke-dasharray:0 60;opacity:0;transform:translateY(6px)}30%{opacity:.8}100%{stroke-dasharray:60 0;opacity:0;transform:translateY(-10px)}}
.eg-steam{animation:eg-steamk 2.4s ease-out infinite}
@keyframes eg-orbitk{to{transform:rotate(360deg)}}
.eg-orbit{animation:eg-orbitk 6s linear infinite}
@keyframes eg-twk{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
.eg-tw{transform-box:fill-box;transform-origin:center;animation:eg-twk 1.4s ease-in-out infinite}
@keyframes eg-glowk{0%,100%{opacity:.15}50%{opacity:.6}}
.eg-glow{animation:eg-glowk 2s ease-in-out infinite}
@keyframes eg-windk{0%{transform:translateX(0);opacity:0}20%{opacity:.9}100%{transform:translateX(110px);opacity:0}}
.eg-wind{animation:eg-windk 1.6s ease-in infinite}
@keyframes eg-swayk{0%,100%{transform:rotate(0)}20%{transform:rotate(9deg)}35%{transform:rotate(4deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-2deg)}}
.eg-sway{animation:eg-swayk 3.2s ease-in-out infinite}
@keyframes eg-mink{to{transform:rotate(360deg)}}
.eg-min{animation:eg-mink 6s steps(60) infinite}
.eg-hr{animation:eg-mink 72s steps(720) infinite}
@keyframes eg-puffk{0%{transform:scale(.2);opacity:0}25%{opacity:.85}100%{transform:scale(1.6) translateY(-4px);opacity:0}}
.eg-puff{animation:eg-puffk 2.2s ease-out infinite}
@keyframes eg-bubk{0%,15%{transform:translateY(10px) scale(.8);opacity:0}25%,75%{transform:translateY(0) scale(1);opacity:1}90%,100%{transform:translateY(-4px);opacity:0}}
.eg-bubble{animation:eg-bubk 3.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes eg-arck{0%{stroke-dasharray:0 100;opacity:0}10%{opacity:.85}45%,80%{stroke-dasharray:100 0;opacity:.85}100%{stroke-dasharray:100 0;opacity:0}}
.eg-arc{animation:eg-arck 4s ease-out infinite}
@keyframes eg-vinek{0%{stroke-dasharray:0 100}35%,65%{stroke-dasharray:100 0}100%{stroke-dasharray:0 100}}
.eg-vine{animation:eg-vinek 5s ease-in-out infinite}
@keyframes eg-rosek{0%,15%{transform:scale(0)}35%,60%{transform:scale(1)}80%,100%{transform:scale(0)}}
.eg-rose{animation:eg-rosek 5s ease-in-out infinite}
@keyframes eg-zk{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(6px,-16px)}}
.eg-z{animation:eg-zk 1.8s ease-out infinite}
@keyframes eg-snailk{0%{transform:translateX(0) scaleX(-1)}45%{transform:translateX(-40px) scaleX(-1)}50%{transform:translateX(-40px) scaleX(1)}95%{transform:translateX(0) scaleX(1)}100%{transform:translateX(0) scaleX(-1)}}
.eg-snail{animation:eg-snailk 12s linear infinite}
@keyframes eg-dropk{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(32px);opacity:.2}}
.eg-drop{animation:eg-dropk 1.4s cubic-bezier(.5,0,1,1) infinite}
@keyframes eg-splashk{0%,60%{transform:scale(.3);opacity:0}70%{opacity:1}100%{transform:scale(1.4);opacity:0}}
.eg-splash{animation:eg-splashk 1.4s ease-out infinite}
@keyframes eg-birdk{0%,8%{transform:translate(0,0) scale(0)}18%{transform:translate(0,0) scale(1)}28%{transform:translate(7px,-20px) scale(1)}34%,70%{transform:translate(14px,-25px) scale(1)}40%,52%,64%{transform:translate(14px,-27px) scale(1)}80%{transform:translate(0,0) scale(1)}90%,100%{transform:translate(0,0) scale(0)}}
.eg-bird{animation:eg-birdk 5s ease-in-out infinite}
@keyframes eg-notek{0%,38%{transform:translate(0,0);opacity:0}45%{opacity:1}68%{transform:translate(6px,-12px);opacity:0}100%{opacity:0}}
.eg-note{animation:eg-notek 5s ease-out infinite}
@keyframes eg-cloudk{0%{opacity:0;transform:translateY(6px)}15%,80%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.eg-cloud{animation:eg-cloudk 5s ease infinite}
@keyframes eg-raink{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(34px);opacity:0}}
.eg-rain{animation:eg-raink 1s linear infinite}
@keyframes eg-patinak{0%,10%{opacity:0}55%,85%{opacity:.8}100%{opacity:0}}
.eg-patina{animation:eg-patinak 6s ease-in-out infinite}
@keyframes eg-bitek{0%,30%{transform:scale(0)}38%,85%{transform:scale(1)}100%{transform:scale(0)}}
.eg-bite{animation:eg-bitek 4s cubic-bezier(.2,.9,.3,1.4) infinite}
@keyframes eg-crumbk{0%,34%{transform:translateY(0);opacity:0}38%{opacity:1}60%,100%{transform:translateY(30px);opacity:0}}
.eg-crumb{animation:eg-crumbk 4s ease-in infinite}
@keyframes eg-eark{0%,20%{transform:translateY(22px)}35%,40%{transform:translateY(0)}44%{transform:translateY(2px)}48%,70%{transform:translateY(0)}85%,100%{transform:translateY(22px)}}
.eg-ear{animation:eg-eark 4.5s ease-in-out infinite}
@keyframes eg-moonk{0%,15%{opacity:0}45%,80%{opacity:1}100%{opacity:0}}
.eg-moon{animation:eg-moonk 5s ease infinite}
@keyframes eg-moonglowk{0%,15%{opacity:0}45%,80%{opacity:.7}100%{opacity:0}}
.eg-moonglow{animation:eg-moonglowk 5s ease infinite}
@keyframes eg-fallk{0%{transform:translate(118px,6px);opacity:0}8%{opacity:1}40%{transform:translate(20px,48px);opacity:0}100%{transform:translate(20px,48px);opacity:0}}
.eg-fall{animation:eg-fallk 4s cubic-bezier(.3,0,.7,1) infinite}
@keyframes eg-ballk{0%,10%{transform:translate(0,0)}30%{transform:translate(4px,-30px)}48%{transform:translate(6px,-21px);opacity:1}52%,100%{transform:translate(6px,-21px);opacity:0}}
.eg-ball{animation:eg-ballk 3.6s cubic-bezier(.3,.6,.6,1) infinite}
@keyframes eg-ripplek{0%,48%{transform:scale(.3);opacity:0}52%{opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
.eg-ripple{animation:eg-ripplek 3.6s ease-out infinite}
@keyframes eg-rosek2{0%,20%{fill:#FFFFFF}45%,85%{fill:#D7263D}100%{fill:#FFFFFF}}
.eg-rosepaint{animation:eg-rosek2 4.5s ease infinite}
@keyframes eg-dripk{0%,35%{stroke-dasharray:0 100}60%,85%{stroke-dasharray:100 0}100%{stroke-dasharray:0 100}}
.eg-paintdrip{animation:eg-dripk 4.5s ease infinite}

/* ---- board CSS the boards share: sway (Focus, Home, Garden: 5 s, ±2.5°), frozen bloom (Garden .frz) ---- */
.sw{transform-box:fill-box;transform-origin:50% 100%;animation:k-sway5 5s ease-in-out infinite}
@keyframes k-sway5{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.frz [class*="a-"]{animation-delay:-8.8s !important;animation-play-state:paused !important}
.fz [class*="a-"]{animation-delay:var(--fz) !important;animation-play-state:paused !important}

/* Only scenes on screen animate (fern.js toggles .is-live) */
html.js .scene:not(.is-live) *, html.js .scene:not(.is-live) *::before, html.js .scene:not(.is-live) *::after { animation-play-state: paused !important; }

/* ---- page shell ---- */
.fern-landing main { padding-bottom: 0; overflow-x: clip; }
.f-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.f-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-sec { padding-top: clamp(80px, 11vw, 140px); }
.f-kicker, .f-head .f-kicker, .f-split-copy .f-kicker { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--shoot); }
.f-head { max-width: 720px; }
.f-head--center { margin: 0 auto; text-align: center; }
.f-head h2, .f-split-copy h2, .f-end-card h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 5.2vw, 66px); letter-spacing: -.035em; line-height: 1.02; }
.f-head p, .f-split-copy p { margin: 18px 0 0; color: var(--sage); font-size: clamp(17px, 1.35vw, 19px); max-width: 54ch; }
.f-head--center p { margin-left: auto; margin-right: auto; }
.f-accent { color: var(--shoot); }
.f-quiet { font-size: 15px !important; }
.f-quiet b { color: var(--mist); }
.f-header { max-width: 1180px; padding: 16px; }
@media (min-width: 641px) { .f-header { padding: 18px 24px; } }

/* ---- hero ---- */
.f-hero { position: relative; padding: clamp(16px, 3vw, 40px) 0 clamp(40px, 6vw, 72px); }
.f-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.f-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.f-logo { display: flex; align-items: center; gap: 10px; height: 64px; margin-bottom: 18px; }
.f-logo-curl { width: 60px; height: 60px; }
.f-logo-word { font-family: var(--font-display); font-weight: 500; font-size: 40px; letter-spacing: -1.2px; line-height: 1; }
.h-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: h-draw 1.92s cubic-bezier(.4,0,.2,1) forwards; }
.h-leaf { transform-box: fill-box; transform-origin: 100% 100%; transform: scale(0); animation: h-leaf .72s cubic-bezier(.2,.9,.3,1.4) 1.56s forwards; }
.h-lt { display: inline-block; opacity: 0; transform: translateY(22px); animation: h-lt .72s cubic-bezier(.2,.8,.2,1.2) 2.04s forwards; }
.h-lt:nth-child(2) { animation-delay: 2.12s; } .h-lt:nth-child(3) { animation-delay: 2.2s; } .h-lt:nth-child(4) { animation-delay: 2.28s; }
@keyframes h-draw { to { stroke-dashoffset: 0; } }
@keyframes h-leaf { to { transform: scale(1); } }
@keyframes h-lt { to { opacity: 1; transform: none; } }
.f-app-name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--sage); }
.f-soon { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--canopy-raised); color: var(--mist); font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.f-soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--shoot); box-shadow: 0 0 0 4px rgba(200,242,90,.18); animation: fc-dot 1.6s ease-in-out infinite; }
.f-hero h1 { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(60px, 9.4vw, 128px); font-weight: 500; letter-spacing: -.045em; line-height: .94; }
.h-l1, .h-l2 { display: inline-block; opacity: 0; transform: translateY(26px); animation: f-rise .9s var(--ease) .1s forwards; }
.h-l2 { display: block; color: var(--shoot); animation-delay: .28s; }
.f-lede { margin: 22px 0 0; max-width: 44ch; color: var(--sage); font-size: clamp(17px, 1.4vw, 20px); opacity: 0; animation: f-rise .9s var(--ease) .45s forwards; }
.f-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 28px; }
.f-hero .f-cta { opacity: 0; animation: f-rise .9s var(--ease) .55s forwards; }
.f-cta--center { justify-content: center; }
.f-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 0; padding: 0; list-style: none; color: var(--sage); font-size: 15px; }
.f-proof b { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--mist); margin-right: 4px; }
@keyframes f-rise { to { opacity: 1; transform: none; } }

.f-hero-art { position: relative; display: grid; place-items: center; padding: 24px 0; }
.f-hero-glow { position: absolute; inset: -10% -20%; background: radial-gradient(closest-side, rgba(200,242,90,.16), rgba(200,242,90,0) 70%); pointer-events: none; }

/* phone: a 390×844 board screen scaled by --k */
.f-phone { --k: .74; position: relative; z-index: 1; width: calc(390px * var(--k) + 20px); height: calc(844px * var(--k) + 20px); padding: 10px; border-radius: calc(56px * var(--k) + 10px); background: #06150F; box-shadow: 0 40px 80px rgba(0,0,0,.45), 0 0 0 1px #21483A, inset 0 0 0 1px rgba(255,255,255,.06); }
.f-phone::before { content: ""; position: absolute; z-index: 3; left: 50%; top: calc(10px + 12px * var(--k)); width: calc(110px * var(--k)); height: calc(32px * var(--k)); margin-left: calc(-55px * var(--k)); border-radius: 999px; background: #000; }
.f-screen { position: relative; width: 390px; height: 844px; border-radius: 56px; overflow: hidden; transform: scale(var(--k)); transform-origin: 0 0; background: #0E2A20; }

/* Focus board screen */
.fc-root { width: 390px; height: 844px; box-sizing: border-box; background: #0E2A20; color: #EAF5EC; font-family: Manrope, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 52px 24px 26px; overflow: hidden; line-height: normal; }
.fc-top { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 44px; }
.fc-pill { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; background: #163A2D; font-size: 14px; font-weight: 700; }
.fc-dot { width: 8px; height: 8px; border-radius: 4px; background: #C8F25A; animation: fc-dot 1.6s ease-in-out infinite; }
.fc-round { width: 44px; height: 44px; border-radius: 22px; background: #163A2D; display: flex; align-items: center; justify-content: center; }
.fc-ringbox { position: relative; width: 300px; height: 300px; margin-top: 30px; flex-shrink: 0; }
.fc-ringsvg { position: absolute; inset: 0; transform: rotate(-90deg); }
.f-ring-fill { animation: f-ringk 10s linear infinite; }
.fc-mote { position: absolute; border-radius: 50%; animation: fc-mote 5s ease-out infinite; }
.fc-plant { position: absolute; left: 57px; bottom: 20px; }
.fc-label { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 22px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #C8F25A; }
.fc-time { font-family: Outfit, sans-serif; font-weight: 500; font-size: 76px; letter-spacing: -1px; line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fc-status { font-size: 15px; color: #A7C4B1; margin-top: 8px; white-space: nowrap; }
.fc-status .f-stack { display: grid; justify-items: center; }
.fc-btns { width: 100%; display: flex; gap: 10px; margin-top: auto; margin-bottom: 42px; }
.fc-give { flex: 1; height: 56px; border-radius: 28px; border: 1.5px solid #2B5A47; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font: 600 16px Manrope, sans-serif; }
.fc-pause { flex: 1.4; height: 56px; border-radius: 28px; background: #C8F25A; color: #0E2A20; font: 700 16px Manrope, sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; }
.f-stack { display: inline-grid; }
.f-stack > span { grid-area: 1 / 1; opacity: 0; animation: 10s steps(1, end) infinite; }
.f-s1 { animation-name: f-s1 !important; } .f-s2 { animation-name: f-s2 !important; } .f-s3 { animation-name: f-s3 !important; } .f-s4 { animation-name: f-s4 !important; }
/* stage windows follow anim.css k-l1…k-l4 (Seed 0–14 %, Sprout 17–38 %, Growing 41–57 %, Bloom 60–94 %) */
@keyframes f-s1 { 0%, 15% { opacity: 1; } 16%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes f-s2 { 0%, 15% { opacity: 0; } 16%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes f-s3 { 0%, 39% { opacity: 0; } 40%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes f-s4 { 0%, 58% { opacity: 0; } 59%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes f-ringk { 0% { stroke-dashoffset: 892.2; opacity: 0; } 3% { opacity: 1; } 88% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
/* Focus board keyframes */
@keyframes fc-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fc-mote { 0% { transform: translate(0,0); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(16px,-120px); opacity: 0; } }

/* floating cards around the hero phone */
.f-float { position: absolute; z-index: 2; }
.f-float--packet { left: 2%; top: 9%; transform: rotate(-12deg); filter: drop-shadow(0 18px 24px rgba(0,0,0,.4)); }
.f-float--note { left: -5%; bottom: 21%; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 20px; background: var(--mist); color: var(--moss); font-size: 15px; line-height: 1.3; box-shadow: 0 18px 40px rgba(0,0,0,.4); rotate: -3deg; animation: f-floaty 6s ease-in-out infinite; }
.f-float--note small { color: #4F6B5C; font-weight: 600; font-size: 13px; }
.f-float--lapse { right: 0; top: 18%; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--canopy-raised); color: var(--mist); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 1px var(--line), 0 14px 30px rgba(0,0,0,.35); animation: f-floaty 7s 1s ease-in-out infinite; }
.f-float--lapse i { width: 8px; height: 8px; border-radius: 50%; background: var(--shoot); animation: fc-dot 1.6s ease-in-out infinite; }
@keyframes f-floaty { 50% { translate: 0 -10px; } }

/* ---- the loop ---- */
.f-loop { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 40px 0 0; padding: 0; counter-reset: none; }
.f-loop li { position: relative; padding: 22px 20px 24px; border-radius: 24px; background: var(--canopy); color: var(--sage); font-size: 15.5px; line-height: 1.45; }
.f-loop li b { display: block; margin: 14px 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: -.01em; line-height: 1.15; color: var(--mist); }
.f-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--canopy-raised); color: var(--shoot); font-family: var(--font-display); font-weight: 500; font-size: 17px; }
.f-loop li:last-child .f-n { color: var(--clay); }
.f-film { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.f-film-line { display: none; }
.f-frame { margin: 0; padding: 22px 12px 18px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 30%, #1A4434 0%, var(--canopy) 70%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.f-frame svg { width: 100%; max-width: 150px; height: auto; }
.f-frame figcaption { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--canopy-raised); font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--mist); }
.f-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fern); }
.f-frame:nth-child(n) .f-dot { background: var(--common); }
.f-frame .f-dot.on { background: var(--shoot); box-shadow: 0 0 0 3px rgba(200,242,90,.2); }

/* ---- split sections ---- */
.f-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.f-split-grid--flip .f-split-copy { order: 2; }

/* turntable (Home board) */
.f-tt-wrap { display: grid; place-items: center; padding: 28px 16px; border-radius: 40px; background: radial-gradient(90% 70% at 50% 40%, #153B2D 0%, rgba(14,42,32,0) 72%); }
.tt { width: 342px; font-family: Manrope, sans-serif; color: #EAF5EC; line-height: normal; }
.tt-stage { position: relative; height: 290px; }
.tt-arcsvg { position: absolute; left: 26px; top: 0; }
.hm-arc { transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1), stroke .4s; }
.tt-dome { position: absolute; left: 41px; top: 15px; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #1F5040 0%, #143A2C 55%, #0D261D 100%); box-shadow: inset 0 0 0 1px #2B5A47; }
.tt-halo { --h: #FF8DB0; position: absolute; left: 20px; top: 16px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--h) 0%, rgba(0,0,0,0) 62%); transition: background .6s; animation: hm-halo 3s ease-in-out infinite; }
.tt-persp { position: absolute; inset: 0; perspective: 620px; perspective-origin: 50% 0%; }
.tt-ring { position: absolute; left: 130px; top: 228px; width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(-196px) rotateY(-108deg); transition: transform .9s cubic-bezier(.3,1.12,.4,1); }
.tt-floor { position: absolute; left: -250px; top: -250px; width: 500px; height: 500px; border-radius: 50%; transform: rotateX(90deg); background: radial-gradient(circle, #24584A 0%, #1A4636 48%, rgba(14,42,32,0) 72%); }
.tt-floor-a { position: absolute; left: 50px; top: 50px; width: 400px; height: 400px; box-sizing: border-box; border-radius: 50%; border: 2px dashed #3C7A60; }
.tt-floor-b { position: absolute; left: 160px; top: 160px; width: 180px; height: 180px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #2B5A47; }
.tt-item { position: absolute; left: -72px; top: -192px; width: 144px; height: 192px; transform-origin: 72px 192px; transition: transform .9s cubic-bezier(.3,1.12,.4,1), filter .9s ease, opacity .5s ease; opacity: 0; }
.tt-item svg { display: block; }
.tt-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, rgba(13,38,29,0), rgba(13,38,29,.85)); pointer-events: none; }
.hm-mote { position: absolute; border-radius: 50%; pointer-events: none; animation: hm-mote 5s ease-out infinite; }
.tt-info { padding: 22px 6px 0; }
.tt-name-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tt-name { display: flex; flex-direction: column; }
.tt-name b { font-family: Outfit, sans-serif; font-weight: 500; font-size: 30px; letter-spacing: -.5px; line-height: 1.1; }
.tt-name span { margin-top: 2px; font-size: 15px; color: #A7C4B1; }
.tt-leaves { display: flex; gap: 6px; padding-bottom: 4px; }
.tt-leaves i { display: block; color: #C8F25A; transition: color .4s; }
.tt-leaves svg { display: block; }
.tt-note { margin: 18px 0 0 !important; font-size: 15px !important; color: #A7C4B1; text-align: center; }
.nm-inR { animation: hm-inR .45s cubic-bezier(.2,.8,.2,1) both; }
/* Home board keyframes */
@keyframes hm-mote { 0% { transform: translate(0,0); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(14px,-110px); opacity: 0; } }
@keyframes hm-inR { 0% { transform: translateX(40px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes hm-halo { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: .5; transform: scale(1.08); } }
@keyframes hm-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }

/* ---- seeds: SeedDrop board on a 390 × 620 canvas (board y − 40) ---- */
.f-odds { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.f-odds li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--canopy-raised); font-size: 14px; }
.f-odds b { color: var(--c); font-weight: 800; }
.f-odds span { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--mist); }
.f-sd-wrap { --k: 1; position: relative; width: calc(390px * var(--k)); height: calc(620px * var(--k)); margin: 0 auto; }
.sd { position: absolute; inset: 0; }
.sd-canvas { position: absolute; left: 0; top: 0; width: 390px; height: 620px; transform: scale(var(--k)); transform-origin: 0 0; border-radius: 44px; background: #0E2A20; box-shadow: inset 0 0 0 1px #21483A; overflow: hidden; color: #EAF5EC; font-family: Manrope, sans-serif; line-height: normal; }
.sd-tint { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 55%, transparent) 0%, rgba(0,0,0,0) 62%); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.sd[data-ph="charge"] .sd-tint { opacity: .55; }
.sd[data-ph="tear"] .sd-tint, .sd[data-ph="seed"] .sd-tint { opacity: 1; }
.sd[data-ph="reveal"] .sd-tint { opacity: .6; }
.sd-dots { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: center; gap: 6px; z-index: 5; }
.sd-dots i { width: 28px; height: 6px; border-radius: 3px; background: #2B5A47; transition: background .4s; }
.sd-ph { display: none; position: absolute; inset: 0; }
.sd[data-ph="pick"] .sd-ph-pick, .sd[data-ph="charge"] .sd-ph-charge, .sd[data-ph="tear"] .sd-ph-tear, .sd[data-ph="seed"] .sd-ph-seed, .sd[data-ph="reveal"] .sd-ph-reveal { display: block; }
.sd-title { position: absolute; left: 24px; right: 24px; top: 88px; text-align: center; }
.sd-t1 { font-family: Outfit, sans-serif; font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: -.5px; }
.sd-t2 { font-size: 16px; line-height: 24px; color: #A7C4B1; margin-top: 8px; }
.sd-pk { position: absolute; }
.sd-tap { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px; border-radius: 50%; border: 2px solid #C8F25A; opacity: 0; animation: hm-pulse .6s ease-out 1.9s forwards; }
.sd-leak { position: absolute; left: 75px; top: 190px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, var(--rc) 0%, rgba(0,0,0,0) 65%); animation-duration: var(--charge, 1100ms) !important; }
.sd-shake { animation-duration: var(--shake, 600ms) !important; filter: drop-shadow(0 0 18px var(--rc)); }
.sd-wake { position: absolute; left: 24px; right: 24px; top: 480px; text-align: center; font-size: 16px; color: #A7C4B1; }
.sd-at { position: absolute; left: 129px; top: 222px; transform: scale(1.18); }
.sd-beamshape { position: absolute; left: -24px; top: -230px; width: 180px; height: 276px; background: linear-gradient(0deg, var(--rc) 0%, rgba(255,255,255,0) 100%); clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); opacity: .75; -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0) 0, #000 14%); mask: linear-gradient(0deg, rgba(0,0,0,0) 0, #000 14%); }
.sd-seedspin { width: 24px; height: 30px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #F3D29A 0%, #C99A5B 55%, #8A6238 100%); box-shadow: 0 0 22px 6px var(--rc), 0 0 60px 18px var(--rc); }
.sd-rays { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 25%, transparent) 0%, rgba(0,0,0,0) 70%); -webkit-mask: radial-gradient(circle, #000 20%, rgba(0,0,0,0) 70%); mask: radial-gradient(circle, #000 20%, rgba(0,0,0,0) 70%); }
.sd[data-rar="Rare"] .sd-rays, .sd[data-rar="Epic"] .sd-rays { background: repeating-conic-gradient(from 0deg, rgba(0,0,0,0) 0deg 8deg, color-mix(in srgb, var(--rc) 32%, transparent) 11deg 14deg, rgba(0,0,0,0) 17deg 22.5deg); }
.sd[data-rar="Legendary"] .sd-rays { background: repeating-conic-gradient(from 0deg, rgba(0,0,0,0) 0deg 8deg, color-mix(in srgb, var(--rc) 50%, transparent) 11deg 14deg, rgba(0,0,0,0) 17deg 22.5deg); }
.sd-rglow { position: absolute; left: 45px; top: 100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--rc) 0%, rgba(0,0,0,0) 62%); opacity: .4; }
.sd-burstb { position: absolute; left: 45px; top: 140px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0%, var(--rc) 32%, rgba(0,0,0,0) 68%); }
.sd-part { margin: -3px; border-radius: 50%; background: var(--rc); }
.sd-mote { position: absolute; border-radius: 50%; background: var(--rc); }
.sd-rvtext { position: absolute; left: 0; right: 0; top: 448px; text-align: center; }
.sd-rar { font-size: 13px; font-weight: 800; letter-spacing: 4px; }
.sd-rvname { font-family: Outfit, sans-serif; font-weight: 500; font-size: 34px; line-height: 40px; letter-spacing: -.5px; margin-top: 8px; }
.sd-rvsub { font-size: 15px; line-height: 22px; color: #A7C4B1; margin-top: 6px; }
.sd-rvchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 15px; background: #163A2D; font-size: 13px; font-weight: 700; margin-top: 16px; }
.sd-rvchip span { width: 6px; height: 6px; border-radius: 3px; }
.sd-rv[hidden] { display: none; }

/* ---- garden ---- */
.f-garden-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 56px; }
.f-garden-phone { display: grid; place-items: center; }
.f-phone--garden { --k: .72; }
.gn-per { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: #163A2D; color: #EAF5EC; font: 700 13px Manrope, sans-serif; }
.f-rare { position: relative; padding: 44px clamp(16px, 3vw, 36px) 30px; border-radius: 40px; background: radial-gradient(100% 80% at 50% 0%, #1A4434 0%, var(--canopy) 70%); }
.rs-row + .rs-row { margin-top: 74px; }
.rs-plants { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.rs-cell { position: relative; display: flex; justify-content: center; }
.rs-plant { position: relative; width: 104px; }
.rs-plant svg { display: block; width: 100%; height: auto; }
.rs-plant .sw { animation-delay: var(--sd); }
.rs-glow { position: absolute; left: 50%; top: 2%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: radial-gradient(circle, var(--g) 0%, rgba(0,0,0,0) 66%); opacity: .45; animation: k-halo 3s ease-in-out infinite; }
.rs-tag { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--sage); }
.rs-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--g); vertical-align: 1px; }
.rs-plank { position: relative; height: 12px; margin-top: -6px; border-radius: 4px; background: linear-gradient(180deg, #B07A4E 0%, #B07A4E 40%, #8A5A36 41%, #74492C 100%); box-shadow: 0 8px 14px rgba(0,0,0,.35); }

/* ---- numbers + marquee shelf ---- */
.f-big { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.f-big li { padding: 28px 28px 26px; border-radius: 28px; background: var(--canopy); }
.f-big b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(56px, 9vw, 120px); line-height: .9; letter-spacing: -.045em; color: var(--shoot); }
.f-big span { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); }
.f-big small { display: block; margin-top: 4px; color: var(--sage); font-size: 14px; }
.f-marquee { position: relative; margin-top: 48px; overflow: hidden; padding-bottom: 12px; background: linear-gradient(180deg, rgba(0,0,0,0) calc(100% - 12px), #B07A4E calc(100% - 12px), #B07A4E calc(100% - 7px), #8A5A36 calc(100% - 7px), #74492C 100%); }
.f-marquee::before, .f-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: min(16vw, 160px); pointer-events: none; }
.f-marquee::before { left: 0; background: linear-gradient(90deg, var(--moss), rgba(14,42,32,0)); }
.f-marquee::after { right: 0; background: linear-gradient(-90deg, var(--moss), rgba(14,42,32,0)); }
.f-marquee-track { display: flex; width: max-content; margin-bottom: -6px; animation: f-marq 64s linear infinite; }
.mq-item { flex: none; width: 92px; margin: 0 16px; }
.mq-item svg { display: block; }
.mq-item:nth-child(3n+1) .sw { animation-delay: -1.6s; } .mq-item:nth-child(3n+2) .sw { animation-delay: -3.3s; }
@keyframes f-marq { to { transform: translateX(-50%); } }

/* ---- secrets (Eggs board cards) ---- */
.f-eggs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 44px auto 0; padding: 0 16px; }
.eg-card { position: relative; height: 392px; border-radius: 28px; background: #133528; overflow: hidden; }
.eg-tag { position: absolute; left: 16px; top: 16px; height: 28px; padding: 0 12px; border-radius: 14px; background: #0E2A20; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #EAF5EC; }
.eg-art { position: absolute; left: 50%; top: 40px; width: 150px; height: 200px; margin-left: -75px; }
.eg-card h3 { position: absolute; left: 24px; right: 24px; top: 256px; margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 26px; }
.eg-card h3 small { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.eg-card p { position: absolute; left: 24px; right: 24px; top: 292px; margin: 0; font-size: 14px; line-height: 20px; color: #A7C4B1; }

/* ---- plans ---- */
.f-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 880px; margin: 44px auto 0; }
.f-plan { padding: 28px 28px 32px; border-radius: 32px; background: var(--canopy); text-align: center; }
.f-plan--pro { background: var(--canopy-raised); box-shadow: inset 0 0 0 2px var(--shoot); }
.f-plan-art { position: relative; height: 176px; margin-bottom: 12px; }
.f-pk { position: absolute; left: 50%; bottom: 8px; color: #C8F25A; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.f-pk--c { z-index: 2; margin-left: -48px; }
.f-pk--l { margin-left: -128px; bottom: 0; transform: rotate(-12deg); }
.f-pk--r { margin-left: 44px; bottom: 0; transform: rotate(12deg); }
.f-plan h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 26px; }
.f-plan-big { margin: 8px 0 0; font-size: 17px; font-weight: 700; color: var(--mist); }
.f-plan-big b { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1; color: var(--shoot); margin-right: 6px; vertical-align: -6px; }
.f-plan p:last-child { margin: 8px 0 0; color: var(--sage); font-size: 15px; }
.f-note { max-width: 720px; margin: 20px auto 0; text-align: center; color: var(--sage); font-size: 14px; }
.f-note a { color: var(--shoot); font-weight: 700; }

/* ---- privacy ---- */
.f-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.f-facts li { padding: 22px; border-radius: 24px; background: var(--canopy); color: var(--sage); font-size: 15px; }
.f-facts b { display: block; margin-bottom: 6px; color: var(--mist); font-size: 17px; }
.f-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---- final CTA: Splash board loop ---- */
.f-end { padding-bottom: clamp(64px, 8vw, 96px); }
.f-end-card { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px) 24px; border-radius: 40px; background: var(--canopy); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.f-end-card > p { margin: 0; max-width: 44ch; color: var(--sage); }
.f-splash { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 0 12px; }
.sp-glow { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(200,242,90,.9) 0%, rgba(200,242,90,0) 62%); pointer-events: none; }
.f-splash svg { position: relative; }
.f-splash-word { position: relative; margin-top: 14px; font-family: var(--font-display); font-weight: 500; font-size: 52px; letter-spacing: -1.5px; line-height: 1.1; }
.sp-tag { position: relative; margin-top: 6px; font-family: var(--font-display); font-weight: 300; font-size: 20px; color: var(--shoot); }
/* Splash board, 1:1 */
@keyframes sp-draw{0%{stroke-dashoffset:100;opacity:1}32%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes sp-leaf{0%,26%{transform:scale(0);opacity:1}38%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes sp-lt{0%,34%{transform:translateY(22px);opacity:0}46%,90%{transform:translateY(0);opacity:1}97%,100%{opacity:0}}
@keyframes sp-tag{0%,56%{opacity:0;transform:translateY(8px)}66%,90%{opacity:1;transform:translateY(0)}97%,100%{opacity:0}}
@keyframes sp-glow{0%,30%{opacity:0;transform:scale(.6)}50%,88%{opacity:.35;transform:scale(1)}100%{opacity:0}}
.sp-draw{stroke-dasharray:100;animation:sp-draw 6s cubic-bezier(.4,0,.2,1) infinite}
.sp-leaf{transform-box:fill-box;transform-origin:100% 100%;animation:sp-leaf 6s cubic-bezier(.2,.9,.3,1.4) infinite}
.sp-lt{display:inline-block;animation:sp-lt 6s cubic-bezier(.2,.8,.2,1.2) infinite}
.sp-tag{animation:sp-tag 6s ease-out infinite}
.sp-glow{animation:sp-glow 6s ease-out infinite}

/* ---- responsive ---- */
@media (min-width: 641px) { .f-wrap, .f-eggs { padding: 0 24px; } }
@media (max-width: 1100px) {
  .f-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-loop li:last-child { grid-column: 1 / -1; }
  .f-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-eggs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .f-hide-sm { display: none; }
  .f-hero-grid, .f-split-grid, .f-garden-grid { grid-template-columns: minmax(0, 1fr); }
  .f-split-grid--flip .f-split-copy { order: 0; }
  .f-hero-art { margin-top: 8px; }
  .f-garden-grid { justify-items: center; }
  .f-rare { width: 100%; }
}
@media (max-width: 640px) {
  .f-phone--hero { --k: .66; }
  .f-phone--garden { --k: .7; }
  .f-float--packet { left: -4px; top: 4%; }
  .f-float--packet svg { width: 70px; height: auto; }
  .f-float--note { left: -6px; bottom: -6px; padding: 12px 14px; font-size: 14px; }
  .f-float--lapse { right: -6px; top: 4px; }
  .f-loop { grid-template-columns: minmax(0, 1fr); }
  .f-loop li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .f-loop li b { margin: 4px 0 4px; }
  .f-loop li .f-n { grid-row: span 2; }
  .f-film { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-big li { padding: 18px 14px; border-radius: 22px; }
  .f-big small { display: none; }
  .f-eggs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; gap: 12px; padding-bottom: 8px; scrollbar-width: none; }
  .f-eggs::-webkit-scrollbar { display: none; }
  .eg-card { flex: none; width: 280px; scroll-snap-align: start; }
  .f-plans { grid-template-columns: minmax(0, 1fr); }
  .f-facts { grid-template-columns: minmax(0, 1fr); }
  .f-rare { padding: 36px 8px 24px; border-radius: 32px; }
  .rs-plant { width: 78px; }
  .rs-glow { width: 90px; height: 90px; margin-left: -45px; }
  .rs-tag { font-size: 10.5px; max-width: 84px; white-space: normal; text-align: center; line-height: 1.25; }
  .rs-tag::before { display: none; }
  .rs-row + .rs-row { margin-top: 70px; }
  .mq-item { width: 76px; margin: 0 12px; }
  .mq-item svg { width: 76px; height: auto; }
  .f-links .btn { flex: 1 1 auto; }
}
@media (max-width: 430px) { .f-sd-wrap { --k: .9; } }
@media (max-width: 370px) { .f-sd-wrap { --k: .8; } .tt { transform: scale(.9); transform-origin: top center; margin-bottom: -30px; } .f-phone--hero { --k: .6; } }

/* ---- reduced motion: every scene holds one meaningful frame ---- */
@media (prefers-reduced-motion: reduce) {
  .fern-landing *, .fern-landing *::before, .fern-landing *::after { animation-play-state: paused !important; transition: none !important; }
  .h-draw, .h-leaf, .h-lt, .h-l1, .h-l2, .f-lede, .f-hero .f-cta, .gd-in, .nm-inR, .sd-tap { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .sd-tap { opacity: 0 !important; }
  .f-float--lapse { display: none; }
  /* Focus: the frame at 12:01, Growing */
  .f-hero-art [class*="a-"], .f-hero-art .f-ring-fill, .f-hero-art .f-stack > span { animation-delay: -4.57s !important; }
  /* Splash: the frame where everything is in */
  .f-splash, .f-splash * { animation-delay: -4.5s !important; }
  .tt-item, .tt-ring { transition: none !important; }
}
/* Garden board entrance: plants pop onto the shelves when the phone scrolls in */
@keyframes gd-in{0%{transform:translateY(14px) scale(.7);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.gd-in{animation:gd-in .6s cubic-bezier(.2,.9,.3,1.2) both}