/* Craft layer — linked LAST on every page so it owns the cascade.
   1. Size-specific tracking + leading, as reusable tokens.
   2. Press feedback on every interactive element.
   3. Translucent chrome (header, mega-menu) + scroll edge effect.
   4. Reduced-transparency / increased-contrast fallbacks.
   5. Neutralises the retired scroll-reveal states so nothing can stay hidden. */

:root{
  /* leading */
  --lh-display:1.05;--lh-section:1.10;--lh-heading:1.20;--lh-lead:1.35;--lh-body:1.55;--lh-caption:1.50;
  /* tracking, one step per size band */
  --tracking-display:-.025em;   /* 64px+   */
  --tracking-section:-.02em;    /* 40–63px */
  --tracking-heading:-.01em;    /* 28–39px */
  --tracking-lead:-.005em;      /* 20–27px */
  --tracking-body:0em;          /* 16–19px */
  --tracking-caption:.005em;    /* 13–15px */
  /* --tracking-eyebrow stays as the design system defines it (.13em) */

  /* composite roles re-bound to the leading scale */
  --type-display:var(--weight-semibold) var(--text-display-1)/var(--lh-display) var(--font-display);
  --type-hero:var(--weight-semibold) var(--text-display-2)/var(--lh-section) var(--font-display);
  --type-section:var(--weight-semibold) var(--text-display-3)/var(--lh-section) var(--font-display);
  --type-h1:var(--weight-semibold) var(--text-h1)/var(--lh-heading) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-h2)/var(--lh-heading) var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-h3)/var(--lh-lead) var(--font-display);
  --type-h4:var(--weight-semibold) var(--text-h4)/var(--lh-body) var(--font-display);
  --type-body-lg:var(--weight-regular) var(--text-lg)/var(--lh-body) var(--font-body);
  --type-body:var(--weight-regular) var(--text-md)/var(--lh-caption) var(--font-body);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--lh-caption) var(--font-body);

  /* springs (bounce 0) for the few places a CSS transition is safe */
  --spring-200:200ms cubic-bezier(.33,.9,.28,1);
  --spring-300:300ms cubic-bezier(.33,.9,.28,1);
  --spring-350:350ms cubic-bezier(.33,.9,.28,1);
  /* type-adjacent spacing in rem so layout grows with the user's text size */
  --space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:2rem;--space-8:2.5rem;--space-9:3rem;--space-10:4rem;--space-11:5rem;--space-12:6.5rem;
  --grid-gap:1.25rem;--card-pad:1.5rem;--card-pad-lg:2rem;--section-pad-y:6rem;--section-pad-y-tight:4rem;--gutter-page:1.5rem;--gutter-page-lg:3rem;
}
html{font-optical-sizing:auto;text-rendering:optimizeLegibility}

/* Tracking by size band. Headings carry !important because the pages set tracking
   inline; the token layer must stay the single source of truth. */
h1,.t-display,[style*="type-display"],.hero-h1{letter-spacing:var(--tracking-display)!important;line-height:var(--lh-display)!important}
h2,.t-section,[style*="type-hero"],[style*="type-section"],.jny-h,.mapp-h{letter-spacing:var(--tracking-section)!important;line-height:var(--lh-section)!important}
h3,.t-heading,[style*="type-h1"],[style*="type-h2"],[style*="text-h1)/"],[style*="text-h2)/"]{letter-spacing:var(--tracking-heading)!important;line-height:var(--lh-heading)!important}
h4,h5,.t-lead,[style*="type-h3"],[style*="text-h3)/"]{letter-spacing:var(--tracking-lead)!important;line-height:var(--lh-lead)}
p,li,.t-body,[style*="type-body-lg"],[style*="text-lg)/"],[style*="type-h4"],[style*="text-h4)/"]{letter-spacing:var(--tracking-body)}
.t-caption,[style*="type-body-sm"],[style*="type-body)"],[style*="text-md)/"],[style*="text-sm)/"],[style*="text-xs)/"],figcaption,small{letter-spacing:var(--tracking-caption)}
/* uppercase eyebrows and mono labels are deliberately untouched — none of the rules
   above match a --text-2xs / --font-mono / .mg-h declaration. */
@media(max-width:1000px){h1,.hero-h1{letter-spacing:var(--tracking-section)!important}}

/* ---- Press feedback: pointer-down, never hover-only, never a 0ms snap ---- */
:where(button,a[href],[role="tab"],[role="button"],summary,label[for]){transition:transform var(--spring-200),background-color 140ms cubic-bezier(.2,.7,.2,1),color 140ms cubic-bezier(.2,.7,.2,1),border-color 140ms cubic-bezier(.2,.7,.2,1),box-shadow var(--spring-200)}
button:not(:disabled):active,a[href]:active,[role="tab"]:active,[role="button"]:active,summary:active{transform:scale(.97)}
main button:not(:disabled){transition:transform var(--spring-200),box-shadow var(--spring-200),background-color 140ms cubic-bezier(.2,.7,.2,1)}
.mega-link{transition:color .18s,transform var(--spring-200)}
.mg-item{transition:background-color .16s ease-out,color .16s ease-out,transform var(--spring-200)}
.jny-chip{transition:background .35s,color .35s,border-color .35s,transform var(--spring-200)}
.aiq-chip{transition:background .15s ease-out,color .15s ease-out,transform var(--spring-200)}
.proof-tab{transition:background .25s,color .25s,border-color .25s,transform var(--spring-200)}
.ft-soc a,.ftd-soc a{transition:color .25s,border-color .25s,transform var(--spring-200)}
.mapp-btn,.pp-cta,.pp-alt,.gfx-btn,.gain-cta-link,.gain-navlink{transition:background-color 140ms cubic-bezier(.2,.7,.2,1),color 140ms cubic-bezier(.2,.7,.2,1),transform var(--spring-200),box-shadow var(--spring-200)}
/* ~10px of invisible hit padding around small targets — keeps every tap area ≥44px
   without changing layout */
.ft-soc a,.ftd-soc a,.gfx-soc a,.jny-chip,.proof-tab,.gfx-link,.gfx-t,.mg-item,.nav-mobile-cta,.gain-wordmark,.gain-navlink{position:relative}
.ft-soc a::after,.ftd-soc a::after,.gfx-soc a::after,.proof-tab::after,.mg-item::after,.nav-mobile-cta::after,.gain-wordmark::after{content:"";position:absolute;inset:-10px;border-radius:inherit}
.gfx-link::after,.gfx-t::after{content:"";position:absolute;inset:-12px -10px}

/* ---- Header: a real translucent material, no hairline ---- */
.site-header{background:rgba(251,253,251,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:none;box-shadow:none;transition:background-color var(--spring-350),box-shadow var(--spring-350),backdrop-filter var(--spring-350)}
.site-header.is-scrolled{box-shadow:0 8px 24px -8px rgba(36,81,59,.14)}
/* scroll edge effect: content fades out as it reaches the chrome — only once scrolled */
.site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;pointer-events:none;opacity:0;transition:opacity var(--spring-300);background:linear-gradient(to bottom,rgba(251,253,251,.92),rgba(251,253,251,0))}
.site-header.is-scrolled::after{opacity:1}
/* over dark bands the material thickens instead of flipping opaque */
.site-header.over-dark{background:rgba(251,253,251,.93);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%)}
.site-header.over-dark.is-scrolled{box-shadow:0 24px 56px -16px rgba(15,43,30,.22)}
.site-header.over-dark::after{opacity:0}

/* Mega-menu: the largest floating surface, so the thickest blur and deepest shadow */
.mg-panel{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);box-shadow:0 24px 56px -16px rgba(15,43,30,.22)}
.mg-anim{animation:none!important}
.gain-drawer{background:rgba(251,253,251,.92);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}

/* ---- Retired scroll reveals: never leave content hidden ---- */
.rv,.rv.in,[data-stagger]>*,.aiq-armed{opacity:1!important;transform:none!important}
.rv{transition:none}

/* ---- Accessibility signals ---- */
@media (prefers-reduced-transparency: reduce){
  .site-header,.site-header.over-dark,.mg-panel,.gain-drawer,.aiq-panel{background:#FBFDFB;-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header::after{opacity:0}
  .eden-sat{background:#0F2B1E;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast: more){
  .site-header,.site-header.over-dark{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid #1B1E20}
  .mg-panel,.gain-drawer,.aiq-panel,.jny-panel,.frag-row,.ds-card{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #1B1E20}
  .site-header::after{opacity:0}
  .eden-sat{background:#0F2B1E;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #FFFFFF}
}
@media (prefers-reduced-motion: reduce){
  /* keep the feedback, drop the travel: short cross-fades only */
  .mg-panel,.gain-drawer,.jny-stage,.jny-bg,.aiq-tp{transition:opacity 150ms linear!important}
  button:not(:disabled):active,a[href]:active,[role="tab"]:active,[role="button"]:active{transform:none;opacity:.72}
}