/* Graph-paper grid: the hero's 64px grid, extended across the site.
   Minor lines every 64px, slightly stronger major lines every 256px,
   faded out with a radial mask so it never competes with content. */
:root{
  --grid-minor:oklch(70% .02 130 / .32);
  --grid-major:oklch(62% .03 160 / .38);
  --grid-glow:oklch(82% .155 180 / .10);
}
[data-theme="dark"]{--grid-minor:oklch(55% .02 250 / .16);--grid-major:oklch(70% .06 180 / .16);--grid-glow:oklch(82% .155 180 / .07)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grid-minor:oklch(55% .02 250 / .16);--grid-major:oklch(70% .06 180 / .16);--grid-glow:oklch(82% .155 180 / .07)}}

.hero-grid,
.page-header::after,.article-header::after,
#fit::before,#contact::after,#pricing::before{
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:256px 256px,256px 256px,64px 64px,64px 64px;
  background-position:-1px -1px;
}
/* Hero keeps its original mask; a soft accent glow sits under the grid */
.hero-bg{background:radial-gradient(ellipse 50% 45% at 72% 38%,var(--grid-glow),transparent 70%)}

/* Section and page-header grids */
.page-header,.article-header,#fit,#contact,#pricing{position:relative;isolation:isolate}
.page-header::after,.article-header::after,#fit::before,#contact::after,#pricing::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.page-header::after,.article-header::after{
  -webkit-mask-image:radial-gradient(ellipse 75% 95% at 50% 0%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 75% 95% at 50% 0%,#000 25%,transparent 78%)}
#fit::before{
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 0% 0%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse 60% 70% at 0% 0%,#000 10%,transparent 70%)}
#pricing::before{
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 100%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 100%,#000 10%,transparent 70%)}
#contact::after{
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 100%,#000 15%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 100%,#000 15%,transparent 75%)}
/* Cards on a grid read as cut-outs: keep them solid */
.fit-card,.p-card,.qf{position:relative}

/* Text on the teal accent: the light-mode page colour gave 1.5:1 contrast.
   A fixed dark ink passes AA on the accent in both light and dark mode. */
:root{--on-lime:oklch(20% .03 200)}
.btn-primary,.cta-box .btn,.cta-btn,.doc-btn,.faq-item.open .faq-icon,.mcta-quote,.mm-cta,.nav-cta,
.p-card.feat .p-cta,.p-card.feat::before,.price-card.featured .price-cta,.price-card.featured::before,
.skip-nav,.video-play{color:var(--on-lime)}