/* Process flow.

   All selectors sit under .jrp-process. The source page used bare .icon,
   .label, .panel, .steps and .node, which collide with the ported
   WordPress CSS, so everything here is prefixed and scoped.

   ── Why there are no CSS custom properties in this file ──────────────
   The first version drove every colour through --jrp-* variables. The
   watermark came out as the theme's inherited body grey instead of near
   black, and setting Accent to red in the Styles tab changed nothing:
   the variables were not resolving in HubSpot's compiled module CSS.
   Rewriting just the watermark to a literal colour fixed that one line
   immediately, which is the experiment that settled it.

   So: every colour is written literally, in plain CSS that cannot fail to
   parse. The Styles tab overrides them from the guarded block at the
   bottom of this file, where each field emits a whole rule only when it
   actually has a value. Nothing here depends on var() resolving. */

.jrp-process {
  width: 100%;
  padding: 0 0 24px;
  font-family: 'DM Mono', 'SFMono-Regular', Menlo, monospace;
}

.jrp-process *,
.jrp-process *::before,
.jrp-process *::after { box-sizing: border-box; }

.jrp-inner { max-width: 1080px; margin: 0 auto; }

/* ── Flow ────────────────────────────────── */
.jrp-flow { position: relative; }

.jrp-track {
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: #232323;
}

.jrp-signal {
  position: absolute;
  top: -1px;
  left: 0;
  width: 140px;
  height: 3px;
  margin-left: -140px;            /* leading edge sits at x = 0 */
  /* The source design put a pure `#fff 85%` stop at the comet's head. On the
     dark page that white blows out the green either side of it and the whole
     streak reads silver. The head is now a light tint OF the accent, so it
     still burns brighter than the tail but stays unmistakably green.
     First declaration is the fallback for engines without color-mix; both
     resolve to green, so neither outcome can bring the white back. */
  background: linear-gradient(90deg, transparent, #4ADE80 60%, #4ADE80 100%);
  background: linear-gradient(90deg, transparent, #4ADE80 55%, color-mix(in srgb, #4ADE80 35%, #fff) 88%, transparent);
  filter: drop-shadow(0 0 6px #4ADE80);
  will-change: transform;
  opacity: 0;
}

.jrp-steps {
  display: flex;
  align-items: flex-start;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jrp-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  cursor: pointer;
  outline: none;
}

.jrp-node {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #232323;
  background: #121212;
  display: grid;
  place-items: center;
  transition: border-color 0.35s, box-shadow 0.35s;
}

.jrp-icon {
  display: grid;
  place-items: center;
  color: #5C5C5C;
  transition: color 0.35s;
}
.jrp-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jrp-ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid #4ADE80;
  opacity: 0;
}

.jrp-label {
  font-family: 'Syne', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5C5C5C;
  text-align: center;
  transition: color 0.35s;
}

.jrp-step:focus-visible .jrp-node,
.jrp-step.is-active .jrp-node,
.jrp-step:hover .jrp-node {
  border-color: #4ADE80;
  box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.14), 0 0 28px rgba(74, 222, 128, 0.32);
}
.jrp-step.is-active .jrp-icon,
.jrp-step:hover .jrp-icon { color: #4ADE80; }
.jrp-step.is-active .jrp-label,
.jrp-step:hover .jrp-label { color: #fff; }
.jrp-step.is-active .jrp-ring { animation: jrp-ripple 0.9s ease-out forwards; }

@keyframes jrp-ripple {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.9); }
}

/* ── Detail panel ────────────────────────── */
.jrp-panel {
  position: relative;
  margin-top: 44px;
  padding: 72px 40px 36px;
  overflow: hidden;
  background: #131313;
  border: 1px solid #232323;
}

/* Marker on the panel's top edge, sliding under the active node */
.jrp-pointer {
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  margin-left: -20px;
  background: #4ADE80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.32);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Every step is rendered; they share one grid cell so the panel stays as
   tall as the longest one instead of jumping on each switch. */
.jrp-panel-inner { display: grid; }

.jrp-panel-item {
  grid-area: 1 / 1;
  position: relative;
  /* Own stacking context, so the watermark's z-index resolves against this
     item rather than escaping to an ancestor and landing over the copy. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.jrp-panel-item.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Ghosted step name behind the content, matching the site's ABOUT treatment */
.jrp-watermark {
  position: absolute;
  top: -14px;
  left: -6px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 10vw, 132px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1C1C1C;
  pointer-events: none;
  user-select: none;
  z-index: 0;             /* behind .jrp-title and .jrp-desc, both z-index 1 */
}

.jrp-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}

.jrp-desc {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: #A3A3A3;
  max-width: 64ch;
}
.jrp-desc p { margin: 0 0 0.75em; }
.jrp-desc p:last-child { margin-bottom: 0; }

/* ── Entrance ────────────────────────────── */
/* is-armed is added by module.js and is-in when the section scrolls into
   view. Nothing is hidden by default, so a script that never runs leaves
   the content visible rather than blank — the .ftco-animate lesson. */
.jrp-process.is-armed .jrp-step,
.jrp-process.is-armed .jrp-track,
.jrp-process.is-armed .jrp-panel {
  opacity: 0;
  transform: translateY(18px);
}
.jrp-process.is-armed .jrp-track { transform: none; }

.jrp-process.is-armed.is-in .jrp-step,
.jrp-process.is-armed.is-in .jrp-track,
.jrp-process.is-armed.is-in .jrp-panel {
  animation: jrp-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.jrp-process.is-armed.is-in .jrp-track             { animation-delay: 0.20s; }
.jrp-process.is-armed.is-in .jrp-step:nth-child(1) { animation-delay: 0.10s; }
.jrp-process.is-armed.is-in .jrp-step:nth-child(2) { animation-delay: 0.25s; }
.jrp-process.is-armed.is-in .jrp-step:nth-child(3) { animation-delay: 0.40s; }
.jrp-process.is-armed.is-in .jrp-step:nth-child(4) { animation-delay: 0.55s; }
.jrp-process.is-armed.is-in .jrp-step:nth-child(5) { animation-delay: 0.70s; }
.jrp-process.is-armed.is-in .jrp-step:nth-child(6) { animation-delay: 0.85s; }
.jrp-process.is-armed.is-in .jrp-panel             { animation-delay: 0.90s; }

@keyframes jrp-rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .jrp-process.is-armed .jrp-step,
  .jrp-process.is-armed .jrp-track,
  .jrp-process.is-armed .jrp-panel { opacity: 1; transform: none; animation: none; }
  .jrp-signal { display: none; }
  .jrp-step.is-active .jrp-ring { animation: none; }
  .jrp-pointer { transition: none; }
  .jrp-panel-item { transition: none; }
}

/* ── Mobile: vertical rail ───────────────── */
@media (max-width: 640px) {
  .jrp-track {
    top: 28px; bottom: 28px; left: 27px; right: auto;
    width: 1px; height: auto;
  }
  .jrp-signal {
    left: -1px; top: 0; width: 3px; height: 140px;
    margin-left: 0; margin-top: -140px;
    background: linear-gradient(180deg, transparent, #4ADE80 60%, #4ADE80 100%);
    background: linear-gradient(180deg, transparent, #4ADE80 55%, color-mix(in srgb, #4ADE80 35%, #fff) 88%, transparent);
  }
  .jrp-steps { flex-direction: column; gap: 40px; }
  .jrp-step { flex-direction: row; gap: 20px; }
  .jrp-label { text-align: left; font-size: 13px; }
  .jrp-panel { margin-top: 36px; padding: 54px 24px 28px; }
  .jrp-watermark { top: -8px; left: -2px; }
  .jrp-pointer { display: none; }
}

/* ══ Styles tab overrides ════════════════════════════════════════════
   Each field emits complete rules only when it has a value, so an empty
   field leaves the literals above untouched instead of writing a broken
   declaration. Mobile gradient is re-stated inside its media query. */

{% if module.style.accent.color %}
  {% set a = module.style.accent.color %}
  {% set a_rgb = module.style.accent.color|convert_rgb %}
.jrp-signal {
  background: linear-gradient(90deg, transparent,  60%,  100%);
  background: linear-gradient(90deg, transparent,  55%, color-mix(in srgb,  35%, #fff) 88%, transparent);
  filter: drop-shadow(0 0 6px );
}
.jrp-ring { border-color: ; }
.jrp-step:focus-visible .jrp-node,
.jrp-step.is-active .jrp-node,
.jrp-step:hover .jrp-node {
  border-color: ;
  box-shadow: 0 0 0 6px rgba(, 0.14), 0 0 28px rgba(, 0.32);
}
.jrp-step.is-active .jrp-icon,
.jrp-step:hover .jrp-icon { color: ; }
.jrp-pointer {
  background: ;
  box-shadow: 0 0 10px rgba(, 0.32);
}
@media (max-width: 640px) {
  .jrp-signal {
    background: linear-gradient(180deg, transparent,  60%,  100%);
    background: linear-gradient(180deg, transparent,  55%, color-mix(in srgb,  35%, #fff) 88%, transparent);
  }
}
{% endif %}

{% if module.style.line.color %}
.jrp-track { background: ; }
.jrp-node  { border-color: ; }
.jrp-panel { border-color: ; }
{% endif %}

{% if module.style.panel_bg.color %}
.jrp-panel { background: ; }
{% endif %}

{% if module.style.watermark.color %}
.jrp-watermark {
  color: rgba(, );
}
{% endif %}

{% if module.style.muted.color %}
.jrp-icon  { color: ; }
.jrp-label { color: ; }
{% endif %}

{% if module.style.body_text.color %}
.jrp-desc { color: ; }
{% endif %}