/* Style blocks the static build INJECTS AT RUNTIME on more than one page.
   site/global.js renders the closing CTA band and appends its own <style>,
   so these rules exist in no static .css or .html file. They are hoisted here
   once rather than duplicated into every page-*.css. */

/* Branding pattern overlay — no gradient sweep, just soft texture. */
          #plan-best-loved .plan-best-loved-pattern {
            position: absolute;
            inset: 0;
            background-image: url('../images/branding-patterns/needoh-branding-pattern-2.svg');
            background-size: cover;
            background-position: center;
            opacity: 0.05;
            pointer-events: none;
            z-index: 1;
          }

          @media (max-width:1024px) { .plan-best-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width:560px)  { .plan-best-grid { grid-template-columns: 1fr !important; } }

          /* Product card hover (lift + shadow grow + name shifts pink) */
          .plan-best-grid > a {
            transition: transform 280ms cubic-bezier(.4,0,.2,1);
          }
          .plan-best-grid > a > div:first-child {
            transition: box-shadow 280ms ease, transform 280ms cubic-bezier(.4,0,.2,1);
          }
          .plan-best-grid > a > div:nth-of-type(2) {
            transition: color 220ms ease;
          }
          .plan-best-grid > a:hover {
            transform: translateY(-6px);
          }
          .plan-best-grid > a:hover > div:first-child {
            box-shadow: 0 28px 52px -18px rgba(0,0,0,0.7);
            transform: scale(1.02);
          }
          .plan-best-grid > a:hover > div:nth-of-type(2) {
            color: var(--card-hover-color, var(--accent)) !important;
          }
          @media (prefers-reduced-motion: reduce) {
            .plan-best-grid > a,
            .plan-best-grid > a > div:first-child,
            .plan-best-grid > a > div:nth-of-type(2) { transition: none; }
          }

@media (max-width:960px) { .plan-categories-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width:560px) { .plan-categories-grid { grid-template-columns: 1fr !important; } }

          /* Category card hover — matches Best-Loved exactly. Only the tile
             (first child) scales; the name div is scoped separately for color
             so it does NOT get pulled into the tile's transform. Targeting
             every direct child was the source of the horizontal skip. */
          .plan-categories-grid > a {
            transition: transform 280ms cubic-bezier(.4,0,.2,1);
          }
          .plan-categories-grid > a > div:first-child {
            transition: box-shadow 280ms ease, transform 280ms cubic-bezier(.4,0,.2,1);
          }
          .plan-categories-grid > a > .cat-card-name {
            transition: color 220ms ease;
          }
          .plan-categories-grid > a:hover {
            transform: translateY(-6px);
          }
          .plan-categories-grid > a:hover > div:first-child {
            box-shadow: 0 22px 44px -16px rgba(35,31,32,0.45);
            transform: scale(1.02);
          }
          .plan-categories-grid > a:hover > .cat-card-name {
            color: var(--card-hover-color, var(--accent)) !important;
          }
          @media (prefers-reduced-motion: reduce) {
            .plan-categories-grid > a,
            .plan-categories-grid > a > div:first-child,
            .plan-categories-grid > a > .cat-card-name { transition: none; }
          }

/* Pattern anchored on the left, ink gradient sweeps in from the right
             so the texture fades away as you scan across the section. */
          #what-is-needoh .what-is-needoh-pattern {
            position: absolute;
            inset: 0;
            background-image: url('../images/branding-patterns/needoh-branding-pattern-2.svg');
            background-size: cover;
            background-position: center left;
            opacity: 0.07;
            pointer-events: none;
            z-index: 0;
          }
          #what-is-needoh .what-is-needoh-fade {
            position: absolute;
            inset: 0;
            background: linear-gradient(
              to right,
              rgba(35,31,32,0) 0%,
              rgba(35,31,32,0) 38%,
              var(--ink) 68%
            );
            pointer-events: none;
            z-index: 1;
          }
          /* Pink fill → white fill on hover, ink text on hover */
          #what-is-needoh .what-is-needoh-cta:hover {
            background: #FFFFFF !important;
            color: var(--ink) !important;
          }

@media (max-width: 880px) {
            .counterfeit-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
            /* Mobile: image on top, text below */
            .counterfeit-grid > div:nth-child(2) { order: -1; }
          }

#site-cta .btn-primary { background: var(--accent); color: #fff; transition: background 200ms ease, color 200ms ease; }#site-cta .btn-primary:hover { background: #fff; color: var(--ink); }@media (max-width: 880px) {#site-cta .plan-closing-card { border-radius: 36px !important; }#site-cta .plan-closing-grid { grid-template-columns: 1fr !important; }#site-cta .plan-closing-img  { aspect-ratio: 4/3 !important; min-height: auto !important; }#site-cta .plan-closing-copy { padding: 48px 32px !important; }}