@import url("/brand/tokens.css?v=20260915");
/*
 * Shared public-site palette.
 *
 * The exported Webflow stylesheet repeats its color custom properties on
 * component scopes. Keeping these overrides important makes the Grubbx
 * palette authoritative on every localized page without duplicating edits
 * across the 180 source documents.
 */
/* Decorative hero artwork: original curved, ordered-dither bands. */
#hero-scene.hp-hero_phone-inner {
  background: url("/owner-assets/hero-dither.svg?v=20260915") center / cover no-repeat !important;
}

#hero-scene.hp-hero_phone-inner > :is(img, svg, canvas) {
  display: none !important;
}

:root {
  --grubbx-olive: var(--color-action);
  --grubbx-olive-deep: var(--color-accent);
  --grubbx-olive-soft: var(--color-surface-subtle);
  --grubbx-olive-border: var(--color-border);
  --grubbx-olive-highlight: var(--color-highlight);
  --grubbx-sage-canvas: var(--color-canvas);
  --grubbx-sage-surface: var(--color-surface-subtle);
  --grubbx-sage-muted: var(--color-highlight);
  --grubbx-sage-strong: #a99cce;
  --grubbx-clay: #6745fc;
  --grubbx-clay-deep: #0c0548;
  --grubbx-clay-soft: #f1edff;
  --grubbx-clay-border: #ded6fb;
  --grubbx-clay-highlight: #b6a5fd;
}

:root,
:where(body, body *) {
  --green: var(--grubbx-olive) !important;
  --green-dark: var(--grubbx-olive-deep) !important;
  --taupe: var(--grubbx-sage-surface) !important;
  --taupe-light: var(--grubbx-sage-canvas) !important;
  --taupe-dark: var(--grubbx-sage-muted) !important;
  --taupe-darker: var(--grubbx-olive-border) !important;
  --taupe-darkest: var(--grubbx-sage-strong) !important;
  --button--primary-bg: var(--color-action) !important;
  --button--primary-text: var(--color-action-text) !important;
  --button--primary-bg-hover: var(--color-action-hover) !important;
  --button--primary-text-hover: #fff !important;
}

::selection {
  background: var(--grubbx-olive);
  color: #fff;
}

/* Replace the animated blue/emerald glow with the olive + sage system. */
[glow-border]::after {
  background: conic-gradient(
    from 45deg,
    var(--grubbx-sage-surface),
    var(--grubbx-olive-highlight),
    var(--grubbx-olive),
    var(--grubbx-olive-deep),
    var(--grubbx-sage-surface)
  ) !important;
}

/* Brand gradients are raster assets, so tint only the known decorative art. */
img[src*="_hero-frame"],
img[src*="_see-why"],
img[src*="nav_gradient-green"] {
  filter: hue-rotate(100deg) saturate(.8);
}

img[src*="nav_gradient-blue"] {
  filter: hue-rotate(20deg);
}

.restaurant-wrap_box-card.cc-gradient {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 78%), rgb(103 69 252 / 74%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c19abd76bf20834f6fe7f2_2539546c327ca18314bbec352952f7ef_restaurant-gradient_bg.avif") !important;
}

.owner-stack-tabs_item.cc-3 {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 78%), rgb(103 69 252 / 74%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c3ff933f608e3e77c74b87_cta-gradient-2.jpg") !important;
}

.section-cta {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 76%), rgb(103 69 252 / 72%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c1abb2034d5fe05a10dc2a_dc5cd79dd360ef682eced16d1932dd49_cta-bg.avif") !important;
}

/* Isolate the adapted phone from its baked preview background. */
.section-cta .btn {
  min-height: 44px;
}

.section-cta .cta-img[src*="cta-phone-grubbx-app"] {
  clip-path: polygon(
    13% 1.7%, 17% 1.9%, 61% 6%, 64% 6.8%, 66.5% 8.3%,
    68.5% 10%, 70% 13%, 93% 87%, 93.5% 90%, 93% 92%,
    91.5% 94%, 89.5% 95.4%, 87% 96.2%, 40% 97.2%, 36% 97%,
    33% 96.3%, 30% 95%, 28% 93%, 26% 90%, 2.8% 10%,
    2.4% 8%, 2.8% 6.5%, 4% 5%, 6% 3.7%, 9% 2.2%
  );
}

/* Keep the phone in place while the shorter backdrop sits behind its lower half. */
@media (min-width: 992px) {
  body .section-cta.section-cta:has(.cta-img) {
    position: relative;
    isolation: isolate;
    overflow: visible;
    /* Paint the exposed area with the page canvas, hiding the old full-height tab. */
    background-color: var(--grubbx-sage-surface) !important;
    background-image: none !important;
  }

  body .section-cta.section-cta:has(.cta-img)::before {
    content: "";
    position: absolute;
    inset: 38% 0 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--grubbx-olive);
    background-image:
      linear-gradient(var(--grubbx-olive), var(--grubbx-olive-deep));
    pointer-events: none;
  }

  .section-cta .cta-img {
    top: 5.5em;
  }

  .section-cta:has(.cta-img) .cta-wrap {
    position: relative;
    justify-content: flex-end;
    /* Reserve the Home composition even for short or lazy-loaded artwork.
       The backdrop and copy must not derive their height from the image. */
    min-height: 57.6em;
  }

  /* Center the copy in the visible backdrop, above the overlapping footer. */
  .section-cta:has(.cta-img) .cta-head {
    position: absolute;
    inset: 38% auto 3.5em 0;
    width: calc(50% - 1.25em);
    padding-block: 0;
    justify-content: center;
    gap: 2em;
  }

  .section-cta:has(.cta-img) .cta-head .h3 {
    text-wrap: balance;
  }

  .section-cta:has(.cta-img) .cta-head .button-group {
    flex-wrap: wrap;
    gap: .75em;
  }
}

/* Short landscape artwork cannot absorb the exported phone's negative
   mobile margins. Keep the copy, artwork and footer in normal flow. */
@media (max-width: 991px) {
  .section-cta:has(.cta-img:not([src*="cta-phone-grubbx-app"])) .cta-wrap {
    margin-bottom: 0;
    padding-bottom: 3.5em;
  }

  .section-cta .cta-img:not([src*="cta-phone-grubbx-app"]) {
    top: 0;
    width: 100%;
    height: auto;
  }
}

.location-banner_bottom {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 76%), rgb(103 69 252 / 72%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c1abb2034d5fe05a10dc2a_dc5cd79dd360ef682eced16d1932dd49_cta-bg.avif") !important;
}

.product-hero_box {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 78%), rgb(103 69 252 / 74%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c3f3f1fbe7ea966f484f0f_product-hero_bg.avif") !important;
}

.section-base.is-product-page {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 78%), rgb(103 69 252 / 72%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c3f525a3453c0d3ae135ee_84139454bafe16d9c253bf258b1f0928_product-cta_bg.avif") !important;
}

.product-traffict_item.is-delivery {
  background-color: var(--grubbx-olive-deep) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 76%), rgb(103 69 252 / 70%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c3fff4e98247d5e694cbf2_delivery-cards_bg.avif") !important;
}

.section-blog_topics {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 78%), rgb(103 69 252 / 72%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69c683ce5b1dd069c8deee31_topics-bg.avif") !important;
}

.product-traffict_item.is-large.is-restaurant-seo {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 76%), rgb(103 69 252 / 70%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69cc3bd12510ae0aa05fcc45_restaurant-seo_bendo-bg.avif") !important;
}

.why-content_card-item.is-owner {
  background-color: var(--grubbx-olive-deep) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 74%), rgb(103 69 252 / 68%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/6a42269e551c2f7e8f3c0527_pill-bg.avif") !important;
}

.product-traffict_item.is-large.is-reviews-engine {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 76%), rgb(103 69 252 / 70%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69d39791dcb70e6ae5f4214c_b125689773dd673b2b6e361bb7b4e008_reviews-engine-bg.jpg") !important;
}

.product-traffict_item.is-email-mkt {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 76%), rgb(103 69 252 / 70%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69d39c47009c573d0b29612c_email-marketing-bg-large.jpg") !important;
}

.product-traffict_item.is-reorders.is-reporting {
  background-color: var(--grubbx-olive) !important;
  background-image:
    linear-gradient(rgb(12 5 72 / 74%), rgb(103 69 252 / 68%)),
    url("/owner-assets/69b9330c8b70142e4e5f7d3c/69cec65b94dace5e3e84ace0_reporting-bento-alerts-m.jpg") !important;
}

/*
 * Secondary accent family. These components originally shared a cold blue
 * texture; luminosity blending preserves their grain and linework while
 * moving them into the warm clay system.
 */
:is(
  .section-career-cta,
  .section-leaders-support,
  .product-traffict_item.is-large,
  .product-traffict_item.is-ordering-bottom.is-2,
  .product-traffict_item.is-listings,
  .product-traffict_item.is-loyalty,
  .section-about_local,
  .product-traffict_item.is-restaurant-seo,
  .product-traffict_item.is-large.is-marketing,
  .product-traffict_item.is-large.is-smart,
  .product-traffict_item.is-large.is-catering,
  .product-traffict_item.is-push-large,
  .product-traffict_item.is-large.is-kitchen-large,
  .product-traffict_item.is-point-of-sale,
  .section-why_sticky
) {
  background-color: var(--grubbx-clay) !important;
  background-blend-mode: luminosity !important;
}

.leaders-support_list-item {
  background-color: var(--color-surface-subtle) !important;
  border: 1px solid var(--color-border);
  color: #2c2c2c !important;
}

.osano-cm-widget__outline {
  stroke: var(--grubbx-clay-deep) !important;
}

/* Homepage creative-library rail, matched to the supplied desktop reference. */
.hero-library-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 74rem);
  color: rgb(44 44 44 / 72%);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.hero-library-intro,
.hero-library-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0;
}

/* Fictional homepage brand samples. Their colors belong to the sample brands. */
[data-fictional-brand-reviews] {
  padding-block: var(--space-16, 4rem);
  background: transparent;
  color: var(--color-text);
}

[data-fictional-brand-reviews] + [data-section-overlap] {
  margin-top: 0;
}

@media (max-width: 767px) {
  .section-owner-stack .owner-stack-tabs > .show-table {
    display: none;
  }

  [data-fictional-brand-reviews] {
    padding-block: var(--space-12, 3rem);
  }
}


[data-fictional-brand-reviews] .reviews-wrap_brand-logo {
  box-sizing: border-box;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  aspect-ratio: 1;
  border: 1px solid var(--grubbx-olive-border);
  border-radius: .625rem;
  padding: .28rem;
  background: var(--grubbx-sage-canvas);
  display: block;
  object-fit: contain !important;
}

[data-fictional-brand-reviews] .reviews-wrap_item .body-m {
  text-wrap: pretty;
}

[data-fictional-brand-reviews] .cc-meta-8 p {
  font-weight: 600;
}

.hero-library-intro {
  gap: .24rem;
}

.hero-library-intro strong {
  color: rgb(44 44 44 / 86%);
  font-weight: 650;
}

.hero-library-divider {
  flex: none;
  width: 1px;
  height: 1.125rem;
  margin: 0 1rem;
  background: rgb(44 44 44 / 17%);
}

.hero-library-item {
  gap: .45rem;
}

.hero-library-item img {
  display: block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  opacity: .91;
}

.hero-library-rail + .h1.cc-home {
  margin-top: 1.5rem;
}

@media (max-width: 1199px) {
  .hero-library-rail {
    font-size: .6875rem;
  }

  .hero-library-divider {
    margin-inline: .75rem;
  }

  .hero-library-item {
    gap: .375rem;
  }

  .hero-library-item img {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (max-width: 991px) {
  .hero-library-rail {
    flex-wrap: wrap;
    max-width: 43rem;
    gap: .5rem .9rem;
    white-space: normal;
  }

  .hero-library-intro {
    justify-content: center;
    width: 100%;
  }

  .hero-library-divider {
    display: none;
  }

  .hero-library-rail + .h1.cc-home {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .hero-library-rail {
    gap: .45rem .8rem;
    padding-inline: .75rem;
    font-size: .625rem;
  }

  .hero-library-item img {
    width: 1rem;
    height: 1rem;
  }
}

@media (max-width: 479px) {
  .hero-library-rail {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: .5rem .85rem;
  }

  .hero-library-intro {
    grid-column: 1 / -1;
  }

  .hero-library-item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/*
 * Some exported textures contain the legacy emerald in their pixels. An
 * opaque, layered olive treatment prevents that color from bleeding through
 * while keeping the cards dimensional instead of turning them into flat fills.
 */
:is(
  .restaurant-wrap_box-card.cc-gradient,
  .owner-stack-tabs_item.cc-3,
  .section-cta,
  .location-banner_bottom,
  .product-hero_box,
  .section-base.is-product-page,
  .product-traffict_item.is-delivery,
  .section-blog_topics,
  .product-traffict_item.is-large.is-restaurant-seo,
  .why-content_card-item.is-owner,
  .product-traffict_item.is-large.is-reviews-engine,
  .product-traffict_item.is-email-mkt,
  .product-traffict_item.is-reorders.is-reporting
) {
  background-color: var(--grubbx-olive-deep) !important;
  background-blend-mode: normal !important;
  background-image:
    radial-gradient(circle at 82% 12%, rgb(182 165 253 / 42%), transparent 38%),
    radial-gradient(circle at 12% 86%, rgb(12 5 72 / 84%), transparent 52%),
    linear-gradient(145deg, var(--grubbx-olive), var(--grubbx-olive-deep)) !important;
}

/* The restaurant card's Lottie embeds its old green texture as base64. */
.restaurant-wrap_box-lottie svg image[width="608px"][height="800px"] {
  filter: grayscale(1) contrast(.8) !important;
  opacity: .16 !important;
}

:where(
  svg [fill="rgb(8,137,36)" i],
  svg [fill="rgb(7,136,35)" i],
  svg [fill="#088924" i]
) {
  fill: var(--grubbx-olive) !important;
}

svg [fill="rgb(8,68,19)" i] {
  fill: var(--grubbx-olive-deep) !important;
}

:where(
  svg [fill="#fbf8f5" i],
  svg [fill="#faf7f2" i],
  svg [fill="#f9f3ed" i],
  svg [fill="#f7f2ec" i],
  svg [fill="#f6eee5" i],
  svg [fill="#f5eee6" i],
  svg [fill="#f4ede5" i],
  svg [fill="#f3ebe1" i],
  svg [fill="#efe4d6" i]
) {
  fill: var(--grubbx-sage-muted) !important;
}

:where(
  svg [stroke="rgb(8,137,36)" i],
  svg [stroke="#088924" i]
) {
  stroke: var(--grubbx-olive) !important;
}

.guides-grid_link {
  background-color: var(--grubbx-olive-soft) !important;
}

.reviews-wrap_item {
  background-color: var(--grubbx-olive-highlight) !important;
}

/* Homepage benefit badges use the same Phosphor visual language as the app. */
.rating-group_logo .rating-group_icon {
  color: var(--grubbx-olive-deep);
  padding: .375em;
}

.owner-stack-menu_progress {
  background-image: linear-gradient(180deg, transparent, var(--grubbx-olive-deep)) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-signature-path] path {
    stroke-dashoffset: 0 !important;
  }

  [glow-border]::after {
    transition: none !important;
  }
}

/* Editorial surfaces: canonical olive and soft green, shared by both locales. */
.blog_card {
  --blog-surface-featured: #6745fc;
  --blog-surface-supporting: #e7e0ff;
  --blog-text-inverse: #f8f7fc;
  --blog-text: #17132b;
  background-color: var(--blog-surface-featured) !important;
  background-blend-mode: soft-light !important;
  color: var(--blog-text-inverse) !important;
}

.blog_card:is(
  .w-variant-8000b2ce-893e-e9fb-9a20-5bc387a7ef2c,
  .w-variant-8cbc64cb-0853-42ce-9a88-89e5e0cfb5d7,
  .w-variant-f75fd55e-f9b5-eeca-e287-32ef7b624fc8
) {
  background-color: var(--blog-surface-supporting) !important;
  color: var(--blog-text) !important;
}

.blog_card .blog-card_content-box {
  color: inherit !important;
}

.blog_card .blog-card_content-item {
  border-color: currentColor;
}

.blog_card:focus-visible {
  outline: 2px solid var(--blog-surface-featured);
  outline-offset: 4px;
}
/* Match the homepage hero canvas across the blog landing page. */
body:has(.section-blog_hero) {
  --blog-canvas: var(--white);
  --blog-canvas-text: #17132b;
  background-color: var(--blog-canvas) !important;
}

body:has(.section-blog_hero) :is(
  .section-blog_hero,
  .section-blog_most,
  .section-blog_topics,
  .section-blog_categories,
  .section-base.is-product-page,
  .section-footer
) {
  background-color: var(--blog-canvas) !important;
  background-image: none !important;
  color: var(--blog-canvas-text) !important;
}

body:has(.section-blog_hero) .blog-topics_link {
  background-color: var(--grubbx-sage-surface) !important;
  color: var(--blog-canvas-text) !important;
}

/* Keep the navigation continuous with the blog canvas before scrolling. */
body:has(.section-blog_hero) .nav:not([data-scroll="scrolled"]) {
  background-color: var(--blog-canvas);
}

/* Navigation and footer wordmarks: use the supplied brand color inside the
 * original vector silhouette. The image keeps its accessible name and layout.
 * At this scale the 4px source grain becomes a fine, roughly 1px print texture. */
@supports (mask-image: url("/brand/grubbx-wordmark-nav.svg")) {
  .nav a:has(> .nav_logo.grubbx-brand-wordmark),
  :is(.footer_logo, .eng-lp_footer-logo, .eng-hero_logo):has(> .grubbx-brand-wordmark) {
    position: relative;
  }

  .nav a > .nav_logo.grubbx-brand-wordmark,
  :is(.footer_logo, .eng-lp_footer-logo, .eng-hero_logo) > .grubbx-brand-wordmark {
    opacity: 0;
  }

  .nav a:has(> .nav_logo.grubbx-brand-wordmark)::after,
  :is(.footer_logo, .eng-lp_footer-logo, .eng-hero_logo):has(> .grubbx-brand-wordmark)::after {
    content: "";
    position: absolute;
    inset: .0625rem 0 -.0625rem;
    pointer-events: none;
    background: var(--color-action) url("/owner-assets/dither-forest-orbit.webp?v=20260915") center / 100% auto no-repeat;
    mask: url("/brand/grubbx-wordmark-nav.svg") left center / contain no-repeat;
  }

  :is(.footer_logo, .eng-lp_footer-logo, .eng-hero_logo):has(> .grubbx-brand-wordmark)::after {
    display: block;
    inset: 0;
    mask-position: center;
  }
}

@media (forced-colors: active) {
  .nav a > .nav_logo.grubbx-brand-wordmark,
  :is(.footer_logo, .eng-lp_footer-logo, .eng-hero_logo) > .grubbx-brand-wordmark { opacity: 1; }
  .nav a:has(> .nav_logo.grubbx-brand-wordmark)::after,
  :is(.footer_logo, .eng-lp_footer-logo, .eng-hero_logo):has(> .grubbx-brand-wordmark)::after { display: none; }
}

/* Homepage colored containers. Explicit main-only inventory keeps the footer,
 * navigation, form controls and the dashboard outside this treatment.
 * Lossless assets share the hero's 4px ordered dither; palette ranges keep
 * dark text above 8:1 and inverse text above 5:1 across every pixel.
 */
body:has(#hero-scene) main {
  --dither-forest-arc: url("/owner-assets/dither-forest-arc.webp?v=20260915");
  --dither-forest-orbit: url("/owner-assets/dither-forest-orbit.webp?v=20260915");
  --dither-lime-wave: url("/owner-assets/dither-lime-wave.webp?v=20260915");
  --dither-sage-orbit: url("/owner-assets/dither-sage-orbit.webp?v=20260915");
  --dither-mist-diagonal: url("/owner-assets/dither-mist-diagonal.webp?v=20260915");
  --dither-mist-wave: url("/owner-assets/dither-mist-wave.webp?v=20260915");
}

body:has(#hero-scene) main :is(
  .owner-stack-tabs_item,
  .grubbx-remotion-stack,
  .reviews-wrap_item,
  .section-restaurant,
  .restaurant-wrap_box-card,
  .grubbx-remotion-card,
  .latest-resources,
  .latest-resource,
  .section-beliefs,
  .saved-palette-section,
  .saved-palette-card,
  .saved-palette-card h3,
  .saved-palette-cta,
  .section-cta
) {
  background-image: var(--container-dither, var(--dither-mist-wave)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  color: var(--color-text) !important;
}

body:has(#hero-scene) main :is(.owner-stack-tabs_item, .saved-palette-card h3, .restaurant-wrap_box-card.cc-gradient) {
  --container-dither: var(--dither-forest-arc);
  color: var(--color-action-text) !important;
}

body:has(#hero-scene) main :is(.owner-stack-tabs_item:nth-child(even), .saved-palette-card:nth-child(even) h3) {
  --container-dither: var(--dither-forest-orbit);
}

body:has(#hero-scene) main :is(.reviews-wrap_item, .restaurant-wrap_box-card, .saved-palette-cta) {
  --container-dither: var(--dither-lime-wave);
}

body:has(#hero-scene) main :is(.w-dyn-item:nth-child(3n + 2) > .reviews-wrap_item, .restaurant-wrap_box-card.cc-big, .latest-resource) {
  --container-dither: var(--dither-sage-orbit);
}

body:has(#hero-scene) main :is(.w-dyn-item:nth-child(3n) > .reviews-wrap_item, .section-restaurant, .section-beliefs, .saved-palette-card) {
  --container-dither: var(--dither-mist-diagonal);
}

/* Reset inherited artwork inside nested media and quiet section surfaces. */
body:has(#hero-scene) main :is(.grubbx-remotion-stack, .grubbx-remotion-card, .latest-resources, .saved-palette-section, .section-cta) {
  --container-dither: var(--dither-mist-wave);
}

/* Reading sections and the space above the CTA share the page canvas. */
body:has(#hero-scene) main :is(.latest-resources.latest-resources, .section-beliefs.section-beliefs, .section-cta.section-cta) {
  background: var(--color-canvas) !important;
}

body:has(#hero-scene) main .restaurant-wrap_box-card.cc-gradient {
  --container-dither: var(--dither-forest-orbit);
}

body:has(#hero-scene) main .owner-stack-tabs_item .h6 {
  color: var(--color-action-text) !important;
}

body:has(#hero-scene) main .reviews-wrap_item :is(p, .body-m) {
  color: var(--color-text) !important;
}

body:has(#hero-scene) main .section-beliefs p {
  color: var(--color-text) !important;
}

body:has(#hero-scene) main .restaurant-wrap_box-card:not(.cc-big) .h5 {
  color: inherit !important;
}

body:has(#hero-scene) main .restaurant-wrap_box-card.cc-gradient .grubbx-remotion-card {
  --container-dither: var(--dither-forest-orbit);
}

/* Preserve the photographed resource previews; replace their solid lower
 * scrim with dither and retain the fade where artwork meets the caption. */
body:has(#hero-scene) main .stories-item_content {
  isolation: isolate;
  background-image: none !important;
}

body:has(#hero-scene) main .stories-item_content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--dither-forest-arc) center / cover no-repeat;
  mask-image: linear-gradient(transparent, black 65%);
}

body:has(#hero-scene) main :nth-child(even) > .stories-item_content::before {
  background-image: var(--dither-forest-orbit);
}

/* The final CTA also has an independent decorative backdrop on desktop. */
body:has(#hero-scene) main .section-cta.section-cta:has(.cta-img)::before {
  background-image: var(--dither-lime-wave) !important;
  background-size: cover !important;
  background-position: center !important;
}

body:has(#hero-scene) main .section-cta .btn.is-translucent {
  background: var(--color-canvas) !important;
  color: var(--color-text) !important;
}

/* All other public-site templates, ES and EN. This stylesheet is loaded only
 * by the public HTML shells. Keep explicit footer exclusions even when a
 * footer happens to reuse a section/card class from the content area. */
body:not(:has(#hero-scene)) {
  --public-dither-mist: url("/owner-assets/dither-mist-wave.webp?v=20260915");
  --public-dither-diagonal: url("/owner-assets/dither-mist-diagonal.webp?v=20260915");
  --public-dither-sage: url("/owner-assets/dither-sage-orbit.webp?v=20260915");
  --public-dither-lime: url("/owner-assets/dither-lime-wave.webp?v=20260915");
  --public-dither-forest: url("/owner-assets/dither-forest-arc.webp?v=20260915");
  --public-dither-orbit: url("/owner-assets/dither-forest-orbit.webp?v=20260915");
  --public-dither-ink: #17132b;
  --public-dither-inverse: #f8f7fc;
}

body:not(:has(#hero-scene)) :where(
  .section-product_hero, .section-base, .section_center-hero,
  .section-hiw-steps, .section-blog_hero, .section-blog_most,
  .section-blog_topics, .section-blog_categories, .section-blog_content,
  .section-series_b-hero, .section-series_b-wrap, .section-testimonials,
  .section_resource, .section_demo, .section-cta,
  .pricing-hero, .pricing-actions, .pricing-card,
  .product-hero_box, .product-bg_visual, .product-traffict_item,
  .hiw-steps_item_visual, .hiw-steps_lottie, .features-props_card,
  .demo-form-box, .demo-grid_item, .demo-grid-quote, .free-guide_thumb-box,
  .reviews-wrap_item, .testimonials-card,
  .blog_card, .blog-topics_link, .blog-content_key-wrap, .blog-author_wrap,
  .blog-content_column-sticky, .blog-content_cta-wrap, .blog-content_custom-cta, .blog-callout, .blog-cta,
  .series_b-block, .series_b-content_block, .series_b-item_3,
  .series_b-content_stats-box, .series_b-item_5, .series_b-item_5-inner,
  .series_b-cta, .series_b-table, .n_series_b-table,
  .series-c_tag-item, .series_c-case-item, .series-c_callout,
  .series-c_callout-v-item, .series-c_feed, .series-c_feed-item
):not(:where(footer, footer *, .section-footer, .section-footer *, [role="contentinfo"], [role="contentinfo"] *)) {
  --public-surface-art: var(--public-dither-mist);
  --public-surface-text: var(--public-dither-ink);
  background-image: var(--public-surface-art) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  color: var(--public-surface-text) !important;
}

body:not(:has(#hero-scene)) :where(
  .section-base:nth-of-type(even), .section-blog_categories,
  .section-series_b-wrap, .section-hiw-steps, .pricing-actions,
  .reviews-wrap_item, .blog-content_column-sticky, .series_b-item_3,
  .series-c_feed-item, .demo-grid_item
):not(:where(footer *, .section-footer *, [role="contentinfo"] *)) {
  --public-surface-art: var(--public-dither-diagonal);
}

body:not(:has(#hero-scene)) :where(
  .product-bg_visual, .hiw-steps_item_visual, .hiw-steps_lottie,
  .features-props_card, .demo-grid-quote, .blog-content_key-wrap,
  .blog-author_wrap, .section-blog_most, .series-c_callout,
  .series-c_feed, .series_b-table, .n_series_b-table,
  .w-dyn-item:nth-child(3n + 2) > .reviews-wrap_item
):not(:where(footer *, .section-footer *, [role="contentinfo"] *)) {
  --public-surface-art: var(--public-dither-sage);
}

body:not(:has(#hero-scene)) :where(
  .product-hero_box, .product-traffict_item, .pricing-card,
  .blog-topics_link, .series-c_tag-item, .series_c-case-item,
  .w-dyn-item:nth-child(3n) > .reviews-wrap_item
):not(:where(footer *, .section-footer *, [role="contentinfo"] *)) {
  --public-surface-art: var(--public-dither-lime);
}

body:not(:has(#hero-scene)) :where(
  .section-base.is-product-page, .pricing-card-featured, .blog_card, .blog-content_cta-wrap,
  .series_b-block, .series_b-content_block, .series_b-content_stats-box,
  .series_b-cta, .product-traffict_item.is-catering,
  .product-traffict_item.is-reorders, .product-traffict_item.is-pos
):not(:where(footer *, .section-footer *, [role="contentinfo"] *)) {
  --public-surface-art: var(--public-dither-forest);
  --public-surface-text: var(--public-dither-inverse);
}

body:not(:has(#hero-scene)) :where(.pricing-card-featured, .series_b-content_block, .product-traffict_item.is-pos) {
  --public-surface-art: var(--public-dither-orbit);
}

body:not(:has(#hero-scene)) :where(.series_b-block.white, .series_b-item_5, .series_b-item_5-inner) {
  --public-surface-art: var(--public-dither-diagonal);
  --public-surface-text: var(--public-dither-ink);
}

/* Explicit foregrounds replace inherited legacy white/low-opacity labels.
 * Links and controls retain their own interaction and focus styling. */
body:not(:has(#hero-scene)) :where(
  .pricing-card, .product-traffict_item, .section-base.is-product-page,
  .section-cta, .blog_card, .blog-content_cta-wrap, .series_b-block, .series_b-content_block,
  .series_b-content_stats-box, .series_b-cta, .reviews-wrap_item
) :where(h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .h4, .h5, .h6, .body-m, .body-l, li):not(:where(footer *, .section-footer *, [role="contentinfo"] *)) {
  color: var(--public-surface-text, var(--public-dither-ink)) !important;
}

body:not(:has(#hero-scene)) .section-cta.section-cta:has(.cta-img)::before {
  background: var(--public-dither-lime) center / cover no-repeat !important;
}

body:not(:has(#hero-scene)) .section-cta .btn.is-translucent {
  background: var(--public-dither-inverse) !important;
  color: var(--public-dither-ink) !important;
}

/* Requested navigation-matched canvas for pricing and how-it-works. */
body:has(.section-hiw-steps) .nav:not([data-scroll="scrolled"]) {
  background-color: var(--background--primary) !important;
}

body:not(:has(#hero-scene)):has(.section-hiw-steps) :is(.section_center-hero, .section-hiw-steps, .section-cta) {
  background: var(--background--primary) !important;
}

/* All resource templates share the navigation canvas, including preview frames. */
body:has(.resource-page) {
  --resource-canvas: var(--background--primary);
}

body:not(:has(#hero-scene)) .resource-page,
body:not(:has(#hero-scene)) .resource-page :is(
  .section-product_hero, .section-base, .product-hero_box,
  .product-bg_visual, .product-traffict_item, .product-traffict_item.is-large, .bg-color-taupe
) {
  background: var(--resource-canvas) !important;
}

/* Pricing section canvases stay plain while plan cards retain their artwork. */
/* The CTA redefines --background--primary as dark; use the page's white canvas. */
body:not(:has(#hero-scene)):has(.pricing-hero, .section-hiw-steps) .section-cta.section-cta {
  background: var(--white) !important;
}

body:not(:has(#hero-scene)) :is(.pricing-hero, .pricing-actions) {
  background: var(--background--primary) !important;
}

body:not(:has(#hero-scene)) :where(.pricing-intro, .pricing-actions > .pricing-shell > p, .pricing-table p) {
  color: var(--public-dither-ink) !important;
}

/* Blog landing and individual articles share the navigation canvas. */
body:not(:has(#hero-scene)):has(.section-blog_hero, .section-blog_content, .section-blog_most) {
  --blog-canvas: var(--white);
}

body:not(:has(#hero-scene)) :is(
  .section-blog_hero,
  .section-blog_most,
  .section-blog_topics,
  .section-blog_categories,
  .section-blog_content
) {
  --public-surface-text: var(--public-dither-ink);
  background: var(--blog-canvas, var(--white)) !important;
  color: var(--public-surface-text) !important;
}

/* Supplied identity: consistent actions and undistorted responsive signature. */
html { overflow-x: clip; }
.nav .btn.is-nav:not(.is-nav-text), #email-form .btn {
  background: var(--color-action) !important;
  color: var(--color-action-text) !important;
}
.nav .btn.is-nav:not(.is-nav-text):hover, #email-form .btn:hover {
  background: var(--color-action-hover) !important;
}
.nav .nav_logo.grubbx-brand-wordmark {
  width: 144px;
  height: auto;
  aspect-ratio: 895 / 218;
  object-fit: contain;
}
@media (max-width: 479px) {
  .nav .nav_logo.grubbx-brand-wordmark { width: 120px; }
}
:is(.nav a, .btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (max-width: 479px) {
  .nav .nav-part:first-child { flex: 0 0 96px; width: 96px; }
  .nav .nav_logo.grubbx-brand-wordmark { width: 96px; max-width: 100%; }
  .nav .nav-part.cc-right { min-width: 0; gap: 4px; }
  .nav .btn.is-nav-text { width: 52px; min-height: 44px; padding-inline: 0; font-size: 12px; line-height: 1.15; text-align: center; white-space: normal; }
  .nav .btn.is-nav:not(.is-nav-text) { padding-inline: 10px; font-size: 12px; min-height: 44px; }
}