:root{--font-display:'Poppins',system-ui,sans-serif;--font-body:'Poppins',system-ui,sans-serif}
body{margin:0;background:var(--surface-page);font-family:var(--font-body);color:var(--text-body)}
a{color:var(--text-link)}a:hover{color:var(--text-link-hover)}
.gain-navlink:hover{background:var(--action-ghost-bg-hover);color:var(--text-strong)}
.gain-menu-item:hover{background:var(--surface-page-alt)}
.gain-wordmark:hover{opacity:.85}
main button:not(:disabled){transition:transform var(--duration-normal) var(--ease-standard),box-shadow var(--duration-normal) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
main button:not(:disabled):hover{transform:translateY(-1px)}
main button [data-icon]{transition:transform var(--duration-fast) var(--ease-standard)}
main button:hover [data-icon="arrow-right"]{transform:translateX(3px)}
/* Custom cursor */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0}
.cur-dot{width:7px;height:7px;background:var(--green-500);transform:translate(-50%,-50%)}
.cur-ring{width:34px;height:34px;border:1.5px solid rgba(20,147,101,.45);transform:translate(-50%,-50%);transition:width .25s var(--ease-out),height .25s var(--ease-out),background-color .25s,border-color .25s}
.cur-ring.on{width:54px;height:54px;background:rgba(20,147,101,.08);border-color:rgba(20,147,101,.7)}
body.cur-live .cur-dot,body.cur-live .cur-ring{opacity:1}
@media(hover:none),(prefers-reduced-motion:reduce){.cur-dot,.cur-ring{display:none}}
/* Blog cards */
.blog-card{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s var(--ease-standard),border-color .3s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--green-200,rgba(20,147,101,.22))}
.blog-card:hover .blog-tile{transform:translate(-50%,-50%) scale(1.08) rotate(-3deg)}
.blog-card:active{transform:translateY(-2px)}
.blog-card:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(20,147,101,.22)}
.blog-chip{transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.blog-chip:hover{transform:translateY(-1px);border-color:var(--green-400);color:var(--text-strong)}
.blog-chip[aria-pressed="true"]:hover{color:var(--white);box-shadow:var(--shadow-brand,0 6px 18px rgba(20,147,101,.25))}
/* Footer social buttons */
.ft-soc a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--border-default);background:var(--white);color:var(--ink-600);transition:color .25s,border-color .25s,translate .25s}
.ft-soc a:hover{color:var(--green-700);border-color:var(--green-400);translate:0 -2px}
/* Entrances + reveals */
.hin{opacity:0;animation:heroRise .75s cubic-bezier(.16,1,.3,1) forwards}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in,body:not(.has-motion) .rv{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
[data-stagger].in>*,body:not(.has-motion) [data-stagger]>*{opacity:1;transform:none}
@media(max-width:1000px){
  .nav-desktop{display:none!important}.nav-mobile{display:inline-flex!important}
  .two-col,.faq-grid{grid-template-columns:1fr!important}
  .three-col{grid-template-columns:1fr 1fr!important}
}
@media(max-width:640px){.three-col{grid-template-columns:1fr!important}}
/* Blog post page */
.bp-back{transition:background-color .25s,border-color .25s,transform .25s,color .25s}
.bp-back:hover{background:var(--white);border-color:var(--green-400);color:var(--text-strong);transform:translateX(-3px)}
.bp-toc{transition:color .25s,border-color .25s,padding-left .25s}
.bp-toc:hover{color:var(--text-strong);padding-left:17px}
.bp-art{transition:box-shadow .4s var(--ease-standard)}
article p+p{margin-top:0}
.bp-recent-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-recent{transition:background-color .25s,transform .25s,box-shadow .25s,border-color .25s}
.bp-recent{border-radius:16px}
.bp-recent:hover{background:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--green-400)}
.bp-recent-all{transition:background-color .25s,border-color .25s,color .25s,transform .25s}
.bp-recent-all:hover{background:var(--green-500);border-color:transparent;color:var(--white);transform:translateY(-1px)}
/* Below the three-column width the recent rail drops under the article. It keeps to the
   article's column rather than spanning both: the contents rail beside it is sticky, and a
   sticky grid item is held by the grid box rather than by its own row, so a full-width block
   here is drawn straight through the pinned rail — the share row under it included, which is
   how the share links stopped taking clicks. */
@media(max-width:1240px){.bp-grid{grid-template-columns:200px minmax(0,1fr)!important}.bp-rail-r{grid-column:2/-1;position:static!important;margin-top:var(--space-8)}}
@media(max-width:1000px){.bp-grid{grid-template-columns:1fr!important}.bp-rail{position:static!important;flex-direction:row!important;flex-wrap:wrap;justify-content:space-between;gap:var(--space-6)!important}/* One column here, and the contents rail is no longer sticky, so the recent rail goes back to the full width: left at 2/-1 it would open an implicit second column and sit in it, indented past an empty gutter. */.bp-rail-r{grid-column:1/-1;flex-direction:column!important}.bp-head{grid-template-columns:1fr!important;align-items:start!important}.bp-author{padding-left:0!important;border-left:none!important}}
@keyframes blogDot{0%,100%{box-shadow:0 0 0 0 rgba(20,147,101,.5)}50%{box-shadow:0 0 0 5px rgba(20,147,101,0)}}
.blog-dot{animation:blogDot 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hin{animation:none;opacity:1;transform:none}.rv,[data-stagger]>*{opacity:1;transform:none;transition:none}.blog-card:hover{transform:none}.blog-card:hover .blog-tile{transform:translate(-50%,-50%)}.blog-dot{animation:none}}


.mega-link{display:block;padding:9px 0;font:var(--weight-medium) var(--text-md)/1.25 var(--font-body);color:var(--text-body);text-decoration:none;white-space:nowrap;transition:color .18s,translate .18s}
.mega-link:hover{color:var(--green-700);translate:3px 0}
.mega-more{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font:var(--weight-regular) var(--text-xs)/1 var(--font-mono);color:var(--green-700);text-decoration:none}
.mega-more:hover{color:var(--green-600)}
.mega-card{display:flex;flex-direction:column;gap:8px;width:250px;padding:22px 22px 20px;border-radius:var(--radius-md);background:var(--gradient-mint);border:1px solid var(--green-100);text-decoration:none;transition:box-shadow .25s,translate .25s}
.mega-card:hover{box-shadow:var(--shadow-md);translate:0 -2px}
:root{--text-inverse-muted:rgba(255,255,255,.82)}
/* Dark footer */
.ftd-link{font:var(--weight-medium) var(--text-sm)/1.3 var(--font-body);color:rgba(255,255,255,.85);text-decoration:none;transition:color .18s,translate .18s}
.ftd-link:hover{color:var(--white);translate:3px 0}
.ftd-soc a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);transition:color .25s,border-color .25s,translate .25s}
.ftd-soc a:hover{color:var(--white);border-color:rgba(255,255,255,.45);translate:0 -2px}