/* ============================================================================
 * Homepage — editorial split sections and their diagram visuals.
 *
 * Every section on the homepage that pairs a column of copy with a built
 * visual (search visibility, performance marketing, CRM automation, agentic
 * AI, web development, digital products) shares this shell. The visuals are
 * CSS + inline SVG only: no imagery, no invented statistics.
 *
 * Palette: navy structure, red emphasis, yellow accent. No purple.
 * ========================================================================== */

.wb-editorial {
  position: relative;
}

.wb-editorial__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .wb-editorial__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* Alternating rhythm — flips the media to the left without reordering DOM */
  .wb-editorial--reverse .wb-editorial__media { order: -1; }
}

.wb-editorial__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-3);
  margin: 0 0 var(--wb-space-4);
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-red-600);
}
.wb-editorial__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--wb-gradient-brand);
}
.wb-section--ink .wb-editorial__eyebrow { color: var(--wb-yellow-300); }

.wb-editorial__title {
  margin: 0 0 var(--wb-space-4);
  font-size: var(--wb-h2);
  font-weight: var(--wb-fw-bold);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--wb-color-ink);
  text-wrap: balance;
}
.wb-section--ink .wb-editorial__title { color: #fff; }

.wb-editorial__lead {
  margin: 0 0 var(--wb-space-6);
  max-width: 36rem;
  font-size: var(--wb-text-lg);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text-muted);
}
.wb-section--ink .wb-editorial__lead { color: rgba(255, 255, 255, 0.72); }

/* Checklist of sub-capabilities under the lead */
.wb-editorial__list {
  display: grid;
  gap: var(--wb-space-3);
  margin: 0 0 var(--wb-space-7);
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .wb-editorial__list--2col { grid-template-columns: 1fr 1fr; }
}
.wb-editorial__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--wb-space-3);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  color: var(--wb-color-text);
}
.wb-section--ink .wb-editorial__list li { color: rgba(255, 255, 255, 0.8); }
.wb-editorial__list li::before {
  content: "";
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.16rem;
  border-radius: 50%;
  background: var(--wb-gradient-brand);
  /* White tick punched out of the gradient disc — no extra markup needed */
  -webkit-mask:
    radial-gradient(circle, #000 99%, transparent 100%) exclude,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  -webkit-mask-composite: xor;
          mask:
    radial-gradient(circle, #000 99%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
          mask-composite: exclude;
}

/* ── Shared visual frame ────────────────────────────────────────────────── */

.wb-viz {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-2xl);
  box-shadow: var(--wb-shadow-lg);
}
.wb-section--ink .wb-viz {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.7);
}
.wb-viz::before {
  content: "";
  position: absolute;
  inset: auto 12% -1px 12%;
  height: 2px;
  border-radius: 2px;
  background: var(--wb-gradient-brand);
  opacity: 0.65;
}

.wb-viz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-4);
  margin-bottom: var(--wb-space-5);
  padding-bottom: var(--wb-space-4);
  border-bottom: var(--wb-border-width) solid var(--wb-color-border-soft);
}
.wb-section--ink .wb-viz__head { border-bottom-color: rgba(255, 255, 255, 0.1); }
.wb-viz__title {
  margin: 0;
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-color-text-muted);
}
.wb-section--ink .wb-viz__title { color: rgba(255, 255, 255, 0.6); }
.wb-viz__pill {
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--wb-radius-full);
  background: var(--wb-color-highlight);
  color: var(--wb-navy-900);
  border: 1px solid var(--wb-yellow-500);
}
.wb-section--ink .wb-viz__pill {
  background: rgba(251, 191, 19, 0.14);
  color: var(--wb-yellow-300);
  border-color: rgba(251, 191, 19, 0.3);
}

/* ── Viz A · Search & AI visibility surfaces ────────────────────────────── */

.wb-viz-surfaces {
  display: grid;
  gap: var(--wb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-viz-surface {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--wb-space-4);
  padding: var(--wb-space-4);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-color-bg-soft);
}
.wb-section--ink .wb-viz-surface {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.wb-viz-surface__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-brand-soft);
  color: var(--wb-color-brand);
}
.wb-section--ink .wb-viz-surface__icon {
  background: rgba(255, 255, 255, 0.09);
  color: var(--wb-navy-200);
}
.wb-viz-surface__icon svg { width: 1.05rem; height: 1.05rem; }
.wb-viz-surface__name {
  display: block;
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-semibold);
  color: var(--wb-color-ink);
}
.wb-section--ink .wb-viz-surface__name { color: #fff; }
.wb-viz-surface__name:focus-visible {
  outline: var(--wb-focus-width) solid var(--wb-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wb-radius-xs);
}
.wb-viz-surface__meta {
  display: block;
  font-size: var(--wb-text-xs);
  color: var(--wb-color-text-muted);
}
.wb-viz-surface__mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--wb-color-highlight);
  box-shadow: 0 0 0 4px var(--wb-color-highlight-soft);
}
.wb-section--ink .wb-viz-surface__mark { box-shadow: 0 0 0 4px rgba(251, 191, 19, 0.16); }

/* ── Viz B · Funnel / process flow (performance + CRM) ──────────────────── */

.wb-flow {
  display: grid;
  gap: var(--wb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wb-flow;
}
.wb-flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wb-space-4);
  padding: var(--wb-space-4) var(--wb-space-5);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-color-bg-soft);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  color: var(--wb-color-ink);
}
.wb-section--ink .wb-flow__step {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.wb-flow__step::before {
  counter-increment: wb-flow;
  content: counter(wb-flow, decimal-leading-zero);
  flex-shrink: 0;
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.05em;
  color: var(--wb-color-accent);
}
/* Connector between steps */
.wb-flow__step + .wb-flow__step::after {
  content: "";
  position: absolute;
  top: calc(var(--wb-space-3) * -1);
  left: 2.15rem;
  width: 2px;
  height: var(--wb-space-3);
  background: linear-gradient(var(--wb-color-border-strong), var(--wb-color-accent));
  opacity: 0.55;
}
.wb-section--ink .wb-flow__step + .wb-flow__step::after {
  background: linear-gradient(rgba(255, 255, 255, 0.2), var(--wb-color-accent));
}
/* The step that carries the outcome gets the yellow accent edge */
.wb-flow__step--end {
  border-color: var(--wb-yellow-300);
  background: var(--wb-color-highlight-soft);
}
.wb-section--ink .wb-flow__step--end {
  background: rgba(251, 191, 19, 0.1);
  border-color: rgba(251, 191, 19, 0.35);
}

/* ── Viz C · AI capability node grid ────────────────────────────────────── */

.wb-viz-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--wb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-viz-node {
  padding: var(--wb-space-4);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-color-bg-soft);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-semibold);
  color: var(--wb-color-ink);
  text-align: center;
}
.wb-section--ink .wb-viz-node {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.wb-viz-node span {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-regular);
  color: var(--wb-color-text-muted);
}
.wb-viz-node--lead {
  background: var(--wb-color-brand);
  border-color: var(--wb-color-brand);
  color: #fff;
}
.wb-viz-node--lead span { color: rgba(255, 255, 255, 0.72); }

/* ── Viz D · Device mockups (web development) ───────────────────────────── */

.wb-mockups {
  position: relative;
  display: grid;
  gap: var(--wb-space-4);
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  align-items: end;
}
.wb-mockup {
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-color-bg-soft);
  overflow: hidden;
}
.wb-section--ink .wb-mockup {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.wb-mockup__bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.75rem;
  border-bottom: var(--wb-border-width) solid var(--wb-color-border);
  background: var(--wb-color-bg-muted);
}
.wb-section--ink .wb-mockup__bar {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.wb-mockup__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--wb-color-border-strong);
}
.wb-mockup__dot:first-child { background: var(--wb-red-300); }
.wb-mockup__dot:nth-child(2) { background: var(--wb-yellow-300); }
.wb-mockup__body { padding: var(--wb-space-4); display: grid; gap: 0.55rem; }
.wb-mockup__line {
  height: 0.5rem;
  border-radius: var(--wb-radius-full);
  background: var(--wb-color-border);
}
.wb-section--ink .wb-mockup__line { background: rgba(255, 255, 255, 0.13); }
.wb-mockup__line--title {
  height: 0.85rem;
  width: 62%;
  background: var(--wb-color-brand);
}
.wb-mockup__line--accent { width: 34%; background: var(--wb-gradient-brand); }
.wb-mockup__line--short { width: 74%; }
.wb-mockup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.wb-mockup__tile {
  height: 2.6rem;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-border-soft);
  border: 1px solid var(--wb-color-border);
}
.wb-section--ink .wb-mockup__tile {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.wb-mockup--phone { border-radius: var(--wb-radius-xl); }
.wb-mockup--phone .wb-mockup__bar { justify-content: center; }
.wb-mockup--phone .wb-mockup__bar .wb-mockup__dot {
  width: 2.2rem;
  height: 0.3rem;
  border-radius: var(--wb-radius-full);
  background: var(--wb-color-border-strong);
}
.wb-mockup--phone .wb-mockup__dot:first-child,
.wb-mockup--phone .wb-mockup__dot:nth-child(2) { background: var(--wb-color-border-strong); }

@media (max-width: 560px) {
  .wb-mockups { grid-template-columns: 1fr; }
  .wb-mockup--phone { max-width: 12rem; }
}

/* ── Editorial CTA row ──────────────────────────────────────────────────── */

.wb-editorial__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-4);
}
@media (max-width: 480px) {
  .wb-editorial__actions .wb-btn { width: 100%; }
}