/* =========================================================
   Buzzlect — MOSAIC skin
   =========================================================
   A corporate sustainability-report look: white canvas, faint vertical
   column rules, and rounded SOLID-colour tiles carrying the big numbers.

   Loads last, on top of style.css -> pages.css -> blog.css -> theme-light.css.
   theme-light.css has already moved the design system onto a light canvas, so
   this file only does two things:

     1. re-points the palette variables at the mosaic colours
     2. turns the flat light cards into the solid colour tiles

   Everything hangs off body.palette-mosaic. That matches the specificity of
   theme-light.css (one element + one class), so ordinary source order decides
   — no !important anywhere, and deleting this one file restores the light
   red/black skin exactly.
   ========================================================= */

/* =========================================================
   1. PALETTE
   ========================================================= */

body.palette-mosaic {
  /* Report canvas, lightest to darkest */
  --black:    #ffffff;
  --black-2:  #f4f7f2;
  --black-3:  #ffffff;
  --charcoal: #eef1ec;
  --border:   #e3e7df;

  /* Brand red, warmed for a paper ground */
  --red:        #d8392b;
  --red-bright: #ef4444;
  --red-deep:   #a81f17;
  --red-glow:   rgba(216, 57, 43, 0.28);

  /* Ink */
  --white:    #222521;
  --grey:     #565b53;
  --grey-dim: #8a8f84;

  /* The mosaic tile set — red-led, with accent variety */
  --t-lime:   #e8533f;  /* warm coral */
  --t-green:  #d8392b;  /* the brand red; the primary tile */
  --t-teal:   #00a39c;
  --t-orange: #f39200;
  --t-purple: #7a4f9e;
  --t-violet: #5b2d8e;
  --ink:      #222521;
}

/* =========================================================
   2. GLOBAL CHROME
   ========================================================= */

body.palette-mosaic { background: var(--black); color: var(--white); }

body.palette-mosaic ::selection { background: var(--t-green); color: #fff; }
body.palette-mosaic ::-webkit-scrollbar-track { background: var(--black-2); }
body.palette-mosaic ::-webkit-scrollbar-thumb { background: var(--t-green); }
body.palette-mosaic ::-webkit-scrollbar-thumb:hover { background: var(--t-lime); }

/* The signature of the report layout: faint vertical column rules behind the
   full-bleed bands. Sixths, matching the six-column measure. */
body.palette-mosaic .hero,
body.palette-mosaic .section-dark,
body.palette-mosaic .cta-section,
body.palette-mosaic .page-hero,
body.palette-mosaic .post-banner {
  background-image:
    repeating-linear-gradient(90deg,
      transparent, transparent calc(16.666% - 1px),
      rgba(34, 37, 33, 0.05) calc(16.666% - 1px), rgba(34, 37, 33, 0.05) 16.666%);
}

/* Those bands paint their rules on the background layer, so anything sitting
   in them needs to be lifted above it. */
body.palette-mosaic .hero-inner,
body.palette-mosaic .section-dark .container,
body.palette-mosaic .cta-inner,
body.palette-mosaic .page-hero .container,
body.palette-mosaic .post-banner .container { position: relative; z-index: 1; }

body.palette-mosaic .nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 var(--border), 0 8px 26px rgba(34, 37, 33, 0.07);
}
body.palette-mosaic .logo span { color: var(--t-green); }
body.palette-mosaic .hamburger span { background: var(--ink); }

body.palette-mosaic .trustbar,
body.palette-mosaic .section-dark,
body.palette-mosaic .cta-section,
body.palette-mosaic .footer { background-color: var(--black-2); }

body.palette-mosaic .footer-col a:hover { color: var(--t-green); }

@media (max-width: 860px) {
  body.palette-mosaic .nav-links.open {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: -20px 0 60px rgba(34, 37, 33, 0.18);
  }
}

/* =========================================================
   3. HERO
   ========================================================= */

body.palette-mosaic .hero { background-color: var(--black); }
body.palette-mosaic .hero-glow {
  background: radial-gradient(circle, rgba(216, 57, 43, 0.18), transparent 65%);
  opacity: 0.6;
}
/* The 60px mesh fights the column rules — the rules are the motif here. */
body.palette-mosaic .grid-overlay { display: none; }

body.palette-mosaic .eyebrow,
body.palette-mosaic .eyebrow::before { color: var(--t-green); }
body.palette-mosaic .eyebrow::before { background: var(--t-green); }
body.palette-mosaic .hero-sub em { color: var(--t-green); }
body.palette-mosaic .stat-num { color: var(--ink); }
body.palette-mosaic .text-red { color: var(--t-green); }

body.palette-mosaic .ai-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(34, 37, 33, 0.10);
}
/* The rule above outranks style.css's .ai-card:hover, so the lift has to be
   restated here or the card stops responding to the cursor entirely. */
body.palette-mosaic .ai-card:hover {
  border-color: var(--t-green);
  box-shadow: 0 30px 75px rgba(34, 37, 33, 0.16);
}
body.palette-mosaic .ai-card-header .dot:nth-child(1) { background: var(--t-green); }
body.palette-mosaic .ai-card-header .dot:nth-child(2) { background: var(--t-orange); }
body.palette-mosaic .ai-card-header .dot:nth-child(3) { background: var(--t-teal); }
body.palette-mosaic .ai-a { border-left: 3px solid var(--t-green); background: var(--black-2); }
body.palette-mosaic .cite-chip {
  color: var(--t-green);
  background: rgba(216, 57, 43, 0.10);
  border-color: rgba(216, 57, 43, 0.30);
}
/* Same story: restate the hover the rule above would otherwise swallow.
   The lift (translateY) still comes from style.css. */
body.palette-mosaic .cite-chip:hover {
  background: rgba(216, 57, 43, 0.22);
  border-color: var(--t-green);
}

/* =========================================================
   4. BUTTONS + FORM CONTROLS
   ========================================================= */

body.palette-mosaic .btn-primary {
  background: var(--t-green);
  color: #fff;
  box-shadow: 0 4px 18px rgba(216, 57, 43, 0.28);
}
body.palette-mosaic .btn-primary:hover { background: var(--t-lime); box-shadow: 0 10px 30px var(--red-glow); }

body.palette-mosaic .btn-ghost { color: var(--ink); border: 1.5px solid var(--border); }
body.palette-mosaic .btn-ghost:hover { color: var(--t-green); border-color: var(--t-green); }

body.palette-mosaic .cta-form input,
body.palette-mosaic .field input,
body.palette-mosaic .field select,
body.palette-mosaic .field textarea {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* The border shorthand above outranks style.css's input:hover, so the
   pre-focus cue has to be restated too. */
body.palette-mosaic .cta-form input:hover,
body.palette-mosaic .field input:hover,
body.palette-mosaic .field select:hover,
body.palette-mosaic .field textarea:hover { border-color: var(--grey-dim); }

body.palette-mosaic .cta-form input:focus,
body.palette-mosaic .field input:focus,
body.palette-mosaic .field select:focus,
body.palette-mosaic .field textarea:focus {
  border-color: var(--t-green);
  box-shadow: 0 0 0 3px rgba(216, 57, 43, 0.16);
}

/* =========================================================
   5. WHITE REPORT TILES
   The shared card shape: generous radius, hairline border, soft lift.
   ========================================================= */

body.palette-mosaic .service-card,
body.palette-mosaic .blog-card,
body.palette-mosaic .featured-post,
body.palette-mosaic .value-card,
body.palette-mosaic .price-card,
body.palette-mosaic .founder-card,
body.palette-mosaic .info-card,
body.palette-mosaic .contact-form-card,
body.palette-mosaic .faq-item,
body.palette-mosaic .post-nav-link {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(34, 37, 33, 0.05);
}

/* Every tile in the group above needs its hover restated here, because the
   static rule outranks the base :hover. Leaving one out silently kills that
   tile's hover response — .featured-post did exactly that. */
body.palette-mosaic .service-card:hover,
body.palette-mosaic .blog-card:hover,
body.palette-mosaic .featured-post:hover,
body.palette-mosaic .value-card:hover,
body.palette-mosaic .price-card:hover,
body.palette-mosaic .founder-card:hover,
body.palette-mosaic .info-card:hover,
body.palette-mosaic .post-nav-link:hover {
  border-color: var(--t-green);
  box-shadow: 0 22px 55px rgba(34, 37, 33, 0.12);
}

body.palette-mosaic .check-list li::before { color: var(--t-green); }

/* ---- service cards: solid icon tiles, colour cycling per column ---- */

body.palette-mosaic .service-icon {
  border-radius: 16px;
  color: #fff;
  background: var(--t-green);
  border-color: var(--t-green);
}
body.palette-mosaic .service-card:nth-child(3n+2) .service-icon { background: var(--t-orange); border-color: var(--t-orange); }
body.palette-mosaic .service-card:nth-child(3n+3) .service-icon { background: var(--t-teal);   border-color: var(--t-teal); }

body.palette-mosaic .cards-2 .service-card:nth-child(1)::before { background: linear-gradient(90deg, var(--t-lime), var(--t-green)); }
body.palette-mosaic .cards-2 .service-card:nth-child(2)::before { background: linear-gradient(90deg, var(--t-orange), #f7b34d); }
body.palette-mosaic .cards-2 .service-card:nth-child(1) .card-link { color: var(--t-green); }
body.palette-mosaic .cards-2 .service-card:nth-child(2) .card-link { color: var(--t-orange); }

/* =========================================================
   6. PROCESS STEPS — the showcase: solid colour number tiles
   ========================================================= */

body.palette-mosaic .steps > .step {
  border: none;
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 14px 36px rgba(34, 37, 33, 0.12);
}
body.palette-mosaic .steps > .step:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 55px rgba(34, 37, 33, 0.20);
}
body.palette-mosaic .steps > .step h4 { color: #fff; }
body.palette-mosaic .steps > .step p  { color: rgba(255, 255, 255, 0.92); }

/* style.css draws the numeral as an outline; on a solid tile it is filled. */
body.palette-mosaic .steps > .step .step-num,
body.palette-mosaic .steps > .step:hover .step-num {
  color: #fff;
  -webkit-text-stroke: 0;
  opacity: 0.95;
  font-weight: 800;
}

/* Cycles every four, so the run of colour holds however many steps exist. */
body.palette-mosaic .steps > .step:nth-child(4n+1) { background: var(--t-lime); }
body.palette-mosaic .steps > .step:nth-child(4n+2) { background: var(--t-teal); }
body.palette-mosaic .steps > .step:nth-child(4n+3) { background: var(--t-orange); }
body.palette-mosaic .steps > .step:nth-child(4n+4) { background: var(--t-purple); }

/* =========================================================
   7. RESULTS — solid gradient tiles
   ========================================================= */

body.palette-mosaic .result-card {
  border: none;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(34, 37, 33, 0.10);
}
body.palette-mosaic .result-card:hover {
  box-shadow: 0 24px 55px rgba(34, 37, 33, 0.20);
  border-color: transparent;
}
body.palette-mosaic .result-card p { color: rgba(255, 255, 255, 0.92); }
body.palette-mosaic .result-num { color: #fff; text-shadow: none; }

body.palette-mosaic .results-grid > .result-card:nth-child(3n+1) { background: linear-gradient(165deg, var(--t-green), var(--t-lime)); }
body.palette-mosaic .results-grid > .result-card:nth-child(3n+2) { background: linear-gradient(165deg, var(--t-orange), #f7b34d); }
body.palette-mosaic .results-grid > .result-card:nth-child(3n+3) { background: linear-gradient(165deg, var(--t-violet), var(--t-purple)); }

/* =========================================================
   8. BLOG CARDS
   ========================================================= */

body.palette-mosaic .blog-card-img { background: linear-gradient(135deg, var(--t-green), var(--t-lime) 85%); }
body.palette-mosaic .blog-card-img.alt-1 { background: linear-gradient(225deg, var(--t-teal), #6fd6cf 85%); }
body.palette-mosaic .blog-card-img.alt-2 { background: linear-gradient(160deg, var(--t-orange), #f7b34d 90%); }
body.palette-mosaic .featured-img { background: linear-gradient(120deg, var(--t-green), var(--t-lime)); }

/* The thumb mesh stays. Hiding it also removed the scale(1.15) zoom that
   style.css runs on it during hover, which is the card's whole motion — and
   the static mosaic page keeps the mesh too. */

body.palette-mosaic .blog-tag {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  color: var(--ink);
}
body.palette-mosaic .blog-card:hover h3 { color: var(--t-green); }
body.palette-mosaic .filter-btn { border-color: var(--border); color: var(--grey); }
body.palette-mosaic .filter-btn:hover { border-color: var(--t-green); color: var(--t-green); }
body.palette-mosaic .filter-btn.active {
  background: var(--t-green);
  border-color: var(--t-green);
  color: #fff;
}

/* =========================================================
   9. ARTICLE
   ========================================================= */

body.palette-mosaic .post-banner { background-color: var(--black-2); }
body.palette-mosaic .post-content { color: #2b2e29; }
body.palette-mosaic .post-content strong { color: var(--ink); }
body.palette-mosaic .post-content a { color: var(--t-green); }
body.palette-mosaic .post-content blockquote {
  background: var(--black-2);
  border-left-color: var(--t-green);
  border-radius: 0 14px 14px 0;
}
body.palette-mosaic .post-content pre,
body.palette-mosaic .post-content .wp-block-code { background: var(--black-2); border-radius: 14px; }
body.palette-mosaic .post-content img { border-radius: 16px; border-color: var(--border); }
body.palette-mosaic .post-content th { background: var(--black-2); }
body.palette-mosaic .post-content tbody tr:hover { background: rgba(216, 57, 43, 0.04); }

body.palette-mosaic .post-cta {
  background: linear-gradient(135deg, rgba(216, 57, 43, 0.08), transparent), #ffffff;
  border: 1px solid rgba(216, 57, 43, 0.28);
  border-radius: 20px;
}
body.palette-mosaic .progress-bar { background: var(--t-green); box-shadow: 0 0 10px rgba(216, 57, 43, 0.35); }
body.palette-mosaic .post-toc-item.is-active > a { color: var(--t-green); }
body.palette-mosaic .post-tags a:hover { border-color: var(--t-green); color: var(--t-green); }

@media (max-width: 1080px) {
  body.palette-mosaic .post-toc { background: #ffffff; border-radius: 16px; }
}

/* =========================================================
   10. ABOUT PAGE
   ========================================================= */

body.palette-mosaic .about-story p em { color: var(--t-green); }
body.palette-mosaic .about-story p strong { color: var(--ink); }

body.palette-mosaic .founder-avatar {
  background: linear-gradient(135deg, var(--t-green), var(--t-lime));
  box-shadow: 0 10px 40px rgba(216, 57, 43, 0.30);
  color: #fff;
}
body.palette-mosaic .founder-role { color: var(--t-green); }
body.palette-mosaic .founder-creds li::before { color: var(--t-orange); }

/* Values keep a white tile and take their colour from the icon, so four
   headings in a row stay legible. */
body.palette-mosaic .value-icon {
  border-radius: 14px;
  color: #fff;
  background: var(--t-green);
  border-color: var(--t-green);
}
body.palette-mosaic .values-grid > .value-card:nth-child(4n+2) .value-icon { background: var(--t-teal);   border-color: var(--t-teal); }
body.palette-mosaic .values-grid > .value-card:nth-child(4n+3) .value-icon { background: var(--t-orange); border-color: var(--t-orange); }
body.palette-mosaic .values-grid > .value-card:nth-child(4n+4) .value-icon { background: var(--t-purple); border-color: var(--t-purple); }
body.palette-mosaic .value-card:hover .value-icon { box-shadow: 0 10px 24px rgba(34, 37, 33, 0.18); }

/* =========================================================
   11. SERVICES PAGE
   ========================================================= */

body.palette-mosaic .deliver-chip {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--grey);
}
body.palette-mosaic .deliver-chip:hover { border-color: var(--t-green); color: var(--t-green); }

/* =========================================================
   12. PRICING PAGE
   ========================================================= */

body.palette-mosaic .price-card::before { background: linear-gradient(90deg, var(--t-lime), var(--t-green)); }
body.palette-mosaic .price-grid > .price-card:nth-child(4n+2)::before { background: linear-gradient(90deg, var(--t-teal), #6fd6cf); }
body.palette-mosaic .price-grid > .price-card:nth-child(4n+3)::before { background: linear-gradient(90deg, var(--t-orange), #f7b34d); }
body.palette-mosaic .price-grid > .price-card:nth-child(4n+4)::before { background: linear-gradient(90deg, var(--t-violet), var(--t-purple)); }

body.palette-mosaic .plan-price { color: var(--ink); }
body.palette-mosaic .plan-price .cur { color: var(--t-green); }

/* The recommended plan is the one solid tile on the page — the report trick
   of letting a single block of colour carry the eye. */
body.palette-mosaic .price-card.popular {
  background: linear-gradient(165deg, var(--t-green), var(--t-lime));
  border-color: transparent;
  box-shadow: 0 20px 50px rgba(216, 57, 43, 0.28);
}
body.palette-mosaic .price-card.popular .plan-name,
body.palette-mosaic .price-card.popular .plan-price,
body.palette-mosaic .price-card.popular .plan-price .cur { color: #fff; }
body.palette-mosaic .price-card.popular .plan-for,
body.palette-mosaic .price-card.popular .plan-term { color: rgba(255, 255, 255, 0.85); }
body.palette-mosaic .price-card.popular .check-list li { color: rgba(255, 255, 255, 0.95); }
body.palette-mosaic .price-card.popular .check-list li::before { color: #fff; }
body.palette-mosaic .price-card.popular .btn-primary { background: #ffffff; color: var(--t-green); }
body.palette-mosaic .price-card.popular .btn-primary:hover { background: var(--ink); color: #fff; }
body.palette-mosaic .price-card.popular .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
body.palette-mosaic .price-card.popular .btn-ghost:hover { background: #ffffff; color: var(--t-green); border-color: #ffffff; }
body.palette-mosaic .popular-badge {
  background: #ffffff;
  color: var(--t-green);
  box-shadow: 0 5px 18px rgba(34, 37, 33, 0.18);
}

body.palette-mosaic .guarantee {
  background: #ffffff;
  border: 1px solid rgba(216, 57, 43, 0.28);
  border-radius: 20px;
}
body.palette-mosaic .guarantee-icon { color: var(--t-green); }
body.palette-mosaic .guarantee p strong { color: var(--ink); }

/* FAQ */
body.palette-mosaic .faq-item.open { border-color: var(--t-green); }
body.palette-mosaic .faq-q:hover { color: var(--t-green); }
body.palette-mosaic .faq-q .faq-icon { color: var(--t-green); border-color: var(--border); }
body.palette-mosaic .faq-item.open .faq-icon { background: var(--t-green); border-color: var(--t-green); color: #fff; }

/* Home pricing teaser — solid tiles, same cycle as the process steps. */
body.palette-mosaic .teaser-grid > .teaser-card {
  border: none;
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 14px 36px rgba(34, 37, 33, 0.12);
}
body.palette-mosaic .teaser-grid > .teaser-card:nth-child(4n+1) { background: var(--t-green); }
body.palette-mosaic .teaser-grid > .teaser-card:nth-child(4n+2) { background: var(--t-teal); }
body.palette-mosaic .teaser-grid > .teaser-card:nth-child(4n+3) { background: var(--t-orange); }
body.palette-mosaic .teaser-grid > .teaser-card:nth-child(4n+4) { background: var(--t-purple); }
body.palette-mosaic .teaser-grid > .teaser-card:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10));
  box-shadow: 0 24px 55px rgba(34, 37, 33, 0.20);
}
body.palette-mosaic .teaser-grid > .teaser-card h4 { color: #fff; }
body.palette-mosaic .teaser-grid > .teaser-card .plan-price { color: #fff; }
body.palette-mosaic .teaser-grid > .teaser-card .plan-price .cur { color: rgba(255, 255, 255, 0.8); }
body.palette-mosaic .teaser-grid > .teaser-card .plan-term { color: rgba(255, 255, 255, 0.85); }

/* =========================================================
   13. CONTACT PAGE
   ========================================================= */

body.palette-mosaic .info-icon {
  border-radius: 14px;
  color: #fff;
  background: var(--t-green);
  border-color: var(--t-green);
}
body.palette-mosaic .info-stack > .info-card:nth-child(3n+2) .info-icon { background: var(--t-teal);   border-color: var(--t-teal); }
body.palette-mosaic .info-stack > .info-card:nth-child(3n+3) .info-icon { background: var(--t-orange); border-color: var(--t-orange); }
body.palette-mosaic .info-card a:hover { color: var(--t-green); }