/* GBP page "One profile, three jobs" = block row type "journey" (inc/sub-v2.php ss_subv2_journey_block(); Mike-approved
   "Direction A - Three-step journey", 2026-09-30, replaced the "structure" org chart on
   /organic-seo/google-business-profile-optimization/). Split header, a soft band holding three numbered step cards, a
   slim trust strip, then the Client Hub payoff beside an example dashboard tile. Everything is scoped to .gbpj; colours
   are the site palette tokens (inc/ss-glow.php ss_palette()), type = the kit's Proxima Nova stack (var(--font) on .sv2).
   Enqueued only by inc/seo-sub-v2.php when a row has type "journey". Breakpoints 980 / 620 as in the mock. */
.gbpj{--gbpj-shadow-card:0 1px 2px rgba(var(--ss-ink-rgb),.04),0 12px 32px -12px rgba(var(--ss-navy-rgb),.14);--gbpj-shadow-lift:0 2px 4px rgba(var(--ss-ink-rgb),.05),0 24px 48px -16px rgba(var(--ss-navy-rgb),.24);background:#fff;color:var(--ss-ink)}
.gbpj svg{flex:none}

/* header */
.gbpj-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end}
.gbpj-head .sv2-h2{color:var(--ss-ink)}
.gbpj .gbpj-lede{font-size:18px;color:var(--ss-ink-2);max-width:48ch;line-height:1.55}

/* band */
.gbpj-band{position:relative;margin-top:64px;padding:48px;border-radius:32px;background:radial-gradient(ellipse 45% 70% at 100% 100%,rgba(var(--ss-blue-rgb),.16),rgba(var(--ss-blue-rgb),0) 70%),linear-gradient(180deg,var(--ss-ground),var(--ss-snow))}
.gbpj-profile{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.gbpj-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--ss-navy);color:var(--ss-gold);flex:none}
.gbpj-badge svg{width:24px;height:24px}
.gbpj-profile__txt{display:flex;flex-direction:column;min-width:0;line-height:1.55}
.gbpj-profile__txt b{font-size:18px;font-weight:700;color:var(--ss-ink);display:block;line-height:1.3}
.gbpj-profile__txt b svg{display:inline-block;width:18px;height:18px;margin-left:2px;vertical-align:-3px;color:var(--ss-blue)} /* inline, so the badge follows the last word when the name wraps on phones */
.gbpj-profile__txt > span{color:var(--ss-ink-2)}
.gbpj-nw{white-space:nowrap}

.gbpj-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.gbpj-step{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px;background:#fff;border:1px solid var(--ss-line);border-radius:24px;box-shadow:var(--gbpj-shadow-card);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;min-width:0}
.gbpj-step:not(:last-child)::after{content:"";position:absolute;top:52px;right:-25px;width:18px;height:18px;border-top:2.5px solid var(--ss-gold-deep);border-right:2.5px solid var(--ss-gold-deep);transform:rotate(45deg);z-index:1}
.gbpj-step__top{display:flex;align-items:center;justify-content:space-between}
.gbpj-num{font-size:56px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--ss-blue-deep);background:var(--ss-blue-shine);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.gbpj-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--ss-gold-soft);color:var(--ss-navy);transition:background .25s ease,color .25s ease}
.gbpj-ico svg{width:26px;height:26px}
.gbpj-step h3{font-size:24px;font-weight:700;line-height:1.2;margin-top:8px;color:var(--ss-ink)}
.gbpj .gbpj-sub{color:var(--ss-ink-2);margin-top:-8px;line-height:1.55}
.gbpj-checks{display:grid;gap:12px;margin-top:8px;padding-top:24px;border-top:1px solid var(--ss-line)}
.gbpj-checks li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--ss-ink);line-height:1.4}
.gbpj-checks svg{width:20px;height:20px;margin-top:1px;padding:3px;border-radius:50%;background:var(--ss-ok-soft);color:var(--ss-ok)}

/* trust strip */
.gbpj-trust{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px 40px;margin-top:48px;padding-block:24px;border-block:1px solid var(--ss-line)}
.gbpj .gbpj-trust__lbl{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ss-ink-3);max-width:15ch;line-height:1.45}
.gbpj-trust ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.gbpj-trust li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ss-ink);line-height:1.3;min-width:0}
.gbpj-trust li svg{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--ss-snow);color:var(--ss-blue-deep)}

/* Client Hub payoff */
.gbpj-hub{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 64px;align-items:center;margin-top:96px}
.gbpj-hub h3{margin-top:0;font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.2;color:var(--ss-ink)}
.gbpj .gbpj-btn{margin-top:32px;line-height:1.2;white-space:normal;max-width:100%;transition:filter .15s,transform .15s}
.gbpj .gbpj-btn svg{width:18px;height:18px}

/* example dashboard tile */
.gbpj-device{background:#fff;border:1px solid var(--ss-line);border-radius:24px;box-shadow:var(--gbpj-shadow-lift);overflow:hidden;min-width:0;line-height:1.55}
.gbpj-chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--ss-navy-deep);color:var(--ss-on-navy);font-size:13px;font-weight:600;flex-wrap:wrap}
.gbpj-dots{display:flex;gap:6px;margin-right:8px}
.gbpj-dots i{width:10px;height:10px;border-radius:50%;background:var(--ss-navy-line)}
.gbpj-chrome__title{color:#fff}
.gbpj-example{margin-left:auto;padding:3px 10px;border-radius:999px;background:rgba(var(--ss-gold-rgb),.16);color:var(--ss-gold);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gbpj-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 0}
.gbpj-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--ss-line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ss-ink-2);background:var(--ss-ground)}
.gbpj-pill svg{width:14px;height:14px}
.gbpj-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:16px 24px 0;background:var(--ss-line);border:1px solid var(--ss-line);border-radius:16px;overflow:hidden}
.gbpj-kpi{background:#fff;padding:14px 14px 12px;min-width:0}
.gbpj-kpi__k{font-size:12px;font-weight:600;color:var(--ss-ink-3);line-height:1.25;min-height:30px}
.gbpj-kpi__v{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ss-ink);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:4px}
.gbpj-kpi__v small{font-size:15px;color:var(--ss-gold-deep)}
.gbpj-kpi__d{font-size:12px;font-weight:700;color:var(--ss-ok);margin-top:2px}
.gbpj-chart{padding:16px 24px 0}
.gbpj-chart__head{display:flex;justify-content:space-between;gap:16px;font-size:12px;font-weight:600;color:var(--ss-ink-3)}
.gbpj-chart svg{display:block;width:100%;height:88px;margin-top:6px}
.gbpj-stop0{stop-color:var(--ss-blue);stop-opacity:.28}
.gbpj-stop1{stop-color:var(--ss-blue);stop-opacity:0}
.gbpj-grid line{stroke:var(--ss-line);stroke-width:1;vector-effect:non-scaling-stroke}
.gbpj-line{fill:none;stroke:var(--ss-blue);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gbpj-locs{margin:16px 24px 24px;border-top:1px solid var(--ss-line)}
.gbpj-loc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 56px 56px;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ss-line);font-size:13px;font-variant-numeric:tabular-nums}
.gbpj-loc:last-child{border-bottom:0}
.gbpj-loc--h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ss-ink-3)}
.gbpj-loc b{font-weight:600;color:var(--ss-ink)}
.gbpj-n{text-align:right;color:var(--ss-ink-2);font-weight:600}
.gbpj-bar{height:6px;border-radius:6px;background:var(--ss-snow);overflow:hidden}
.gbpj-bar i{display:block;height:100%;border-radius:6px;background:var(--ss-blue-shine)}

@media (max-width:980px){
  .gbpj-head,.gbpj-hub{grid-template-columns:minmax(0,1fr)}
  .gbpj-steps{grid-template-columns:minmax(0,1fr);gap:40px}
  .gbpj-step:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:-31px;margin-left:-9px;transform:rotate(135deg)}
  .gbpj-trust{grid-template-columns:minmax(0,1fr)}
  .gbpj .gbpj-trust__lbl{max-width:none}
  .gbpj-trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .gbpj-band{padding:24px 16px;border-radius:24px;margin-top:40px}
  .gbpj-profile{align-items:flex-start}
  .gbpj-step{padding:24px}
  .gbpj-num{font-size:44px}
  .gbpj-trust ul{grid-template-columns:minmax(0,1fr)}
  .gbpj-kpis{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:16px}
  .gbpj-kpi:last-child{grid-column:1 / -1}
  .gbpj-toolbar,.gbpj-chart{padding-inline:16px}
  .gbpj-locs{margin-inline:16px}
  .gbpj-loc{grid-template-columns:minmax(0,1fr) 48px 48px}
  .gbpj-loc .gbpj-bar,.gbpj-loc--h span:nth-child(2){display:none}
  .gbpj-hub{margin-top:64px}
}
@media (prefers-reduced-motion:reduce){
  .gbpj *,.gbpj *::after{transition:none!important}
  }