/* ==========================================================================
   Accent layer (loaded last). Salt & Pepper, monochrome.
   - White canvas, soft-grey (#F5F5F5) alternating sections, charcoal text.
   - No italic headings anywhere.
   - The "accent" is a quiet charcoal-to-graphite sheen (see tokens.css):
     one key word per heading, label bars, progress lines, the pricing badge,
     the comparison switch. On charcoal sections it flips to white → light grey.
   ========================================================================== */

/* ---- 0. Charcoal sections: flip the accents to light neutrals ----------- */
/* --grad itself must be redefined here: a custom property that uses var() is
   resolved where it is declared (:root), so changing only the stops would not
   reach it. */
[data-dark] {
  --grad-1: #FFFFFF;
  --grad-2: #EDEDED;
  --grad-3: #D4D4D4;
  --grad-4: #B3B3B3;
  --grad: linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 34%, var(--grad-3) 68%, var(--grad-4) 100%);
  --grad-v: linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 34%, var(--grad-3) 68%, var(--grad-4) 100%);
  --accent: #FFFFFF;
  --focus: #FFFFFF;
  --selection-bg: #FFFFFF;   /* on charcoal: white highlight, charcoal text */
  --selection-fg: #2B2B2B;
}

/* ---- 1. Headings: upright, sheen on the accent word --------------------- */
:where(h1, h2, h3, h4, .display, .h1, .h2, .cta__title, .page-hero__title) em,
.grad-text {
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  background-image: var(--grad);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hs-grad-shift 10s ease-in-out infinite alternate;
}
/* When the headline is split into word masks for the reveal animation, each
   word carries the gradient itself (transformed children don't inherit a
   parent's clipped background reliably). */
:where(h1, h2, h3, h4, .display, .h1, .h2, .cta__title, .page-hero__title) em .split-wi {
  background-image: var(--grad);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hs-grad-shift 10s ease-in-out infinite alternate;
}
:where(h1, h2, h3, h4, .display, .h1, .h2, .cta__title, .page-hero__title) em:has(.split-wi) {
  background-image: none;
  animation: none;
}
@keyframes hs-grad-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* No italic headings anywhere. Real selectors (not :where) so they beat the
   original design's ".display em / .h2 em { font-style: italic }". */
h1 em, h2 em, h3 em, h4 em, .display em, .h1 em, .h2 em, .cta__title em, .page-hero__title em,
.display em .split-wi, .h2 em .split-wi, .cta__title em .split-wi, .page-hero__title em .split-wi { font-style: normal; }

/* Former italic spots */
.display em, .h2 em, .page-hero__title em, .cta__title em { font-weight: inherit; letter-spacing: inherit; }
.case__tagline { font-style: normal; font-weight: 500; letter-spacing: -0.015em; }
.notfound__code span { font-style: normal; background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
h1, h2, h3, h4, .display, .h1, .h2 { font-style: normal; }

/* The hero squiggle uses an SVG gradient built from --grad-* (see hero.php) */
.hero__title .squiggle { color: var(--color-gray-medium); }

/* ---- 2. Section labels: muted text + a short charcoal bar --------------- */
.label { display: inline-flex; align-items: center; gap: 10px; }
.label::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background-image: var(--grad);
}
.section-head--center .label, .page-hero--center .label { justify-content: center; }

/* ---- 3. Surfaces: white sections alternate with whisper-grey ones ------- */
#why, #services, #process, #proof, #insights, .skills {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}
.trust, .findings, .work, .compare, .pricing, .faq, .projects, .blog { background: var(--bg); }

/* Faint neutral aura instead of colour washes */
.wash__blob,
.wash__blob--pink, .wash__blob--orange, .wash__blob--sky { opacity: var(--wash-opacity) !important; }
.wash--dark .wash__blob, .wash--dark .wash__blob--pink { opacity: 0.10 !important; }
.wash::after { opacity: 0.12; }
.wash--hero-lite { opacity: 1; }


/* ---- 4. Small highlights ------------------------------------------------ */
.scroll-progress span { background-image: var(--grad); }
.timeline__line span { background-image: var(--grad-v); }
.chip__pulse, .chip__pulse::after { background-image: none; background-color: var(--accent); }
.counter__suf {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nav-links a[aria-current="page"]::after,
.nav-links a[aria-current="true"]::after { background-image: none; background-color: var(--accent); }
.cmp[data-side="ht"] .cmp__knob, .cmp__opt[aria-pressed="true"] { background: var(--ink); }
.cmp__mark .tick { background: var(--ink); }
.plan__badge { background: var(--ink); color: var(--on-ink); }
.plan--featured .plan__badge { background: var(--on-ink); color: var(--ink); }
.plan__list li::before { background-color: var(--ink); }
.plan--featured .plan__list li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%232B2B2B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat, var(--on-ink); }
.why__label--help::before { background-image: var(--grad); }
.step.is-active .step__dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.toc__box a.is-active { border-left-color: var(--ink); }
.carousel__dots button[aria-current="true"]::before { background-image: none; background-color: var(--ink); }

/* ---- 5. Cards: white, hairline grey border, soft natural lift ---------- */
.flip__face, .work-card, .step__card, .cmp, .plan:not(.plan--featured), .pcard__link,
.bcard, .tool__card, .tcard, .faq__chat, .case__box, .author-box, .skills__group { box-shadow: var(--shadow-card); }
.tool__card:hover, .tool__card:focus-visible,
.pcard__link:hover, .bcard:hover { box-shadow: var(--shadow-lift); border-color: var(--color-gray-medium); }

/* ---- 6. Focus rings ------------------------------------------------------ */
:focus-visible { outline-color: var(--focus); }
.qa__q:focus-visible span { outline-color: var(--focus); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.search__input:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(43, 43, 43, 0.16); }
[data-dark] :focus-visible { outline-color: #FFFFFF; }
[data-dark] .field input:focus-visible, [data-dark] .field select:focus-visible, [data-dark] .field textarea:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }

/* ---- Reduced motion: sheen stays, the shift stops ------------------------ */
@media (prefers-reduced-motion: reduce) {
  :where(h1, h2, h3, h4, .display, .h1, .h2, .cta__title, .page-hero__title) em,
  :where(h1, h2, h3, h4, .display, .h1, .h2, .cta__title, .page-hero__title) em .split-wi,
  .grad-text { animation: none; }
}