/* ============================================================
   Diligent - SERVICE PAGE template styles
   Layers ON TOP of /home-v2/styles.css (the shared frame).
   Only NEW modules live here (M1-M9, F4, F5) + the 3 signature
   visual variants. Tokens, nav, footer, buttons, reveal, .num,
   .band, .wedge, .final, .steps, .scope-pill, .case, .badge-chip
   are all inherited from styles.css - do NOT redefine them.
   ============================================================ */

/* ---- service hero: copy-led, signature data block on the right ---- */
.svc-hero { padding: 40px 0 64px; }
.svc-hero .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.svc-hero .breadcrumb { font-family: var(--display); font-size: 12px; letter-spacing: .03em; color: var(--muted-2); display: flex; gap: 8px; align-items: center; margin-bottom: 20px; font-weight: 500; }
.svc-hero .breadcrumb a { color: var(--muted-2); }
.svc-hero .breadcrumb a:hover { color: var(--coral-deep); }
.svc-hero .breadcrumb .sep { opacity: .5; }
.svc-hero h1 { font-size: clamp(2.1rem, 4vw, 3.25rem); letter-spacing: -0.03em; }
.svc-hero h1 .hl { color: var(--coral-deep); }
.svc-hero .sub { font-size: 1.17rem; color: var(--muted); margin-top: 22px; line-height: 1.62; max-width: 54ch; }
.svc-hero .hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.svc-hero .badges { margin-top: 36px; }

/* signature "reconciliation" block - GA4 vs source-of-truth match.
   Reuses the warm block + floating mono cards language from the homepage hero. */
.recon-stage { position: relative; min-height: 460px; }
.recon-block { position: absolute; inset: 6% 4% 6% 6%; border-radius: var(--radius-lg);
  background: radial-gradient(120% 120% at 80% 8%, var(--amber) 0%, var(--coral) 46%, var(--coral-deep) 100%);
  box-shadow: var(--shadow-lg); overflow: hidden; }
.recon-block::after { content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 18% 100%, rgba(21,32,59,.32), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; }
.recon-block .ring { position:absolute; border:1.5px solid rgba(255,255,255,.22); border-radius:50%; }
.recon-block .ring.r1 { width:300px; height:300px; top:-80px; right:-70px; }
.recon-block .ring.r2 { width:170px; height:170px; bottom:24px; left:-50px; }

.recon-card { position: absolute; z-index: 4; left: 7%; top: 12%; width: min(330px, 74%);
  background: var(--bone-card); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.6); }
.recon-card .rc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.recon-card .rc-title { font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-2); }
.recon-card .rc-ok { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:#1f8a5b; }
.recon-card .rc-ok .pulse { width:7px; height:7px; border-radius:50%; background:#22a76a; position:relative; }
.recon-card .rc-ok .pulse::after { content:""; position:absolute; inset:0; border-radius:50%; background:#22a76a; animation:pulse 1.8s ease-out infinite; }
.recon-row { display:flex; align-items:center; justify-content:space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.recon-row:last-child { border-bottom: none; }
.recon-row .rk { font-size: .92rem; color: var(--muted); display:flex; align-items:center; gap:9px; }
.recon-row .rk .src { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.recon-row .rk .src.ga { background: var(--coral); }
.recon-row .rk .src.shop { background: var(--ink); }
.recon-row .rk .src.match { background:#22a76a; }
.recon-row .rv { font-family: var(--mono); font-weight: 600; color: var(--ink); font-size: 1.02rem; letter-spacing:-.02em; }
.recon-row.is-match .rv { color:#1f8a5b; }
.recon-foot { font-family: var(--mono); font-size: 10.5px; color: var(--coral-deep); margin-top: 14px; letter-spacing:.02em; }

.recon-mini { position:absolute; z-index:5; right:4%; bottom:9%; background: var(--ink); color:var(--on-dark);
  border-radius: 14px; padding: 15px 17px; box-shadow: var(--shadow-lg); width: 172px; }
.recon-mini .ml { color: var(--on-dark-mut); font-family: var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.recon-mini .mv { font-family: var(--mono); font-size: 1.7rem; font-weight:600; letter-spacing:-.03em; margin-top:4px; }
.recon-mini .mv small { color: var(--amber); font-size:.85rem; }

/* ---- intro framing ---- */
.intro-framing { padding: 8px 0 64px; }
.intro-framing .wrap { max-width: 920px; }
.intro-framing .lede { font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; }
.intro-framing .lede .hl { color: var(--coral-deep); }
.intro-framing .lede-sub { color: var(--muted); font-size: 1.12rem; line-height: 1.62; margin-top: 20px; max-width: 64ch; }

/* ============================================================
   M1 - METHOD GRID (what we set up / key GA areas)
   ============================================================ */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.method-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.method-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.method-card .mi { width: 46px; height: 46px; border-radius: 12px; background: var(--ink); color: var(--amber);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em;
  font-optical-sizing: auto; margin-bottom: 18px; }
.method-card:nth-child(1) .mi { background: var(--coral); color: var(--ink); }
.method-card .mtag { font-family: var(--display); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--muted-2); margin-bottom: 7px; }
.method-card h3 { font-size: 1.18rem; line-height: 1.15; }
.method-card p { margin-top: 10px; color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ============================================================
   M2 - SIGNATURE EVENT-FLOW DIAGRAM (3 variants via [data-viz])
   dataLayer -> GTM -> GA4 -> ad platforms
   ============================================================ */
.eventflow { position: relative; margin-top: 8px; }
.ef-track { display: flex; align-items: stretch; gap: 0; }
.ef-node { flex: 1 1 0; min-width: 0; position: relative; background: var(--bone-card);
  border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22,.7,.3,1), transform .55s cubic-bezier(.22,.7,.3,1); }
.eventflow.play .ef-node { opacity: 1; transform: none; }
.eventflow.play .ef-node[data-stage="2"] { transition-delay: .12s; }
.eventflow.play .ef-node[data-stage="3"] { transition-delay: .24s; }
.eventflow.play .ef-node[data-stage="4"] { transition-delay: .36s; }
.ef-node .ef-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: var(--amber);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1rem; letter-spacing: -0.02em;
  font-optical-sizing: auto; margin-bottom: 10px; }
.ef-node .ef-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ef-node[data-stage="3"] .ef-ic { background: var(--coral); color: var(--ink); }
.ef-node .ef-stagelab { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deep); }
.ef-node .ef-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.12rem; letter-spacing: -.01em; }
.ef-node .ef-desc { color: var(--muted); font-size: .86rem; line-height: 1.45; margin-top: 4px; }
.ef-node .ef-annot { display: none; }

/* fan-out chips on the last node */
.ef-fan .ef-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ef-chips .chip { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 100px;
  background: var(--bone-2); border: 1px solid var(--line); color: var(--ink); }

/* connector between nodes */
.ef-link { flex: 0 0 56px; align-self: center; position: relative; height: 3px; margin: 0 -2px; }
.ef-link::before { content: ""; position: absolute; inset: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--line), var(--coral) 50%, var(--line)); opacity: .55; }
.ef-link .pkt { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral-deep); transform: translate(-2px, -50%) scale(0); box-shadow: 0 0 0 3px rgba(236,106,76,.18); }
.eventflow.play .ef-link .pkt { animation: pktflow 1.5s cubic-bezier(.5,0,.5,1) .3s infinite; }
.ef-link:nth-of-type(4) .pkt { animation-delay: .55s !important; }
.ef-link:nth-of-type(6) .pkt { animation-delay: .8s !important; }
@keyframes pktflow {
  0% { transform: translate(-2px,-50%) scale(0); opacity: 0; }
  12% { transform: translate(-2px,-50%) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(calc(100% - 2px),-50%) scale(1); opacity: 0; }
}
.ef-caption { font-family: var(--mono); font-size: 12px; color: var(--muted-2); margin-top: 26px;
  text-align: center; letter-spacing: .02em; }
.ef-caption b { color: var(--coral-deep); font-weight: 500; }

/* --- variant B: SCHEMATIC (technical blueprint) --- */
.eventflow[data-viz="schematic"] { padding: 30px 26px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background:
    linear-gradient(var(--bone-2) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, var(--bone-2) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--bone-card); background-blend-mode: multiply; }
.eventflow[data-viz="schematic"] .ef-node { background: var(--paper); border: 1.5px dashed var(--muted-2);
  box-shadow: none; border-radius: 10px; }
.eventflow[data-viz="schematic"] .ef-node .ef-ic { display: none; }
.eventflow[data-viz="schematic"] .ef-node .ef-name { font-family: var(--mono); font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.eventflow[data-viz="schematic"] .ef-node .ef-stagelab { color: var(--muted-2); }
.eventflow[data-viz="schematic"] .ef-node .ef-annot { display: block; font-family: var(--mono); font-size: 10px;
  color: var(--coral-deep); margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); letter-spacing: .01em; }
.eventflow[data-viz="schematic"] .ef-node::before,
.eventflow[data-viz="schematic"] .ef-node::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--paper); border: 1.5px solid var(--muted-2); transform: translateY(-50%); }
.eventflow[data-viz="schematic"] .ef-node::before { left: -4px; }
.eventflow[data-viz="schematic"] .ef-node::after { right: -4px; }
.eventflow[data-viz="schematic"] .ef-node[data-stage="1"]::before { display: none; }
.eventflow[data-viz="schematic"] .ef-node[data-stage="4"]::after { display: none; }
.eventflow[data-viz="schematic"] .ef-link::before { background: none; border-top: 1.5px dashed var(--muted-2); opacity: .85; border-radius: 0; height: 0; top: 50%; }
.eventflow[data-viz="schematic"] .ef-chips .chip { background: var(--paper); border-style: dashed; }

/* --- variant C: LANES (vertical tiers Collect / Process / Activate) --- */
.eventflow[data-viz="lanes"] .ef-track { flex-direction: column; gap: 0; max-width: 560px; margin: 0 auto; }
.eventflow[data-viz="lanes"] .ef-node { width: 100%; flex: none; flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; }
.eventflow[data-viz="lanes"] .ef-node .ef-ic { margin-bottom: 0; flex-shrink: 0; }
.eventflow[data-viz="lanes"] .ef-node .ef-body { display: flex; flex-direction: column; }
.eventflow[data-viz="lanes"] .ef-node .ef-tier { position: absolute; top: 14px; right: 18px; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.eventflow[data-viz="lanes"] .ef-link { flex: 0 0 30px; width: 3px; height: 30px; align-self: center; margin: -2px 0; }
.eventflow[data-viz="lanes"] .ef-link::before { background: linear-gradient(180deg, var(--line), var(--coral) 50%, var(--line)); opacity: .55; }
.eventflow[data-viz="lanes"] .ef-link .pkt { top: 0; left: 50%; transform: translate(-50%, -2px) scale(0); }
.eventflow[data-viz="lanes"].play .ef-link .pkt { animation: pktflow-v 1.5s cubic-bezier(.5,0,.5,1) .3s infinite; }
@keyframes pktflow-v {
  0% { transform: translate(-50%,-2px) scale(0); opacity: 0; }
  12% { transform: translate(-50%,-2px) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%, calc(100% - 2px)) scale(1); opacity: 0; }
}
.eventflow[data-viz="lanes"] .ef-fan .ef-chips { margin-top: 0; }
/* hide the per-node ef-body wrapper niceties when not lanes */
.eventflow:not([data-viz="lanes"]) .ef-tier { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ef-node { opacity: 1; transform: none; transition: none; }
  .ef-link .pkt { animation: none !important; opacity: 0; }
}

/* ---- Failsafe: snap reveal content visible with NO transition ----
   CSS transitions do not progress in throttled / backgrounded iframes, so a
   .reveal that received .in can stay stuck at opacity:0. service.js adds
   html.reveal-all once the page has settled; these rules force the visible
   end-state transition-free, so the page is never blank in any context. */
html.reveal-all .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reveal-all .ef-node { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   V3 FIX #1 - reveal VISIBLE by default; JS opts into the entrance
   (same inversion as v2: styles.css ships opacity:0; we flip it so
   the page is never blank without JS, and html.js-reveal - set by an
   inline head script - turns the animate-in back on).
   ============================================================ */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal { opacity: 0; transform: translateY(22px); }
html.js-reveal .reveal.in { opacity: 1; transform: none; }
.ef-node { opacity: 1; transform: none; }
html.js-reveal .eventflow .ef-node { opacity: 0; transform: translateY(16px); }
html.js-reveal .eventflow.play .ef-node { opacity: 1; transform: none; }

/* ============================================================
   V3 FIX #5 - hero signature block: inset every floating card by a
   consistent gap so none bleeds to the orange edge. Cards now live
   INSIDE .recon-block and are offset an even 24px from its edges.
   ============================================================ */
.recon-block > .recon-card { left: 24px; top: 28px; right: auto; width: min(330px, calc(100% - 48px)); }
.recon-block > .recon-mini { right: 24px; bottom: 24px; left: auto; }

/* ============================================================
   V3 FIX #3 - M3 PROCESS as a HORIZONTAL STEPPED TIMELINE
   Desktop: 7 steps left-to-right on one connecting line.
   Tablet: wraps to rows of 4, still strictly left-to-right.
   Mobile: stacks vertically with the line on the left.
   One-shot reveal (transform/opacity) driven by #htimeline.play.
   ============================================================ */
.htl { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 16px; margin-top: 6px; }
.htl-step { position: relative; padding-top: 62px; }
.htl-top { position: absolute; top: 0; left: 0; }
.htl-num { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 13px;
  background: var(--bone-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; font-weight: 600; color: var(--coral-deep); font-size: 1.05rem; letter-spacing: -.02em; }
/* connector: from this node's centre to the next node's centre (step width + gap) */
.htl-step::after { content: ""; position: absolute; top: 23px; left: 23px; width: calc(100% + 16px); height: 2px;
  background: linear-gradient(90deg, var(--coral), var(--coral) 70%, var(--line)); opacity: .6;
  transform-origin: left center; }
.htl-step:last-child::after { display: none; }
.htl-step h3 { font-size: 1.06rem; line-height: 1.16; }
.htl-step p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 8px; }

/* reveal: steps + connectors animate in once, staggered by --i */
html.js-reveal .htl-step { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.js-reveal #htimeline.play .htl-step { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); }
html.js-reveal .htl-step::after { transform: scaleX(0); transition: transform .45s ease; }
html.js-reveal #htimeline.play .htl-step::after { transform: scaleX(1); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }

@media (max-width: 1079px) and (min-width: 760px) {
  /* .htl-6 included so the 6-step variant also reflows (its base rule outranks .htl) */
  .htl, .htl.htl-6 { grid-template-columns: repeat(4, 1fr); gap: 44px 16px; }
  .htl-step:nth-child(4n)::after { display: none; } /* row end - no line jumping to next row */
  .htl-step:last-child::after { display: none; }
}
@media (max-width: 759px) {
  .htl, .htl.htl-6 { grid-template-columns: 1fr; gap: 0; }
  .htl-step { padding: 0 0 26px 64px; }
  .htl-step:last-child { padding-bottom: 0; }
  .htl-top { top: 0; left: 0; }
  .htl-step::after { top: 46px; left: 23px; width: 2px; height: calc(100% - 46px);
    background: linear-gradient(180deg, var(--coral), var(--coral) 70%, var(--line)); transform-origin: top center; }
  .htl-step:last-child::after { display: none; }
  html.js-reveal .htl-step::after { transform: scaleY(0); }
  html.js-reveal #htimeline.play .htl-step::after { transform: scaleY(1); }
}

/* reveal-all failsafe also clears the timeline (orientation-agnostic).
   transition:none is essential - CSS transitions do not advance in throttled /
   backgrounded iframes, so without it a step that got opacity:1 stays stuck at
   its 0 start value. Snapping transition-free guarantees it shows. */
html.reveal-all #htimeline .htl-step,
html.reveal-all #htimeline .htl-step::after { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Tweak: disable the data-flow packet animation */
html.flow-static .ef-link .pkt { animation: none !important; opacity: 0; }

/* ============================================================
   M5 - DIMENSION LISTS (what to track / analyze)
   ============================================================ */
.dimensions { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: 48px 52px; position: relative; overflow: hidden; }
.dimensions::before { content:""; position:absolute; top:-30%; left:-8%; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(236,106,76,.22), transparent 65%); pointer-events:none; }
.dimensions .dim-head { position: relative; max-width: 640px; margin-bottom: 34px; }
.dimensions h2 { color: var(--on-dark); font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.dimensions .dim-head p { color: var(--on-dark-mut); margin-top: 14px; font-size: 1.04rem; }
.dim-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 36px; }
.dim-cols li { list-style: none; display: flex; align-items: flex-start; gap: 11px; padding: 9px 0;
  border-bottom: 1px solid var(--line-ink); color: var(--on-dark); font-size: .98rem; }
.dim-cols li .tick { color: var(--amber); flex-shrink: 0; font-family: var(--mono); font-size: .85rem; margin-top: 2px; }

/* ============================================================
   M6 - AUDIENCE SPLIT (Lead-Gen vs Ecommerce)
   ============================================================ */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; display: flex; flex-direction: column; }
.split-card .sc-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral-deep); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.split-card .sc-tag::before { content:""; width: 18px; height: 1.5px; background: var(--coral); }
.split-card h3 { font-size: 1.5rem; }
.split-card .sc-intro { color: var(--muted); margin-top: 10px; font-size: 1rem; }
.split-card ul { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.split-card li { list-style: none; display: flex; align-items: flex-start; gap: 11px; color: var(--text); font-size: .97rem; line-height: 1.45; }
.split-card li .tick { color: var(--coral-deep); flex-shrink: 0; font-family: var(--mono); margin-top: 1px; }
.split-card .sc-foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--ink); font-size: .97rem; line-height: 1.5; }
.split-card .sc-foot b { color: var(--coral-deep); }

/* ============================================================
   M3 - PROCESS STEPS (numbered timeline, 7 steps)
   ============================================================ */
.process { position: relative; }
.proc-step { display: grid; grid-template-columns: 96px 1fr; gap: 26px; padding: 0 0 30px; position: relative; }
.proc-step:last-child { padding-bottom: 0; }
.proc-rail { position: relative; display: flex; justify-content: center; }
.proc-num { width: 64px; height: 64px; border-radius: 16px; background: var(--bone-card); border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 1.3rem; color: var(--coral-deep);
  letter-spacing: -.03em; box-shadow: var(--shadow-sm); z-index: 1; }
.proc-step:not(:last-child) .proc-rail::after { content: ""; position: absolute; top: 64px; bottom: -30px; left: 50%;
  width: 2px; transform: translateX(-50%); background: linear-gradient(var(--line), var(--line) 60%, transparent); }
.proc-body { padding-top: 6px; }
.proc-body h3 { font-size: 1.28rem; }
.proc-body p { color: var(--muted); margin-top: 9px; font-size: .98rem; line-height: 1.6; max-width: 64ch; }

/* ============================================================
   M4 - DIFFERENTIATOR CHECKLIST
   ============================================================ */
.checklist { columns: 3; column-gap: 26px; }
.checklist li { list-style: none; break-inside: avoid; display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: .98rem; line-height: 1.4; }
.checklist li .tick { width: 20px; height: 20px; border-radius: 6px; background: var(--coral); color: var(--ink);
  display: grid; place-items: center; font-size: 11px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   M8 - PLATFORM / TOOLS STRIP
   ============================================================ */
.platforms-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.plat-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--bone-card);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 20px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.plat-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--coral); }
.plat-chip .pc-mk { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--on-dark);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.plat-chip .pc-name { font-weight: 600; color: var(--ink); font-size: .95rem; }
.plat-chip .pc-name small { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted-2); font-weight: 400; letter-spacing: .02em; }

/* ============================================================
   M9 - CROSS-SELL / RELATED SERVICES
   ============================================================ */
.xsell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.xsell-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.xsell-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.xsell-card .xs-eye { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.xsell-card h3 { font-size: 1.24rem; margin-top: 8px; }
.xsell-card p { color: var(--muted); font-size: .95rem; margin-top: 10px; flex: 1; line-height: 1.55; }
.xsell-card .qlink { margin-top: 20px; font-size: .95rem; }

/* ============================================================
   F4 - TRUST (who you work with + reporting/communication)
   ============================================================ */
.trust-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: stretch; }
.trust-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px; }
.trust-card .tc-eye { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-deep); display: inline-flex; align-items: center; gap: 9px; }
.trust-card .tc-eye::before { content:""; width: 18px; height: 1.5px; background: var(--coral); }
.trust-card h3 { font-size: 1.5rem; margin-top: 14px; }
.trust-card > p { color: var(--muted); margin-top: 12px; font-size: 1.02rem; line-height: 1.6; }
.team-roster { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.roster-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 13px; }
.roster-row .av { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: var(--on-dark); font-size: .95rem; flex-shrink: 0; }
.roster-row .av.a1 { background: #5ba17a; } .roster-row .av.a2 { background: var(--ink-3); }
.roster-row .av.a3 { background: #5b6cc4; } .roster-row .av.a4 { background: #b08a3e; } .roster-row .av.a5 { background: #c45b9a; }
.roster-row .rn { font-weight: 700; color: var(--ink); font-size: .98rem; }
.roster-row .rr { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--coral-deep); text-transform: uppercase; margin-top: 2px; }
.report-cadence { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.cadence-row { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; }
.cadence-row .cr-tag { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  background: var(--bone-2); border-radius: 8px; padding: 6px 11px; flex-shrink: 0; min-width: 76px; text-align: center; }
.cadence-row .cr-txt { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.cadence-row .cr-txt b { color: var(--ink); font-weight: 600; }

/* ============================================================
   F5 - FAQ (accordion, emits FAQPage schema in HTML)
   ============================================================ */
.faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 18px; text-align: left; padding: 24px 4px;
  font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.16rem; letter-spacing: -.01em; line-height: 1.3; }
.faq-q .qmark { font-family: var(--mono); font-size: .8rem; color: var(--coral-deep); font-weight: 500; flex-shrink: 0; width: 26px; }
.faq-q .qtxt { flex: 1; }
.faq-q .qchev { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--coral-deep); transition: transform .3s ease, background .2s ease, border-color .2s; font-size: 14px; }
.faq-q:hover .qchev { border-color: var(--coral); }
.faq-item.open .qchev { transform: rotate(45deg); background: var(--coral); border-color: transparent; color: var(--ink); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a .faq-a-inner { padding: 0 4px 26px 48px; color: var(--muted); font-size: 1.02rem; line-height: 1.62; max-width: 70ch; }
.faq-a .faq-a-inner .num { color: var(--coral-deep); }

/* ============================================================
   F3 - SCOPE & PACE (engagement model cards, MOST POPULAR flag)
   ============================================================ */
.scope-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.scope-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 30px; display: flex; flex-direction: column; position: relative; }
.scope-card.popular { border: 2px solid var(--coral); box-shadow: var(--shadow-md); }
.scope-card .ribbon { position: absolute; top: -13px; left: 30px; white-space: nowrap; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink);
  background: var(--coral); border-radius: 100px; padding: 6px 14px; box-shadow: var(--shadow-sm); }
.scope-card .sc-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--ink); color: var(--amber);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em;
  font-optical-sizing: auto; margin-bottom: 18px; }
.scope-card.popular .sc-ico { background: var(--coral); color: var(--ink); }
.scope-card .sc-kind { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.scope-card h3 { font-size: 1.3rem; margin-top: 6px; line-height: 1.15; }
.scope-card p { color: var(--muted); margin-top: 12px; font-size: .96rem; line-height: 1.55; flex: 1; }
.scope-card .sc-meta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink); }

/* ============================================================
   Section header centering helper + responsive
   ============================================================ */
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }

@media (max-width: 980px) {
  .svc-hero .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .recon-stage { min-height: 400px; margin-top: 8px; }
  .method-grid, .xsell, .scope-cards { grid-template-columns: 1fr 1fr; }
  .dim-cols { grid-template-columns: 1fr 1fr; }
  .split-2 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .checklist { columns: 2; }
  .ef-track { flex-wrap: wrap; }
  .eventflow:not([data-viz="lanes"]) .ef-track { flex-direction: column; }
  .eventflow:not([data-viz="lanes"]) .ef-node { width: 100%; }
  .eventflow:not([data-viz="lanes"]) .ef-link { flex: 0 0 28px; width: 3px; height: 28px; margin: -2px 0; }
  .eventflow:not([data-viz="lanes"]) .ef-link::before { background: linear-gradient(180deg, var(--line), var(--coral) 50%, var(--line)); }
  .eventflow[data-viz="schematic"] .ef-node::before, .eventflow[data-viz="schematic"] .ef-node::after { display: none; }
}
@media (max-width: 640px) {
  .method-grid, .xsell, .scope-cards { grid-template-columns: 1fr; }
  .dim-cols { grid-template-columns: 1fr; }
  .checklist { columns: 1; }
  .dimensions, .trust-card { padding: 30px 24px; }
  .proc-step { grid-template-columns: 64px 1fr; gap: 18px; }
  .proc-num { width: 52px; height: 52px; font-size: 1.1rem; }
  /* On short mobile viewports the absolutely-positioned mini badge rode up and
     overlapped the card's foot text. Switch the orange block to normal flow so the
     white card sizes to its content, then float the badge into a reserved gap below
     it - keeping the layered "card + floating stat" look without covering anything. */
  .recon-stage { min-height: 0; margin-top: 8px; }
  .recon-block { position: relative; inset: auto; margin: 0 auto; max-width: 460px; padding: 22px; }
  .recon-block > .recon-card { position: relative; left: auto; top: auto; right: auto;
    width: 100%; margin-bottom: 56px; }
  .recon-block > .recon-mini { right: 22px; bottom: 22px; left: auto; top: auto; width: 156px; }
}

/* ============================================================
   V3 FIX #2 - equalize the two split cards' footer baseline.
   The intro paragraph + list have unequal lengths between the
   Ecommerce and Lead-gen cards, so the "With these analyses..."
   foot lines sat at different heights. Letting the <ul> grow to
   fill the card pins .sc-foot to the bottom, so both feet align.
   ============================================================ */
/* Share the row track across both cards via subgrid: tag / h3 / intro / list(1fr) /
   foot. The list row is one shared height for both cards, so the foot lands on the
   same row line in each - the "With these analyses..." baselines align regardless of
   how the bullet lists wrap. Content-agnostic, so it holds for every future page. */
@supports (grid-template-rows: subgrid) {
  .split-2 { grid-template-rows: auto auto auto 1fr auto; }
  .split-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
  .split-card ul { margin-top: 16px; }
  .split-card .sc-foot { margin-top: 0; }
}
/* fallback for engines without subgrid: equal-height cards, foot pinned to bottom */
@supports not (grid-template-rows: subgrid) {
  .split-card ul { flex: 1 1 auto; }
}

/* ============================================================
   PPC MODULES (added prompt 3) - reusable, selected by page data.
     1) M2b ACCOUNT-STRUCTURE FUNNEL signature visual (PPC counterpart
        to the analytics event-flow). A page picks its signature by
        providing `funnel` (this) or `eventflow` in its data.
     2) proof metric PLACEHOLDER treatment (.is-ph) - marked stats
        Igor fills with real numbers.
   Reuses id="eventflow" so service.js adds .play on scroll (no new JS).
   ============================================================ */
.acctflow { margin-top: 8px; }
.acct-track { display: grid; grid-template-columns: 1.16fr auto 1fr auto .86fr; align-items: stretch; }
.acct-stage { background: var(--bone-card); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-width: 0; }
.acct-stage[data-stage="3"] { border: 1.5px solid var(--coral); box-shadow: var(--shadow-md); }
.as-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line); }
.as-step { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.as-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.08; }
.as-job { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--coral-deep); margin-top: 3px; }
.as-tiers { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.as-tier { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px;
  background: var(--paper); border: 1px solid var(--line); font-size: .91rem; color: var(--text); line-height: 1.3; }
.as-tier .tk { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--ink);
  background: var(--bone-2); border-radius: 6px; padding: 4px 7px; flex-shrink: 0; }
.acct-stage[data-stage="3"] .as-tier .tk { background: var(--coral); color: var(--ink); }
.as-note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted);
  font-size: .85rem; line-height: 1.5; }
.acct-link { display: grid; place-items: center; width: 46px; align-self: center; color: var(--coral-deep); font-size: 21px; }

/* tapering wedge rail = the funnel, full width under the three stages */
.acct-rail { height: 12px; margin: 22px 0 0; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--coral) 20%, var(--bone-2)), var(--coral) 62%, var(--coral-deep));
  clip-path: polygon(0 0, 100% 28%, 100% 72%, 0 100%); }

/* reveal: stages cascade in once, staggered; reuses #eventflow.play */
html.js-reveal #eventflow .acct-stage { opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22,.7,.3,1), transform .55s cubic-bezier(.22,.7,.3,1); }
html.js-reveal #eventflow.play .acct-stage { opacity: 1; transform: none; }
html.js-reveal #eventflow.play .acct-stage[data-stage="2"] { transition-delay: .12s; }
html.js-reveal #eventflow.play .acct-stage[data-stage="3"] { transition-delay: .24s; }
html.js-reveal #eventflow .acct-link, html.js-reveal #eventflow .acct-rail { opacity: 0; transition: opacity .5s ease; }
html.js-reveal #eventflow.play .acct-link { opacity: 1; transition-delay: .18s; }
html.js-reveal #eventflow.play .acct-rail { opacity: 1; transition-delay: .42s; }
/* throttled-iframe failsafe (same contract as the rest of the template) */
html.reveal-all #eventflow .acct-stage,
html.reveal-all #eventflow .acct-link,
html.reveal-all #eventflow .acct-rail { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 860px) {
  .acct-track { grid-template-columns: 1fr; gap: 14px; }
  /* Stacked vertically, the inter-stage arrows add nothing, so hide them on mobile. */
  .acct-link { display: none; }
  .acct-rail { display: none; }
}

/* ---- proof metric PLACEHOLDER (Igor fills these in) ---- */
.case .cm .v.is-ph { font-size: 1.45rem; color: var(--amber); letter-spacing: 0;
  border-bottom: 1.5px dashed rgba(244,162,60,.55); padding-bottom: 3px; display: inline-block; }

/* ============================================================
   F8 PROOF BAR + F9 TRANSPARENCY (added prompt 4) - ONE shared
   markup/classes for BOTH analytics and PPC pages (the v-next
   mocks had diverged; unified here). Selected by page data
   (`proofbar` / `transparency`). No new JS (uses .reveal + .num).
   ============================================================ */

/* ---- F8: proof bar (client logo strip + 3 real stats) ---- */
.proofbar { padding: 30px 0 40px; border-bottom: 1px solid var(--line); }
.proofbar .pb-eye { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); text-align: center; margin-bottom: 22px; }
/* logo row: centered + wrap (NEVER space-between, so a wrapped row is never orphan-left).
   Logos scale down so all 5 stay on one row to ~640px; below that they wrap centered/balanced. */
.pb-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px clamp(16px, 3.2vw, 42px); }
.pb-logo-cell { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; }
/* width scales with viewport so all 5 logos stay on ONE centered row at any width
   (5 * 16vw + gaps < 100vw), so a tight screen never orphans a lone logo on row 2. */
.pb-logo-cell img { max-height: var(--lh, 30px); width: auto; max-width: min(var(--lw, 150px), 18vw); object-fit: contain;
  opacity: .6; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.pb-logo-cell img:hover { opacity: 1; filter: grayscale(0); transform: scale(1.06); }
.pb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px;
  max-width: 920px; margin-left: auto; margin-right: auto; }
.pb-stat { text-align: center; padding: 22px 18px; background: var(--bone-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pb-stat .pbn { font-family: var(--mono); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--coral-deep); letter-spacing: -.03em; line-height: 1; }
.pb-stat .pbn .u { color: var(--coral-deep); }
.pb-stat .pbl { color: var(--muted); font-size: .92rem; margin-top: 10px; line-height: 1.4; }

@media (max-width: 860px) { .pb-logo-cell img { max-height: calc(var(--lh, 30px) * 0.85); } }
@media (max-width: 980px) { .pb-stats { grid-template-columns: 1fr; max-width: 420px; } }
/* below ~600px the 8 logos go to two balanced rows of four, centered. */
@media (max-width: 600px) {
  .pb-logos { gap: 16px 8px; }
  .pb-logo-cell { flex: 0 0 21%; }
  .pb-logo-cell img { max-height: calc(var(--lh, 24px) * 0.72); max-width: 100%; }
}

/* ---- F9: Transparency & Ownership - exactly 4 scannable cards ---- */
.own-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.own-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease; }
.own-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.own-card .oc-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--amber);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em;
  font-optical-sizing: auto; margin-bottom: 16px; }
.own-card:nth-child(1) .oc-ic { background: var(--coral); color: var(--ink); }
.own-card h3 { font-size: 1.12rem; line-height: 1.16; }
.own-card p { color: var(--muted); font-size: .92rem; line-height: 1.5; margin-top: 9px; }

@media (max-width: 980px) { .own-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .own-grid { grid-template-columns: 1fr; } }

/* ============================================================
   F10 TESTIMONIAL STRIP (added prompt 5) - standalone centered
   pull-quote, mono attribution. Existing palette only, no new colors.
   ============================================================ */
.tstrip { max-width: 860px; margin: 0 auto; text-align: center; }
.tstrip .tq { font-family: var(--display); font-weight: 700; color: var(--ink); margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.32; letter-spacing: -.02em; text-wrap: balance;
  quotes: "\201C" "\201D"; }
.tstrip .tq::before { content: open-quote; color: var(--coral-deep); }
.tstrip .tq::after { content: close-quote; color: var(--coral-deep); }
.tstrip .tatt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); margin-top: 22px; }
.tstrip .tatt b { color: var(--ink); font-weight: 600; }

/* M8 tools strip TIGHTENED (v4 conversion pages only, via .tools-tight on the section) -
   one compact credibility row: less vertical padding + smaller chips so all fit one line. */
.band.tools-tight { padding-top: 40px; padding-bottom: 40px; }
/* Equal-width grid so the chips align in tidy rows/columns at any width instead of
   wrapping into ragged rows. Always fully visible - no horizontal scroll. */
.tools-tight .platforms-strip { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  max-width: 1080px; margin-inline: 0; }
.tools-tight .plat-chip { width: 100%; padding: 9px 13px; border-radius: 11px; }
.tools-tight .plat-chip .pc-mk { width: 22px; height: 22px; font-size: 11px; }
.tools-tight .plat-chip .pc-name { font-size: .86rem; white-space: nowrap; }
.tools-tight .plat-chip .pc-name small { font-size: 9px; }

/* ============================================================
   CT (prompt 7) - 6-step horizontal timeline variant
   Scoped to desktop so it does not override the tablet/mobile reflow rules above
   (which are defined earlier in the file, so this would otherwise win on source order). */
@media (min-width: 1080px) {
  .htl.htl-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   CT (prompt 7) NEW SIGNATURE - TRACKING-GAP VISUAL
   Claimed vs actually-captured conversions; the captured bar
   grows server-side to meet the claimed bar and the gap closes.
   Captured bar RESTS at 156 (scaleY .5) so static/no-JS/reduced-
   motion all show the gap and match the "156 of 312" headline.
   transform/opacity only. Distinct from WA's event-flow.
   ============================================================ */
.trackgap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center;
  background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: 44px 48px;
  position: relative; overflow: hidden; }
.trackgap::before { content:""; position:absolute; top:-30%; right:-6%; width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(236,106,76,.20), transparent 65%); pointer-events:none; }
.tg-plot { position: relative; }
.tg-bars { display: flex; align-items: flex-end; gap: 36px; height: 260px; position: relative; padding-top: 14px; }
.tg-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.tg-col { width: 100%; max-width: 96px; border-radius: 10px 10px 0 0; position: relative; transform-origin: bottom; }
.tg-bar.claimed .tg-col { height: 100%; background: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 8px, rgba(255,255,255,.08) 8px 16px); border: 1.5px dashed rgba(255,255,255,.42); }
.tg-bar.captured .tg-col { background: var(--coral-deep); box-shadow: 0 12px 30px -10px rgba(216,80,47,.5); height: 100%; transform: scaleY(0.5); }
html.js-reveal .tg-bar.captured .tg-col { transform: scaleY(0.5); transition: transform 1.1s cubic-bezier(.22,.7,.25,1) .15s; }
html.js-reveal #trackgap.play .tg-bar.captured .tg-col { transform: scaleY(1); }
html.reveal-all #trackgap:not(.play) .tg-bar.captured .tg-col { transform: scaleY(0.5) !important; transition: none !important; }
.tg-cap { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); font-family: var(--mono);
  font-weight: 600; font-size: 1.5rem; letter-spacing: -.03em; white-space: nowrap; }
.tg-bar.claimed .tg-cap { color: var(--on-dark-mut); }
.tg-bar.captured .tg-cap { color: var(--amber); }
.tg-base { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark-mut); margin-top: 14px; text-align: center; }
.tg-bar.captured .tg-base { color: var(--on-dark); }
.tg-copy h2 { color: var(--on-dark); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.tg-copy .tg-lead { color: var(--on-dark-mut); margin-top: 14px; font-size: 1.04rem; line-height: 1.6; }
.tg-readout { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 22px; padding: 14px 20px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-ink); border-radius: 14px; }
.tg-readout .tgr-n { font-family: var(--mono); font-weight: 600; font-size: 2rem; color: var(--amber); letter-spacing: -.03em; }
.tg-readout .tgr-l { font-size: .92rem; color: var(--on-dark-mut); }
.tg-foot { font-family: var(--mono); font-size: 11px; color: var(--coral); margin-top: 18px; letter-spacing: .02em; }
@media (max-width: 860px) {
  .trackgap { grid-template-columns: 1fr; gap: 30px; padding: 34px 26px; }
  .tg-bars { height: 220px; gap: 26px; }
}

/* ============================================================
   GA4 (prompt 8) NEW SIGNATURE - UA -> GA4 MIGRATION (before/after)
   Left: old UA property (sunset, dimmed). Right: clean GA4. On play
   the UA panel recedes and the GA4 panel rises. transform/opacity only.
   Base (no js-reveal / no-JS) = final state visible.
   ============================================================ */
.migrate { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.mig-panel { border-radius: var(--radius-lg); padding: 30px 28px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; }
.mig-panel .mp-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; }
.mig-panel .mp-title { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 1.32rem; margin-top: 10px; }
.mig-panel .mp-sub { font-size: .9rem; margin-top: 4px; }
.mig-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.mig-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; font-size: .92rem; }
.mig-row .mr-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; flex-shrink: 0; }
/* old UA panel */
.mig-old { background: var(--bone-2); border: 1px solid var(--line); }
.mig-old .mp-tag { color: var(--muted-2); }
.mig-old .mp-tag::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.mig-old .mp-title { color: var(--muted); }
.mig-old .mp-sub { color: var(--muted-2); font-family: var(--mono); }
.mig-old .mig-row { background: var(--paper); color: var(--muted); border: 1px dashed var(--line); }
.mig-old .mig-row .mr-ic { background: var(--bone-2); color: var(--muted-2); }
.mig-old .mig-row.gone { text-decoration: line-through; opacity: .6; }
html.js-reveal .mig-old { opacity: 1; transition: opacity .7s ease, filter .7s ease; }
html.js-reveal #migrate.play .mig-old { opacity: .52; filter: saturate(.4); }
/* arrow */
.mig-arrow { display: grid; place-items: center; width: 84px; position: relative; }
.mig-arrow .ma-line { font-family: var(--mono); color: var(--coral-deep); font-size: 1.5rem; }
.mig-arrow .ma-lab { position: absolute; bottom: 30%; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
html.js-reveal .mig-arrow { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease .25s, transform .5s ease .25s; }
html.js-reveal #migrate.play .mig-arrow { opacity: 1; transform: none; }
/* new GA4 panel */
.mig-new { background: var(--ink); border: 1px solid var(--ink); color: var(--on-dark); box-shadow: var(--shadow-lg); }
.mig-new::before { content:""; position:absolute; top:-40%; right:-10%; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(236,106,76,.22), transparent 65%); pointer-events:none; }
.mig-new .mp-tag { color: var(--amber); }
.mig-new .mp-tag::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: #22a76a; box-shadow: 0 0 0 3px rgba(34,167,106,.25); }
.mig-new .mp-title { color: var(--on-dark); }
.mig-new .mp-sub { color: var(--on-dark-mut); font-family: var(--mono); }
.mig-new .mig-row { background: rgba(255,255,255,.05); border: 1px solid var(--line-ink); color: var(--on-dark); position: relative; }
.mig-new .mig-row .mr-ic { background: var(--coral); color: var(--ink); }
html.js-reveal .mig-new { opacity: 0; transform: translateY(20px); transition: opacity .7s ease .15s, transform .7s cubic-bezier(.22,.7,.25,1) .15s; }
html.js-reveal #migrate.play .mig-new { opacity: 1; transform: none; }
html.js-reveal .mig-new .mig-row { opacity: 0; transform: translateX(10px); transition: opacity .45s ease, transform .45s ease; }
html.js-reveal #migrate.play .mig-new .mig-row { opacity: 1; transform: none; }
html.js-reveal #migrate.play .mig-new .mig-row:nth-child(2) { transition-delay: .35s; }
html.js-reveal #migrate.play .mig-new .mig-row:nth-child(3) { transition-delay: .47s; }
html.js-reveal #migrate.play .mig-new .mig-row:nth-child(4) { transition-delay: .59s; }
html.js-reveal #migrate.play .mig-new .mig-row:nth-child(5) { transition-delay: .71s; }
/* reveal-all failsafe: show the migrated end-state transition-free */
html.reveal-all #migrate .mig-old { opacity: .52 !important; filter: saturate(.4) !important; transition: none !important; }
html.reveal-all #migrate .mig-arrow,
html.reveal-all #migrate .mig-new,
html.reveal-all #migrate .mig-new .mig-row { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (max-width: 860px) {
  .migrate { grid-template-columns: 1fr; gap: 16px; }
  .mig-arrow { width: 100%; height: 52px; transform: rotate(90deg); }
  html.js-reveal .mig-arrow { transform: rotate(90deg) translateX(-8px); }
  html.js-reveal #migrate.play .mig-arrow { transform: rotate(90deg); }
}

/* ============================================================
   Google Ads Copywriting & Creative page - 3 NEW shared modules (prompt 12).
   Appended to the consolidated service-v3.css (loaded on every service page).
   All selectors are page-unique (.adcard/.am-*/.vs-*/.bp-*/.serp*); the ad matrix
   reuses the #eventflow .play hook from service.js (no new JS). The .am-col reveal
   targets a child class that only exists here, so sharing #eventflow does NOT
   regress the Web Analytics event-flow (which uses .ef-node children).
   ============================================================ */

/* ---- shared: little mock "Google ad" card (on-brand, not literal Google blue/green) ---- */
.adcard { background: var(--paper); border: 1px solid var(--line); border-radius: 13px;
  padding: 16px 17px; box-shadow: var(--shadow-sm); text-align: left; }
.adcard .ad-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.adcard .ad-badge { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); border: 1px solid var(--coral); border-radius: 5px; padding: 2px 6px; }
.adcard .ad-url { font-family: var(--mono); font-size: 11px; color: var(--coral-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adcard .ad-head { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.04rem;
  line-height: 1.18; letter-spacing: -.01em; }
.adcard .ad-desc { color: var(--muted); font-size: .85rem; line-height: 1.45; margin-top: 7px; }

/* ---- M11a - FUNNEL-STAGE AD MATRIX (signature visual) ---- */
.admatrix { margin-top: 8px; }
.am-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.am-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.am-col .ad-url { max-width: 100%; }
.am-stagehead { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 12px; }
.am-stagehead .st-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted-2); }
.am-stagehead .st-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.06rem; letter-spacing: -.02em; line-height: 1.05; }
.am-col .adcard { flex: 1; display: flex; flex-direction: column; }
.am-col .ad-desc { flex: 1; }
.am-aud { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--line); line-height: 1.4; }
.am-aud b { color: var(--coral-deep); font-weight: 600; }
.am-col[data-stage="4"] .adcard { border: 1.5px solid var(--coral); box-shadow: var(--shadow-md); }
.am-rail { display: flex; align-items: center; gap: 8px; margin: 18px 2px 0; font-family: var(--mono);
  font-size: 11px; color: var(--muted); }
.am-rail .seg { flex: 1; height: 4px; border-radius: 100px; background: linear-gradient(90deg, color-mix(in srgb, var(--coral) 22%, var(--bone-2)), var(--coral)); }

html.js-reveal #eventflow .am-col { opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.22,.7,.3,1), transform .5s cubic-bezier(.22,.7,.3,1); }
html.js-reveal #eventflow.play .am-col { opacity: 1; transform: none; }
html.js-reveal #eventflow.play .am-col[data-stage="2"] { transition-delay: .1s; }
html.js-reveal #eventflow.play .am-col[data-stage="3"] { transition-delay: .2s; }
html.js-reveal #eventflow.play .am-col[data-stage="4"] { transition-delay: .3s; }
html.reveal-all #eventflow .am-col { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 860px) { .am-track { grid-template-columns: 1fr 1fr; } .am-rail { display: none; } }
@media (max-width: 480px) { .am-track { grid-template-columns: 1fr; } }

/* ---- M11b - STRONG vs WEAK ad comparison ---- */
.vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.vs-side { display: flex; flex-direction: column; }
.vs-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.vs-label .pip { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vs-side.weak .vs-label { color: var(--muted-2); } .vs-side.weak .pip { background: var(--muted-2); }
.vs-side.strong .vs-label { color: var(--coral-deep); } .vs-side.strong .pip { background: var(--coral); }
.vs-side.weak .adcard { border-style: dashed; box-shadow: none; background: var(--bone-card); opacity: .92; }
.vs-side.weak .adcard .ad-badge { border-color: var(--line); color: var(--muted-2); }
.vs-side.weak .adcard .ad-url { color: var(--muted-2); }
.vs-side.weak .adcard .ad-head { color: var(--muted); }
.vs-side.strong .adcard { border: 1.5px solid var(--coral); box-shadow: var(--shadow-md); }
.vs-annot { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.vs-annot li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--text); line-height: 1.4; list-style: none; }
.vs-annot .mk { font-family: var(--mono); font-size: 13px; line-height: 1.2; flex-shrink: 0; margin-top: 1px; }
.vs-side.weak .vs-annot .mk { color: var(--muted-2); }
.vs-side.strong .vs-annot .mk { color: #1f8a5b; }
.vs-mid { display: grid; place-items: center; padding: 0 26px; }
.vs-mid .vchip { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--amber);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .82rem; box-shadow: var(--shadow-md); }
@media (max-width: 820px) {
  .vs-grid { grid-template-columns: 1fr; gap: 18px; }
  .vs-mid { padding: 0; } .vs-mid .vchip { transform: rotate(90deg); }
}

/* ---- M10 - BRAND-PROTECTION SERP panel ---- */
.bp-wrap { display: grid; grid-template-columns: 1.04fr .96fr; gap: 40px; align-items: center; }
.bp-copy h2 { letter-spacing: -.02em; }
.bp-copy .lead { margin-top: 14px; }
.bp-points { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.bp-point { display: flex; gap: 14px; align-items: flex-start; }
.bp-point .bp-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: var(--amber);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: .95rem; letter-spacing: -0.02em;
  font-optical-sizing: auto; flex-shrink: 0; }
.bp-point .bp-t b { display: block; color: var(--ink); font-weight: 700; font-size: 1rem; }
.bp-point .bp-t span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 3px; }

.serp { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 8px;
  box-shadow: var(--shadow-md); }
.serp .serp-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 16px; margin-bottom: 18px; }
.serp .serp-bar .q { font-family: var(--body); font-size: .92rem; color: var(--ink); font-weight: 600; }
.serp .serp-bar .mag { margin-left: auto; color: var(--muted-2); }
.serp-ad { padding: 13px 0; border-bottom: 1px solid var(--line); position: relative; }
.serp-ad:last-child { border-bottom: 0; }
.serp-ad .sa-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.serp-ad .sa-badge { font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--ink); }
.serp-ad .sa-url { font-family: var(--mono); font-size: 11.5px; color: var(--coral-deep); }
.serp-ad .sa-head { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: -.01em; }
.serp-ad .sa-desc { color: var(--muted); font-size: .84rem; margin-top: 3px; line-height: 1.4; }
.serp-ad.you .sa-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #1f8a5b; border: 1px solid color-mix(in srgb, #1f8a5b 40%, transparent); border-radius: 5px; padding: 2px 7px; }
.serp-ad.impostor { opacity: .96; }
.serp-ad.impostor .sa-url { color: var(--muted-2); text-decoration: line-through; }
.serp-ad.impostor .sa-flag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-deep);
  background: color-mix(in srgb, var(--coral) 12%, transparent); border-radius: 5px; padding: 3px 8px; margin-left: auto; }
.serp-ad.impostor::after { content: ""; position: absolute; inset: 7px -8px; border: 1.5px dashed var(--coral);
  border-radius: 10px; pointer-events: none; }
.serp-foot { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); padding: 12px 0; text-align: center; }

@media (max-width: 920px) { .bp-wrap { grid-template-columns: 1fr; gap: 30px; } }

/* ============================================================
   Google Shopping Feed Management page - NEW signature visual (prompt 14).
   Appended to the consolidated service-v3.css. All selectors page-unique
   (.feedba/.fb-*); the reveal targets #eventflow .fb-card.after / .fb-link -
   child classes that exist ONLY here, so sharing #eventflow does NOT collide
   with the WA event-flow (.ef-node) or the copywriting ad-matrix (.am-col).
   Reuses the service.js .play hook -> no new JS.
   ============================================================ */
.feedba { margin-top: 8px; }
.fb-track { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.fb-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-width: 0; }
.fb-card.after { border: 1.5px solid var(--coral); box-shadow: var(--shadow-md); }

.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.fb-head .fb-lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.fb-card.after .fb-head .fb-lab { color: var(--coral-deep); }
.fb-status { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 6px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 6px; }
.fb-status.bad { color: var(--coral-deep); background: color-mix(in srgb, var(--coral) 13%, transparent); }
.fb-status.good { color: #1f8a5b; background: color-mix(in srgb, #1f8a5b 12%, transparent); }
.fb-status .pip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.fb-prod { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.fb-thumb { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; background:
  repeating-linear-gradient(45deg, var(--bone-2), var(--bone-2) 6px, var(--bone-card) 6px, var(--bone-card) 12px);
  border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 8.5px; color: var(--muted-2); text-align: center; line-height: 1.2; }
.fb-card.after .fb-thumb { background: var(--coral); border-color: transparent; color: var(--ink); }
.fb-title { font-family: var(--body); font-weight: 600; color: var(--ink); font-size: .96rem; line-height: 1.3; }
.fb-card.before .fb-title { color: var(--muted); }
.fb-title .tlab { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }

.fb-attrs { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.fb-attr { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; }
.fb-attr .ak { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--muted-2); width: 96px; flex-shrink: 0; line-height: 1.5; }
.fb-attr .av { color: var(--text); min-width: 0; line-height: 1.5; }
.fb-attr .mk { width: 15px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; text-align: center; line-height: 1.5; }
.fb-card.before .fb-attr.miss .av { color: var(--muted-2); font-style: italic; }
.fb-card.before .fb-attr.miss .mk { color: var(--coral-deep); }
.fb-card.after .fb-attr .mk { color: #1f8a5b; }
.fb-card.after .fb-attr .av { color: var(--ink); font-weight: 500; }
.fb-attr .av .cl { font-family: var(--mono); font-size: 9.5px; background: var(--bone-2); border-radius: 5px; padding: 2px 6px; color: var(--ink); }

.fb-link { display: grid; place-items: center; width: 58px; align-self: center; color: var(--coral-deep); font-size: 22px; }

html.js-reveal #eventflow .fb-card.after { opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.7,.3,1), transform .6s cubic-bezier(.22,.7,.3,1); transition-delay: .15s; }
html.js-reveal #eventflow.play .fb-card.after { opacity: 1; transform: none; }
html.js-reveal #eventflow .fb-link { opacity: 0; transition: opacity .5s ease; transition-delay: .35s; }
html.js-reveal #eventflow.play .fb-link { opacity: 1; }
html.reveal-all #eventflow .fb-card.after,
html.reveal-all #eventflow .fb-link { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 820px) {
  .fb-track { grid-template-columns: 1fr; gap: 16px; }
  .fb-link { width: 100%; height: 30px; transform: rotate(90deg); }
}