/* Native scrolling and finite transitions; no perpetually running scene. */
:root{scroll-behavior:smooth;scroll-padding-top:24px}
section[id],.meadow-footer{scroll-margin-top:24px}
.resource-tile{transform-origin:top left}
.feature-card{position:relative;isolation:isolate;transition:transform 180ms var(--play-ease),box-shadow 180ms ease,border-color 180ms ease}
.feature-card::after{content:'';position:absolute;inset:-25%;pointer-events:none;z-index:2;background:linear-gradient(110deg,transparent 38%,#fff9 49%,#fff0 61%);opacity:0;transform:translateX(-110%)}
.feature-card.is-lit::after{animation:glass-pass 580ms ease-out 1}
@keyframes glass-pass{15%{opacity:.75}85%{opacity:.5}to{transform:translateX(110%);opacity:0}}
.feature-card:focus-within{box-shadow:0 0 0 2px #86a85c,0 12px 32px -18px #213c2733}
.feature-card.is-expanded{border-color:#a1c278;background:#f3f9e9}
@media(hover:hover) and (pointer:fine){.feature-card:hover{transform:translateY(-2px)}.feature-card summary:hover{transform:none}}
body.feature-preview-open{overflow:hidden;scrollbar-gutter:stable}
.feature-preview{width:min(570px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 40px);box-sizing:border-box;overflow:auto;border:1px solid #ffffffb8;border-radius:24px;margin:auto;padding:34px;background:linear-gradient(140deg,#fff,#f7faef);color:#182014;box-shadow:0 2px 5px #17200c12,0 30px 90px #17200c38;transform-origin:top left;overscroll-behavior:contain}
.feature-preview::backdrop{background:#16230d4a}
.feature-preview .preview-close{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;border:1px solid #e2e7d9;background:#ffffffe6;color:#314326;font-size:26px;line-height:1;cursor:pointer}
.feature-preview .preview-close:focus-visible,.feature-preview :is(a,button,input):focus-visible{outline:2px solid #527600;outline-offset:3px}
.feature-preview .preview-close:active{transform:scale(.96)}
.feature-preview-heading{display:block;width:auto;height:auto;padding:0 36px 24px 0;border:0}
.feature-preview-heading .feature-glyph{margin-bottom:20px;color:#405820}
.feature-preview-heading .eyebrow{font-size:9px;letter-spacing:2px;color:#61714f;margin-bottom:12px}
.feature-preview-heading h2{font-size:clamp(27px,4vw,36px);line-height:1.07;letter-spacing:-1.3px;text-wrap:balance;margin:0 0 14px}
.feature-preview-description{font-size:15px;line-height:1.5;color:#647059}
.feature-preview .feature-inside{padding:0;border:0;gap:16px}
.feature-preview .feature-inside :is(p,label){font-size:14px;line-height:1.5}
.feature-preview .feature-inside small{font-size:11px}
.feature-preview .feature-inside .button{min-height:44px;font-size:13px;border-radius:12px}
.feature-preview .feature-inside input[type=range]{min-height:44px}
.feature-preview .feature-inside label:has(input[type=checkbox]){min-height:44px;display:flex;align-items:center}
.feature-preview .preset-buttons{flex-wrap:wrap}
.feature-preview .preset-buttons button{min-height:44px;padding:10px 13px}
.feature-preview-note{font-size:10px!important;color:#66735b!important;border-top:1px solid #e0e6d8;padding-top:18px;margin-top:22px}
.meadow-grass{position:absolute;width:clamp(70px,11vw,150px);height:auto;bottom:125px;left:3%;fill:#3c642a;opacity:.3;transform-origin:bottom center;pointer-events:none;z-index:-1}
.meadow-grass.grass-right{left:auto;right:4%;width:clamp(65px,9vw,120px)}
.meadow-landscape{transform-origin:center bottom}
.quiet-page{scroll-behavior:auto}
.quiet-page *,.quiet-page *::before,.quiet-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.quiet-page .feature-card:hover{transform:none}
@media(max-width:560px){.feature-preview{padding:26px 23px;border-radius:22px}.feature-preview-heading{padding-right:34px}.feature-preview .feature-inside :is(p,label){font-size:13px}.meadow-grass{bottom:155px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.feature-card:hover{transform:none}}

/* Scroll-linked artwork, inspired by Jhey's paired-image crossfades.
   Content and hit targets never move; both pictures share one fixed-size canvas. */
.native-section{overflow:clip}
.native-hog{--hog-travel:16px;view-timeline:--hog-story block;view-timeline-inset:0}
.native-hog #hog-secret{display:block;position:relative;padding:20px 0;transform:none}
.hog-crossfade{display:block;position:relative;isolation:isolate;height:400px;max-width:440px;margin:auto;border-radius:24px;overflow:hidden}
.hog-frame{position:absolute;inset:0;display:block;background:#fff;mix-blend-mode:plus-lighter}
.native-hog .hog-frame img{display:block;width:100%;height:100%;object-fit:contain}
.hog-busy{opacity:1}
.hog-calm{opacity:0}
.native-hog .hand-note{z-index:1;pointer-events:none}
.native-hog.is-wink{animation:none}
.native-hog.is-wink #hog-secret{animation:hog-nod 450ms var(--play-ease)}
@keyframes hog-crossfade{from{opacity:1}to{opacity:0}}
@keyframes hog-parallax{from{transform:translateY(calc(-1 * var(--hog-travel)))}to{transform:translateY(var(--hog-travel))}}
@supports (animation-timeline:view()) and (animation-range:cover 45% cover 55%){
  .native-hog.scroll-ready .hog-frame{animation:hog-crossfade 1s linear both;animation-timeline:--hog-story;animation-range:cover 45% cover 55%}
  .native-hog.scroll-ready .hog-calm{animation-direction:reverse}
  .native-hog .hog-crossfade{animation:hog-parallax 1s linear both;animation-timeline:--hog-story;animation-range:cover 0% cover 100%}
}
@media(max-width:700px){.hog-crossfade{height:315px;max-width:355px;border-radius:20px}}
.quiet-page .native-hog .hog-frame{animation:none!important}
.quiet-page .native-hog .hog-busy{opacity:0!important}
.quiet-page .native-hog .hog-calm{opacity:1!important}
.quiet-page .native-hog .hog-crossfade{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .native-hog .hog-frame,.native-hog .hog-crossfade,.native-hog.is-wink #hog-secret{animation:none!important}
  .native-hog .hog-busy{opacity:0!important}
  .native-hog .hog-calm{opacity:1!important}
  .native-hog .hog-crossfade{transform:none!important}
}

/* Homepage-only scroll polish. No hero, portal, forms or dialog selectors.
   The static document is the fallback; no content is hidden awaiting JS. */
@keyframes page-preview-arrive{from{opacity:.72;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes page-heading-arrive{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes page-card-arrive{from{opacity:.7}to{opacity:1}}
@supports (animation-timeline:view()) and (animation-range:entry 0% entry 80%){
  @media(prefers-reduced-motion:no-preference){
    :root:not(.quiet-page) #the-app #native-preview{
      animation:page-preview-arrive 1s ease-out both;
      animation-timeline:view();animation-range:entry 0% entry 45%;
    }
    :root:not(.quiet-page) :is(#how-it-works .center-heading h2,#hog-map .map-copy h2){
      animation:page-heading-arrive 1s ease-out both;
      animation-timeline:view();animation-range:entry 0% cover 18%;
    }
    :root:not(.quiet-page) #how-it-works .feature-card{
      animation:page-card-arrive 1s linear both;
      animation-timeline:view();animation-range:entry var(--card-entry,0%) entry var(--card-settle,65%);
    }
    #how-it-works .feature-card:nth-child(2){--card-entry:8%;--card-settle:73%}
    #how-it-works .feature-card:nth-child(3){--card-entry:16%;--card-settle:81%}
    #how-it-works .feature-card:nth-child(4){--card-entry:24%;--card-settle:89%}
    /* Keyboard focus always exposes the complete control immediately. */
    :root:not(.quiet-page) #the-app #native-preview:focus-within,
    :root:not(.quiet-page) #how-it-works .feature-card:focus-within{animation:none;opacity:1;transform:none}
    @media(max-width:700px){
      :root:not(.quiet-page) #the-app #native-preview{animation-range:entry 0% entry 30%}
      :root:not(.quiet-page) #how-it-works .feature-card{animation-range:entry 0% entry 35%}
      :root:not(.quiet-page) :is(#how-it-works .center-heading h2,#hog-map .map-copy h2){animation-name:page-card-arrive;animation-range:entry 0% entry 65%}
    }
  }
}
@media(min-width:701px) and (max-width:1024px){.native-hog{--hog-travel:6px}}
@media(max-width:700px){.native-hog .hog-crossfade{animation:none;transform:none}}